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.*
Copyright © 2012 Teecup Limited. All rights reserved. Powered by Blogger.