Better Embedding Code for Google +1 Buttons

Google wants to see a +1 button on each Web page, but many people hate embedding widgets and buttons because they clutter pages and add hundreds of milliseconds to the page loading time.

Google is obsessed with speed and performance, but it didn't do a good job at optimizing the code for embedding +1 buttons. As Aaron Peters explains, Google's code blocks page loading if you place it inside the <head> tag, so it's better to place it before you close the <body> tag. An even better idea is to load the Google +1 script in a non-blocking way, just like Google did with Google Analytics, AdSense and Google Related Links.

Aaron also noticed that the JavaScript code is not minified, browsers can only cache the JavaScript file for 6 minutes and there's a mistake in the code from this page: "http" should be replaced with "https" to avoid an unnecessary redirect.

Here's a better embedding code suggested by Aaron:

<!-- Place this tag just before your close body tag -->
<script>
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = 'https://apis.google.com/js/plusone.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>

<!-- Place this tag where you want the +1 button to render -->
<g:plusone></g:plusone>

Apparently, the code doesn't work in Blogger by default. There's a workaround, but you shouldn't use it if you aren't familiar with HTML and editing Blogger's template. Basically you can replace <b:include data='blog' name='all-head-content'/> with the code generated by Blogger ("view source" is your friend), then delete: <meta content='blogger' name='generator'/>.

As Google explains, "most browsers will load the code in parallel with other scripts on the page, thus reducing the web page load time".

Labels

Web Search Gmail Google Docs Mobile YouTube Google Maps Google Chrome User interface Tips iGoogle Social Google Reader Traffic Making Devices cpp programming Ads Image Search Google Calendar tips dan trik Google Video Google Translate web programming Picasa Web Albums Blogger Google News Google Earth Yahoo Android Google Talk Google Plus Greasemonkey Security software download info Firefox extensions Google Toolbar Software OneBox Google Apps Google Suggest SEO Traffic tips Book Search API Acquisitions InOut Visualization Web Design Method for Getting Ultimate Traffic Webmasters Google Desktop How to Blogging Music Nostalgia orkut Google Chrome OS Google Contacts Google Notebook SQL programming Google Local Make Money Windows Live GDrive Google Gears April Fools Day Google Analytics Google Co-op visual basic Knowledge java programming Google Checkout Google Instant Google Bookmarks Google Phone Google Trends Web History mp3 download Easter Egg Google Profiles Blog Search Google Buzz Google Services Site Map for Ur Site game download games trick Google Pack Spam cerita hidup Picasa Product's Marketing Universal Search FeedBurner Google Groups Month in review Twitter Traffic AJAX Search Google Dictionary Google Sites Google Update Page Creator Game Google Finance Google Goggles Google Music file download Annoyances Froogle Google Base Google Latitude Google Voice Google Wave Google Health Google Scholar PlusBox SearchMash teknologi unik video download windows Facebook Traffic Social Media Marketing Yahoo Pipes Google Play Google Promos Google TV SketchUp WEB Domain WWW World Wide Service chord Improve Adsence Earning jurnalistik sistem operasi AdWords Traffic App Designing Tips and Tricks WEB Hosting linux How to Get Hosting Linux Kernel WEB Errors Writing Content award business communication ubuntu unik