Google+ badges or widgets for google+ pages released, connect your site with Google+ pages!


Google+ badges or widgets are a great way to directly connect your site with your Google+ pages. These badges were only available before to a limited set of Google+ platform preview members.

After intense testing and feedback from google+ platform preview members, it’s now released for the public and available to everyone. Integration of Google+ badges on webpages for webmasters is really simple.

Basically there are 2 parts of code that are needed to be added to your web page (the following code was generated for Google+ news page. Generate code for your own pages as explained in the bottom of the post)

This has to be placed in the HEAD portion of your HTML page

<!-- Place this tag in the <head> of your document-->
<link href="https://plus.google.com/110885424279358855191" rel="publisher" /><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>

and the following in the BODY and where you want the badge/widget to appear

<!-- Place this tag where you want the badge to render-->
<g:plus href="https://plus.google.com/110885424279358855191" size="badge"></g:plus>

The following google+ code snippet

<g:plus href="https://plus.google.com/110885424279358855191" size="badge"></g:plus>

produces the following badge/widget (this is a image, please look at the RIGHT SIDE of this post for the real widget =======>

Google+ news page badge/widget!

Google+ news page badge/widget!

Here are the steps of how to get your Google+ badge/widget (for your own Google+ page)

  • Goto your Google+ page (for e.g. Google+ news page https://plus.google.com/110885424279358855191/posts)
  • Copy the page ID, the number portion of the url (in the above example 110885424279358855191)
  • Now goto Google+ badge configuration tool
  • Paste the above copied page ID into the textbox
  • Immediately after you paste the ID, you’ll find your badge generated below with a preview
  • You can customize the type of badge/widget by clicking on any of the following options
    • Standard badge
    • Small badge
    • Small icon
    • Medium icon
    • Large icon
  • Scroll to the bottom of the page and you’ll find the code generated for your Google+ badge/widget
  • Copy and paste it into your site or blog or any webpage (as explained above)
  • That’s it, you are done!

You’re badge/widget is ready and your visitors will be able to do the following

  • Clicking on the badge/widget will take them to your Google+ page
  • They’ll be able to +1 your Google+ page (right from your website)
  • It’ll show the count of +1’s your Google+ page has received
  • Shows list of recently +1’d Google+ users with thumbnail of their profile picture
At this point of time, the badget/widget lacks some of  basic customizations like width, border, color, etc.. These simple customizations are already requested by google+ platform preview members and are under development (so that you can expect sooner).

Add Google+ badge/widget to your blog, website or any web page and engage & connect your visitors/customers with your Google+ page(s).

7 Comments

Add yours
  1. Ari

    I have a question (not sure if I’m doing something wrong or this is the way the widget works):
    How many followers do you need to have in order to have the thumbnails of the followers appear in the widget? 
    I see in the picture from above the number ’21’; I have a bit more but the thumbnails still don’t appear (not even on the preview on the configuration tool), only the number and the +1 little button. I’ve tested with other IDs for other G+ pages and for them it worked. Any idea why this might happen?

+ Leave a Comment