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 :
Advertisement ---
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!
