Add Google+ Profile Badge to Your Website

I hope now you are almost familiar with Google+ platform and it's features. It still growing and implement more new features in their social platform. Lately Google+ offered new features for users such as business pages, page badges and direct connect for pages. But Google+ were unable to offer social plugins for personal profiles and hence there was a high demand for 3rd party plugins among Google+ users. However at last, now Google+ offers a badge to represent personal profiles. So would you like to let other people to circle you without leaving your website?

Google+ offer you a badge that helps your visitors to add or circle you right from your website. The functionality is much similar to Facebook subscribe and Twitter follow buttons. But it doesn't show off any of your circle counts. However its appearance originated from Google+ page badges and you need more space to implement this badge. And now you don't need to specify a Google+ profile link for your readers to navigate and add you to their circles. They can just add you via this profile badge without leaving your site. Interesting? Let's see how to implement it on your website.

Before You Go:

If you looking forward to add Google+ profile badge, you should have a Google+ account for yourself. Create a new Google+ account if you are not a Google+ member.


Steps:

1. Look for the following tag within the template / source code,

</body>

2. Now add below Google+ script before the </body> tag.

<script type="text/javascript">
window.___gcfg = {lang: 'en'};
(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>

Notes:

* If you have already implemented Google +1 button on your website, you don't need to add this script again.

* If you are a Blogger user and don't know how to edit your template, read How to Edit Your Blogger Template.

3. Sign in and navigate to your Google+ profile.

4. Now grab your profile URL displayed on your web browser address bar and keep it to use in next step.

i.e: https://plus.google.com/110895337863776656534

5. Now implement your Google+ profile badge, either using Google+ Badge Tag or HTML5 valid Badge Tag. Add your preferred badge code snippet where you wanna render it.

Note: If you are a Blogger user and wanna add it as an element, you can add your button code snippet via HTML/JavaScript element. Read How to Add an External Widget or Codes to Blogger. Else if you wanna render it in a Blogger post or page, read How to Embed External Content on Your Blogger Posts or Pages.

Google+ Badge Tag

<g:plus href="[Google+ Profile URL]" width="300" height="69" theme="light"></g:plus>

HTML5 Valid Badge Tag

<div class="g-plus" data-href="[Google+ Profile URL]" data-width="300" data-height="69" data-theme="light"></div>

Color Indication Information:

   - Google+ Profile URL

Specify your Google+ profile URL here.

   - Width of Badge

Specify the width of the badge in pixels.

   - Color Theme

You can change color theme of badge here. Use value light for lighter color badge or dark for dark color badge.


Enjoy :-)