Southern Listeners

Thanks to Greenlava for this cool gadget. Get yours here

Saturday, July 30, 2011

Adding Google +1 Share Button in Blogger Templates

The Google +1 button is like a bookmark that you can share with your online friends. It's like a 'tagging' feature that lets you share interesting stuffs with your buddies. Some compare this with Facebook's 'Like' button. Click here to learn more about this button.

You can add this button to your posts, so that your readers can easily +1 your posts (yes, '+1' is the latest verb in town). In designer templates, this button will automatically show up (if your template is not messed up). But in some templates, like Minima for example, you need to add some lines into your template to make the button appear. Some of your designer templates might be missing the button too, and the fix in the tutorial will take care of it.

I am aware of other ways on how you can add the +1 button. The fix in this post is an alternative for those who prefer to work with HTML rather than Javascript. I've not tested it on heavily modded custom templates. Feel free to try it and let me know how it goes. It works well in fixing your designer templates (templates that you can find in Template Designer) and Layout templates (basically Blogger 'approved' templates.).

Step 1:

I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout -Grrr.

If you have not enabled your share buttons, it's time to do so now.

In the default layoutGo to Dashboard - Design - Page Elements - Blog Posts - Edit - Check the third box from bottom (Share Buttons) - Save.

In the new layout: Go to Dashboard - Layout - Blog Posts - Edit - Check the fourth box from bottom - Save.

Step 2: 

In the default layout: Go to Dashboard - Design - Edit HTML - Check the box next to 'Expand Widget Templates'.

In the new layout: Go to Dashboard - Template - Edit Template - Expand Widget Templates.

Find for <b:include name='feedLinks'/> - Paste the following code directly below this line:
<b:if cond='data:top.showDummy'>
The code in place:

There you have it. An easy fix for your +1 button.


  1. nice tips.
    some of the old template was not available this button.
    thanks for this trick.

  2. @retnet: No problem. In fact the template that I use in this page now didn't have the button as well. And I couldnt afford on clicking the 'Revert Widget Templates to Default' link because I duwanna lose the HTML tweaks that I've done. Thus, the search, and the fix. Cheers.

  3. @Pudio: No problem at all. Cheers and God bless.

  4. Can I just use the Google + button here and not the other buttons? I tried other G+ Button but all failed.

  5. @Bernard: I'm not quite sure what other buttons are there. But this is the official one that comes with Designer template, so you shouldnt have any problems.

  6. Hi!

    I did it and the buttons don`t appear :( I don`t know what`s the problem. Thank you!

  7. my blog has twitter, f like and g+ buttons, how can i increase social activities?Please explain me editing Html.

    1. You need to attract more traffic to you blog. What would you like to know about editing HTML?


Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.