Add Google+ Page Badge to Your Website

Recently we have had a article about how to enable Google+ Direct Connect for your pages by linking your Google+ page to your site. 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+ page 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 website. But did you implement official Google+ badge on your blog or website?

Google+ page badge links your site 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:

Make sure you have a Google+ page in order to add a page badge to your website. If you don't have a Google+ brand page yet, read How to Create a Google+ Page.

Steps:

1. Find </body> tag in your template and add this script just before </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.

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

2. Now you have to grab your Google+ Page URL to be used when implementing Google+ badge.

How to Find Your Google+ Page ID

i. Sign in to your Google+ profile.

ii. Navigate to Google+ Page Management page.

iii. Click on page title.

iv. Now get to your browse address bar and copy Google+ page ID as highlighted in this below page URL - i.e: https://plus.google.com/111117610607219889806/posts

3. 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: If you gonna select 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. Read Google +1 Button for Your Website and add Google +1 button script to your site. However if you have already using or implemented Google +1 button on your site, you don't need to do this.

Standard Badge

Google+ Badge Tag

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

HTML5 valid Badge Tag

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

Small Badge

Google+ Badge Tag

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

HTML5 Valid Badge Tag

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

Color Indication Information

   - Google+ Page URL

Specify your Google+ page 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.


4. After selecting your preferred button, add corresponding code to your site where you wanna show off for your visitors.

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.

Enjoy :-)