April 19, 2012

Adding a Google+ Badge to Blogger (Updating my Blogger Template)

Adding a Google+ badge to our Blogger templates enables readers to easily connect with our Google+ page. This can be achieved in just a few simple steps by adding a Google+ Badge gadget; it's also possible to customize the badge and change the display effect.

As part of updating my Blogger template, I added a badge to the sidebar which enables readers to directly connect to the official Blogger Buster page on Google+. I've documented my methods here for other Blogger users who may find this tutorial useful.



Find the ID number for your Google+ page

Before adding a Google+ Badge gadget, you will need to know the ID of the Google+ Page you would like to connect with. This can be either a personal or business page.

To find the ID for your page, open up your Google+ page in your browser and look for the 21 digit number in the address bar. Copy this number to your clipboard or paste into a text file for later use.

Take a look at this page on the Google Developers site to see a visual guide.

Add the official Google+ Badge gadget to your Blogger layout

The Blogger Team recently added a Google+ Gadget which we can add to our Blogger layouts in just a couple of clicks.

To add this gadget to your layout, click on the Layout link in the left hand side of your dashboard and choose to add a new gadget in the section where you would like it to appear.

Select the Google+ Badge gadget from the list of official gadgets (this currently appears near the very top of the list. You'll need to paste in your Google+ Page ID in the appropriate section of this pop-up window, like this:


Press "enter" to update the preview, and select whether you prefer a light or dark colour scheme. Finally, save your gadget to make your Google+ badge appear in your template layout.

But my Google+ badge doesn't appear!

If you are using an older or customized Blogger template, the javascript code required to render the Google+ badge (and other features) may not be present in your template.

We can fix this by adding a single line of code to our template HTML.

Go to Template>Edit HTML in your Blogger dashboard and search for the opening <head> tag using your browser's search function.

Immediately before this line, paste the following line of code:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
Now preview your changes. Once the preview has finished loading, you should see your Google+ badge appear in your layout as intended and can save the changes you have made.

Customize your Google+ Badge gadget

To alter the appearance of your Google+ Badge, you'll need to alter the dimensions of the badge within your blog's HTML code. These dimensions are what effect the appearance of the Google+ badge as we can see in these examples provided by Google's documentation:


Since we cannot (yet) change the dimensions of our Google+ badge through the gadget's settings, we must do this by editing our template code.

Go to Template>Edit HTML and be sure to check the "Expand Widget Templates" box. Then search for the following line of code (or similar):
  <g:plus expr:href='"https://plus.google.com/" + data:profileId' expr:theme='data:theme' height='69' rel='author' width='260'/>
The width specified in the above line may be different in your own template.

We may only specify one of two heights for our Google+ badge: 69 or 131. If any other height is specified, the badge will not work.

By default, the badge gadget specifies the height as 69. If you would prefer to display a taller badge to display the profile pictures of your followers (as I have for this site) you will need to change the height from 69 to 131.

If you would prefer to display the narrow, compact Google+ badge (the third example in the image above), change the height to 131 and the width to 100.

Now preview your template to see how these changes will appear. Once you are happy with the appearance of your badge, save your template and enjoy your customized badge.

Note: the customizations you make to your Google+ badge will not appear in the preview if you edit your gadget. Also, if you choose to remove the gadget and later wish to add another, you will need to make these changes again.

Did you find this tutorial helpful?

I hope you have found this documentation of my update process useful for adding and customizing your own Google+ badge. Please feel free to leave your comments below and don't forget to follow Blogger Buster on Google+!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy