How to Enable Official Share Buttons in Blogspot/Blogger Templates

Blogger has officially announced sharing buttons. These buttons let your readers share posts on social networks like Twitter, Facebook & Google Plus. These sites bring traffic and are important for search engine rankings. The great thing is that the share buttons automatically shortens post URL/address because Twitter allows only 160 characters per tweet. In this post, I'll explain how you can enable official share buttons.

First, Enable the Share Buttons!

Enabling share buttons under Blogger posts is very easy. Just go to Layout. Edit the Blog Posts gadget and enable Show Share Buttons option. Click the following image to see full size:

What to Do If Share Buttons Do Not Appear?

If you're using an old template then there is a chance that share buttons won't show up even if you've enabled them. So follow these steps:

1. Open the Template section.

2. Click the Edit HTML button.

3. A new window will open. Click the Proceed button to start editing.

4. Check Expand Widget Templates option. The page will automatically refresh.
5. find this code:
   

       <data:post.body/>

   and REPLACE it with the following code:
   

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

6. That's it. Click Preview button and you will see share buttons right under the post body. After that, save your template.

Important: After saving the template. Make sure that the buttons are enabled in Blog Posts widget as described in the previous section of this tutorial.

How to Show Share Buttons Only on Post Pages?

By default, share buttons will appear on all pages. It might look a little messy and some people might want share buttons to appear only on post pages. To do that, you need to add a simple if-else condition. Instead of the above code, add this code after <data:post.body/>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons'>
   <b:include data='post' name='shareButtons'/>
</div>
</b:if>

If you've any problem, feel free to leave me a comment.

Update! Share Buttons are Grey

Many of you guys are complaining that the share buttons are appearing in Grey color. Well, don't worry about that because that's how they should appear. I don't know any method (yet) to make them colored. By default, they are Grey and will only become colorful when you'll bring mouse over them.