How to Add +1 Button to Blogger Blog Post - Javascript Approach Example

In this blog post, we will explain how to add +1 sharing button to your blogger blog post. This new feature was introduced by Google and it promises a very good approach towards content sharing on the internet. Through the +1 social sharing button, a user will be able to recommend a post and their google contacts will automatically come to know about this when they are logged in during their related search. Much about this new button is already available on the internet. We will focus only on adding this button through Javascript to your blogger blog post.

To add the +1 sharing button, follow the step by step instructions below;

1) Login to your blogger account and click on Design against the blog to which you want to add the +1 button. Follow the instructions provided in the screenshot below on how to do this;

Adding +1 Button through Code - Example

2) Once you are done with step one, you have to click on "Edit HTML" and then tick the "Expand Widget Templates" checkbox. Refer to the screenshot below, that provides some navigational assistance on this regard.

Edit Blogger HTML to Add +1 Button

3) Now, you have to add some code to enable +1 button. To do this, press ^F (Control + F) and find the following tag in the template listed below;

</head>

4) Once you find the closing HEAD tags, replace that with the following code;

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

A screenshot of how your code should look like after adding the +1 button code is provided below;

+1 Button Code Added Inside HEAD Section

5) Once this is done, we have placed the necessary Javascript code to invoke the script which will automatically populate the +1 button on the page. Now, to place the actual button, you will have to find the place inside your blog post and include the following tags. These tags will automatically render the button on the page for you. The tags to be placed are provided below;

<g:plusone></g:plusone>

6)An example for adding the +1 button code just below the title post of your blog is provided below;

How to Add +1 Button Below Title Post

You can find a live Demo of +1 Button widget added to the blog at the this below, right below the post title. Go Ahead and +1 it, if you like it!