Google +1 Button for Blogger Blog : How to add

Google +1 Button has got very much importance now as Google has included it to Google Webmaster Tools. Here is how You can add Google +1 button (Plus one) to your Blogger blog very easily.

Probably you know, Google is experimenting with Google+, it started with Google Plus One button (Google +1 is the official way to write).

For WordPress own hosted blogs, we can add the codes for Google +1 Button very easily plus John’s Socialize Plugin is an excellent way to add Google +1 Button just after our posts.

Here is the way, you can add Google +1 Button to Blogger Blog too.

The Required Code for Google +1 Button

You’ll get the required code from Google official +1 Button portal. Choose the template as you like for your Google +1 button; select the Standard (24px) Google +1 option or Medium (20px) from box like the screenshot:

If you expand the Advanced option in the Google +1 Button creation page, you’ll get the way to add your own URL for Goggle +1 (this is important). For Blogger, you have to add your full URL of your Blog in this Google +1 Button code generation page. We will go to further details on advanced usage of Google +1 Button in blogger later.

Adding the Google +1 code to blogger blog

You’ll see two snippets for the Google +1 Button : one should be added to the header; which is:

<script type=”text/javascript” src=”https://apis.google (dot) com/js/plusone.js”></script>

The HTML declaration in the first Google +1 Button snippet:

<!– Place this tag in your head or just before your close body tag –>

Is actually not needed for Google +1 button function. Now, add this first Google +1 button snippet before your </head> thing. Got it? You have to go to design , then HTML mode like the screenshot to add this first part to get the Google +1 snippet :

Save it.

Two ways to use the Google +1 Button : the first way

If you want to add the Google +1 Button beside your other social buttons in Blogger blog like the screenshot:

Like we have added the Google +1 Button in our test Blogger blog here; then find the code looking like </Group> before the Group named post  :

And paste the second part of the Google +1 Button snippet which actually looks like:

<g:plusone size=”your specified Google +1 Button size” href=”https://thecustomizewindows.com/”></g:plusone>

Which actually give a Google +1 Button for your home page, not the post. So, just like our WordPress PHP hook, we’ll use a hack for this Google +1 Button so that, Google +1 Button will be unique for each post. So, here is the code you have to paste to get the Google +1 button like our test blog:

<div>
<g:plusone size=”standard” expr:href=”data:post.url”/>
</div>

Save it.

This ends the story of adding Google +1 to Blogger Blog. We also have a Google +1 Button below for your click!