Add Google+ Badge to Your Blogger Blog

 Google proclaimed you need to link your site to your Google+ page to eligible for Google+ Direct Connect which simply means searching your business or brand page via Google search. Google offered you two alternatives in linking pages, either manually or adding a badge to your site. However you have learnt how to link your site manually...

And now Google has been introduced you a self-called Google+ badge to increase user engagement and to grow more audience on Google+ platform. You might have Facebook Like Box, Twitter Follow button already on your blog. In addition as an alternative, still you may using 3rd party Google+ widget on your blog. But did you implement official Google+ badge on your blog?


 

Google+ badge links your blog to your Google+ page and it has similar functionality which Facebook Like Box does. Now your fans or friends can directly add your page into their circle while they were on your site. Also the standard badge let them see who +1d your page too. However adding Google+ badge will makes your site eligible for Google+ Direct Connect. But even if you add a badge to your site, still you have to go through manual procedure to connect your site to Google+ page. So here I would be more focused in adding Google+ badge more efficiently and I will direct you to link your site manually.

Before You Go:

You need to link your site to your Google+ page. Read How to Enable Google+ Direct Connect for Your Pages and link your blog with your Google+ page manually.

Steps:

1. First off you have to grab your Google+ Page URL.

How to Find Your Google+ Page URL

i. Sign in to your Google+ profile.

ii. Switch to your page by clicking on little triangle displayed beneath your name at top left of sidebar.

iii. Now click Get started from left pane. There you can find your page URL under Tell the world heading and make a note of it.

2. Take a look at below badges and select one suites for you with its corresponding tag. Either you can use Google+ Badge Tag or HTML5 valid Badge Tag.

Note: Currently you can't customize dimensions of Google+ badges and they are with fixed width of 300 pixels.

Standard Badge

 

Google+ Badge Tag

<g:plus href="[Google+ Page URL]" size="badge"></g:plus>


HTML5 valid Badge Tag

<div class="g-plus" data-href="[Google+ Page URL]" data-size="badge"></div>

Note: If you have selected this Standard badge (either Google+ Badge tag or HTML5 valid Badge Tag), you have to add Google +1 button script to your page to render Google +1 button on the badge. Below you can find how to add Google +1 code snippet to your blog. However if you have already using or implemented Google +1 button on your blog, you don't need to do this.

How to Add Google +1 Button Script

i. Go to Blogger Dashboard.

ii. Click on your blog title.

iii. Navigate to Template tab.

Note: Before editing your template, you may want to save a copy of it.Read 

iv. Click Edit HTML button beneath your blog preview.

v. Click Proceed button to view Template Editor.

vi. Now search for </head> in your template.

vii. Add below script just before the </head> tag.

<script type="text/javascript">
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();
</script>

viii. Save your template.


Small Badge

Google+ Badge Tag

<g:plus href="[Google+ Page URL]" size="smallbadge"></g:plus>


HTML5 Valid Badge Tag

<div class="g-plus" data-href="[Google+ Page URL]" data-size="smallbadge"></div>


Color Indication Information

   - Google+ Page URL

Specify your Google+ page URL here.


3. Now go to your Blogger Dashboard.

4. Click on your Blog Title.

5. Navigate to Layout tab.

6. Click on a Add a Gadget link.

7. Find and add HTML/JavaScript gadget for the gadget list.

8. Give it a title if you wish to and add one of below badge snippet in Content text area.

9. Now Save element.

10. Arrange your element as you wish and Save arrangement after you done with it.

Enjoy :-)

If you face any problem in this post please let me know your problem. To inform your problem you can leave a comment below. And if you like my post please click the Facebook like button or spread this post by clicking the Twitter, Facebook etc. icons below. Because, it will be a great support for me.