Thursday, June 2, 2011

How to Add Google +1 Button to Your Blogger Site

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 button shows them under the Like button in your post, Google +1 shows them under your post in Google search results.

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

Let us proceed with the tutorial:
  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 HTML window.
  4. Find the following code in your HTML, this is the code for your post content:
  5. Paste the +1 button code immediately below (after) it:
    <!-- Google +1 button Start -->
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div style='float:left;padding:10px;'>
    <script type="text/javascript" src=""></script>
    <g:plusone expr:href="data:post.url" size="standard" count="true"></g:plusone>
    <!-- Google +1 button End -->
  6. Configure button
    You can configure by changing the attributes in line 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
google plus one small  small
google plus one medium  medium
google plus one standard  standard
google plus one tall  tall
  •   You can remove the count by changing the value of count attribute from true to false
     7. Button repositioning
         The code above positions the button on bottom left of each post. You can change the positioning if you            wish. 
  •  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
    8. Displaying button on static pages
        The code above doesn't display the button on static pages. To make it appear on static pages as well,               remove the conditional tag -code line 2 and 7. 

    9. Preview before saving. 


0 Responses to “How to Add Google +1 Button to Your Blogger Site”

Post a Comment

All Rights Reserved GprsBay | Blogger Template by Bloggermint