How to Add +1 (Plus One) Button to Blogger

Tweet

• Save to Delicious
• Stumble it
• Digg this
• Share

Google introduced the Plus One button (popularly known as +1 button) for websites. +1 means “this is pretty cool” and will help your friends, family, contacts and rest of the world to find more relevant topics they are searching for on Google search. Blogger has also enabled this feature and you can easily add it to your blog. But before I discuss to how to add the +1 (Plus One) button to Blogger, let’s find out more about it by this video.

+1 from Google

The easiest way to add the +1 button to Blogger is by enabling the official share buttons. Go to Blogger’s dashboard > Design > Page Elements tab and click the “Edit” link on “Blog Posts” section. This will open a new pop-up window where you have to select the “Show Share Buttons”. That’s it.

Image by Blogger Buzz

Adding Plus One button manually to Blogger

Now here’s comes an advanced option to add the Plus One button to Blogger. This comes handy when you want a more customized +1 button.

Update: Google has made an update to its +1 button: Asynchronous JavaScript, Inline Annotation and +Snippet. Asynchronous script helps to render your webpage smoothly while +Snippet gives your +1ed URLs more accuracy by showing the page title, description of the post and image thumbnail (if any available). Inline Annotation works like Facebook’s Like button, i.e. by showing profile pictures of your friends. Currently, this option is only available to people who have signed up for Google+ Platform Preview.

Step 1: To get this you can visit the +1 official site and easily generate the code for the type of button you want. By this way it will be easier for you to add and implement. While generating the code you will find two types of snippets. The JavaScript and the rendering code for the button. See the example below.

If you prefer to add asynchronous script then let it as it is. But I prefer onload version (will load after the document is ready) as I have found out that the asynchronous script creates some problem with Blogger. So click the Advance options and uncheck Asynchronous.

For Blogger, you have to add some extra snippet to let this render correctly, It's expr:href='data:post.canonicalUrl' which you have to put manually. It is told in live examples below:

Step 2: Go to Design > Edit Html tab and check “Expand Widget Templates”.

Step 3: Find </head> or </body> and above any one of these tags add the onload script as mentioned below:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"/>

This is for English US language only. If you are on a different country with different locale language, then add the JavaScript that you have generated from the official site. For example, if your blog language is in French then the generated code will be:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'fr'}
</script>

If you want to add the asynchronous script, then you have to add it immediately above closing </body> tag to let it work properly. If you need to add any other JavaScript before the closing body tag then it should be placed before the Plus One JavaScript code.

Step 4: Find <data:post.body/> and below/before it add any one (or both) of the rendering codes mentioned below.

Small +1 button for Blogger

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<g:plusone size='small' expr:href='data:post.canonicalUrl'></g:plusone>
</b:if>

Medium +1

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<g:plusone size='medium' expr:href='data:post.canonicalUrl'></g:plusone>
</b:if>

Standard +1 button for Blogger

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<g:plusone expr:href='data:post.canonicalUrl'></g:plusone>
</b:if>

Tall +1

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float: right;'>
<g:plusone size='tall' expr:href='data:post.canonicalUrl'></g:plusone>
</div>
</b:if>

Plus One button for Blogger with Inline Annotation

It's the button with inline annotation. In this example I have used the default width of 450px. You can resize it from the official page. Google prefers the minimum of 120px to display it correctly and minimum referred size is 250px.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<g:plusone annotation='inline' width='450' expr:href='data:post.canonicalUrl'></g:plusone>
</b:if>

Step 5: Save your template.

Must Read:

• +Snippet requires Schema.org microdata or Open Graph protocol to work properly. I would recommend Open Graph protocol for Blogger as this can be also used with Facebook Like Button.
• You can add multiple buttons at the top of your post or at the bottom.
• Conditional tags are used to show it in post pages along with every other page (except static pages). If you want to show it in post pages only then replace it with:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
+1 code goes here…
</b:if>

• If you want to show +1 to every page then remove the conditional tags completely.
• If you want space between the post body and +1 button, put them into divs:

<div style='display: block; margin: 1.5em 0;'>
+1 code goes here
</div>

• I have put the tall button within the divs with the property of “float: right” which will make it to float to the right of the post body. Changing it to “float: left” will make the button to float to the left.
• More reference: +1 button API on Google Code