How to add Google +1 Button to Blogger
Well, the answer is, when you finds a web content to be useful and click Google +1 button to share it on Google+, it will not only help your friends and contacts on Google+ Circle to get to know about the interesting content but will also help them to find more relevant search results on Google.
Easy Way
If you want an easy way then Blogger has already enabled it for us, all you need is to turn on the official share buttons which includes Google +1 button. It can be found under Layout tab; click the “Edit” link under “Blog Posts” gadget, select “Show Share Buttons” and save it; but I must say that you cannot customize or can choose any other sizes.
Advance way
It comes handy when you are thinking to add Google +1 button within Blogger posts with a different size and/or type on your desired position manually.Step 1: Login to Blogger and go to your blog’s Template tab.
Step 2: Click “Edit Html” and check “Expand Widget Templates”.
Step 3: Configure the the below options to generate Google +1 button code for Blogger and copy it.
Button options
Size:Annotation:
pixels (?)
Language:
Float:
Show on:
Preview and code
Step 4: Find<b:if cond='data:blog.pageType != "static_page"'><div style='float: none;'> <div class='g-plusone' data-size='tall' data-annotation='bubble' expr:data-href='data:post.canonicalUrl'></div> </div></b:if>
<data:post.body/>
and before or after it (or if you want you can add it in both places to
show Google +1 button above and below Blogger posts) add the above
code.Step 5: Find
</body> and immediately before it add the below script.<script type="text/javascript">
window.___gcfg = {lang: '<data:language/>', parsetags: 'onload'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Step 6: Save your template.Attributions
Size- Google +1 button is available in four sizes.Annotation- If you select ‘inline’ you will get to set the width. The default width is ‘450’ pixels while the minimum recommended is ‘120’. Only your friends’ faces will be seen if they have +1ed the post.Language- It will get to your blog’s default language but you can always set it to your locale language.
Points to note:
- I have gone with the
asynchronous script in step 5. I have found out that sometime it fails
to load if it’s not placed immediately above the closing body tag. If
you are facing such problems then add the simple
onloadversion instead.<script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: '<data:language/>'} </script> - For more information, visit Google +1 button documentation page.
- Create Google Plus page for you blog to gain more exposure.
