ADD GOOGLE +1 IN BLOG

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

Google +1 (pronounced “plus one”) is a recommendation button somewhat similar to Facebook Like button. Both of them show friends that recommended your post. But while Facebook Like shows them under the button in your post, Google +1 shows them under your post in Google SERP (search engine results pages).

ADD GOOGLE +1 IN BLOG

This tutorial will show you how to add a Google +1 button to every blog post in a Blogger blog. It allows your readers to recommend your posts to their Google friends and contacts right from your blog post.
This button 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.

(If you don’t want to add the button under blog posts, there is another method: Add it to a floating social media sharing bar)

1 Blogger below post

Update Sep. 2011: Switch to the new Google +1 (asynchronous) script. Split the code into two parts, the first part (script) placed in the head section of template, the second part (button code) stays.

Let us proceed with the tutorial:

Go to Dashboard > Design > Edit HTML.
Back up your template.
Tick the Expand Widget Templates checkbox on top right of the code window.
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 for <data:post.body/> 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 -->

Configure button
You can configure the button by changing the attributes of the g:plusone tag in line 5 (in step 5).
- Select the size of button by replacing the value of size attribute with a value from the table below.
  
  Button size (with count)
  
  Value
  
  small
  
  medium
  
  standard
  
  tall
- You can remove the count by changing the value of annotation attribute to none.
Button repositioning
The +1 button code (in step 5) positions the button on bottom left of each post. 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 pages
Conditional tags prevent the button from appearing on static pages. If you want it to appear on static pages as well, remove the tags (step 5 line 2 and 7).
Preview before saving.