Quick Fix - Google+ Not Showing on Social Sharing Buttons

28 September 2011
Good news: If you're on Blogger, you can easily show the Google+ button with one click. All you need to do is enable the Social Sharing buttons.

kitty with Google plus
photo credit: Geek Yard
Bad news: The technique works only for classic templates - the good but limited stuff including the ethereal, watermark, classic, and simple styles.

For those of you using different themes and modded templates (like Teecup Limited's theme from Dzignine), the Google+ button will not appear along with the rest of the social sharing buttons. 

You need to edit the HTML design to fix the problem. Below is a proven effective, step-by-step guide shared by Blogger Plugins. I suggest that you visit the site directly so you can view the illustrations, and copy and paste codes with ease.
 


Step 1: Enable the social sharing buttons if you have not done so yet. 

From the new Blogger dashboard:
  • Click "Layout."  
  • Look for "Blog Posts" and press "Edit."
  • Check the "Show Share Buttons"  and save the changes.
From the old Blogger dashboard:
  • Click "Design."  
  • Look for "Blog Posts" and press "Edit."
  • Check the "Show Share Buttons"  and save the changes.

Step 2: Edit the HTML design. 

From the new Blogger dashboard:
  • Click "Template." 
  • Select "Edit HTML"
  • Press "Expand Widget Templates."
From the old Blogger dashboard:
  • Click "Design."
  • Select "Edit HTML."
  • Press "Expand Widget Templates." 

Step 3: Add the following code:

<div class='post-share-buttons'>
     <b:include data='post' name='shareButtons'/>
</div>

AFTER any one of these lines: 
  • <p class='post-footer-line post-footer-line-3'>
  • <div class='post-footer-line post-footer-line-3'>
  • <data:post.body/>
Preview and save.


Step 4: Replace the Share Button code. 
  • Select the code from <b:includable id='shareButtons' var='post'> until </b:includable>
  • Replace the selected code with a new includable block.  
  • Preview and save.
 
Step 5: Insert a script. 
  • Look for </head>
  • ABOVE IT, paste the following code:
       <script src='https://apis.google.com/js/plusone.js'/>
  • Preview and save.

That's it! You may have to do all 5 steps for Google+ to appear along with the official social share buttons on Blogger. Note that the Google Buzz icon is gone. In its place should appear your Google plus button.*

Comments (5)

Loading... Logging you in...
  • Logged in as
The step by step guide to get short HTML can be good to get great themes from Google. I think bloggers will be able to find also this step by step guide to get acurate theme results. Good to find all this one at teecup.
My recent post Improve Leadership Skills
4 replies · active 691 weeks ago
Thanks, Tracy! The credit goes to Blogger Plug-ins really. :)

By the way, something weird has happened to my button. It's now found one line after the original set of icons. Strange...
Hi teecup. Maybe there's error occur that is why you found lines. Can I ask if how was the button right now?
Hi Tracy. It's no error at all but more of an aesthetic issue, no big deal really. The button still works great. :)
P.S.

Today, I decided to remove the button as I cannot find a way to fix the alignment. :)

Post a new comment

Comments by

Copyright © 2012 Teecup Limited. All rights reserved. Powered by Blogger.