How to add Google + Page badge to your blog

Now that you’ve created a Google + page for your blog, grow your audience by adding a badge onto the blog. The badge lets users add your Google+ page to their circles without leaving your blog, similar to Facebook’s Like Box, but better. Google+ badge will not only promote your blog on Google+ (social network), but will help it rank in Google search results as well.

Below are some more reasons why you would want to put up Google+ badge on your blog:

• It gives users more personal recommendations around the web, by connecting +1’s for your blog with +1’s on your Google+ page.
• It may qualify your page for Google+ Direct Connect, which helps users find your Google+ page and lets them add it to their circles directly from within Google Search.
• If you’re on Google Friend Connect, now is a good time to start bringing your GFC followers to your Google+ page because Google are retiring GFC (for all non-Blogger sites) on March 1, 2012.

 

I) Adding Google+ badge

• Adding to Blogger
  1. Go to Layout (old interface: Design > Page Elements).
  2. Click Add A Gadget and select HTML/Javascript gadget.
  3. Copy the code below and paste it inside the content box.
     

     <!-- Google +1 script -->
     <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>
     <!-- Link blog to Google+ page -->
     <a style='display: block; height: 0;' href="PUT YOUR G+ PAGE URL HERE" rel="publisher">&nbsp;</a>
     <!-- Google +1 Page badge -->
     <g:plus href="PUT YOUR G+ PAGE URL HERE" height="131" width="300" theme="light"></g:plus>
     

  • Omit the Google +1 script (line 1 to 8) if you already have a Google+1 button on your your blog.
  • Replace PUT YOUR G+ PAGE URL HERE with the URL of your Google+ page.
    To get the page URL: Login to Google+ > Switch to your page via the dropdown menu on top left corner of your screen right under your profile name > Get the URL from your browser’s address bar.
• Adding to WordPress
  1. Go to Dashboard > Appearance > Widgets > Available Widgets.
  2. Drag Text widget into a sidebar.
  3. Paste in the code.
  4. Save.

II) Configuring badge (updated Feb 2012)

Currently you can only customize the size of the badge,  by setting the size attribute on the g:plus tag in line 12.

You can customize the badge by changing the values of attributes in the g:plus tag in line 12. Please refer to the table below for details.

• To opt for small badge (i.e. standard badge minus the Google +1 button, thumbnails and circle count), change the height.
• To set the background to black instead of white, change the theme.
• To change the width of the badge, change the width.
  -The maximum value for the width is 1024(px).
  -The minimum is 160(px) for standard badge and 100(px) for small badge.

Size	Badge	Attribute	Value
Standard badge	Note: For standard badge, the number of items being displayed on the badge depends on its width. Narrower widths will display less items.	height	131
Small badge		height	69
Dark theme		theme	dark
Badge width	(pictured: width="200")	width	put width value here

Note: If your Google + page name is short enough, the “We’re on” phrase in front of the red G+ button will be replaced by  “[PageName] on”.

Enjoy!