Add Google +1 (plus one) button to Blogger

Google +1 (pronounced “plus one”) is a recommendation button is similar to Facebook Like button. Both of them show friends that recommended your post.

These buttons will +1 the containing post, regardless the page you are at. It will work on both multi-post pages (home page, archive etc.) and individual/post page etc. You will have an option whether to include a counter or not.

Advantage of add google+1 button over a Facebook Like button.

Facebook Like shows them under the button in your post, but Google +1 shows them under your post in Google SERP (search engine results pages).
Switch to the new Google +1 (asynchronous) script. Split the code into two parts.
1.The first part (script) placed in the head section of template.
2.The second part (button code) stays.

Procedure of Add Google +1 (plus one) button
1. Go to Dashboard > Design > Edit HTML.
2. Back up your template.
3. Tick the Expand Widget Templates check box on top right of the code window.
4. Find the </head> tag, and paste this script right above it:

<!-- Google +1 script Start -->
<script type="text/javascript">
(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>
<!-- Google +1 script End -->

5. Next, look <data:post.body/> for and paste the following +1 button code immediately under it

<!-- Google +1 button Start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<p></p>
<div style='float:left;padding:10px;'>
<g:plusone expr:href="data:post.url" size="standard" annotation="bubble"></g:plusone>
</div>
</b:if>
<!-- Google +1 button End -->

6.You can configure the button by changing the attributes of the g:plusone tag in line (in step 5).
Select the size of button by replacing the value of size attribute with a value from the below.

You can remove the count by changing the value of annotation attribute to none.

Button repositioning
You can change the positioning if you wish to.
•Position it on top of post
Place the button code before (instead of after) <data:post.body/>.
•Position it on the right
Change the float in line 4 from left to right.

Displaying button on static page


8. If you want it to appear on static pages as well, remove the tags (step 5 line 2 and 7).
9. Preview before saving.

Related Posts:

Promote Your Blog

Add This