Official Sharing Buttons on Blogger

Official Sharing Buttons on Blogger

Blogger has been rolling out new features to improve the looks and usability of the blogs. Blogger is now testing out a new Social Sharing icon set consisting of Email, Blogger,Twitter(with goo.gl shortener),Facebook and Google buzz buttons. The set looks simple and elegant with some cool mouse over effects. These Sharing buttons are now available in your regular dashboard.If you need to take a peek at these new sharing icons, then take a look at my post page(and try sharing it :P ).

You are still reading. So  i guess that you are really interested in implementing these Sharing buttons on your Blogger Blog.

Then don’t wait. Just follow these simple steps

1. Login to Your Blogger Dashboard
2. Go to Design > Page Elements and Click on the Edit Button near the Blog Posts Gadget and check the “Show Share Buttons” Option
3. You can Drag and Drop the Share buttons and place it where you want.
4. Now if everything went right, then you should be able to see the Share buttons on your Blog. If not then read on. :)
5. If it didn’t appear then don’t worry, That is because you are having a modded template. Just Go to the Edit HTML page under the Design Tab , Check the “Expand Widget Templates”  Option and locate

   <p class='post-footer-line post-footer-line-3'>

   Or if that is not there then find

   <div class='post-footer-line post-footer-line-3'>

   Or if that is not there then find

   <data:post.body/>

   and place the  following code  just below any of these lines[whichever is present in your template].

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

   and Save your template.

Optional Tweaks

1. Show the Sharing Buttons on Post pages only - Find the Following Code in your template

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

   and wrap it within conditional tags as

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

2. Hide Some of the Sharing Buttons – If you want you can hide some of these buttons using CSS. For example to hide the Blogger sharing button, add the following code above  ]]></b:skin>  in your template

   .sb-blog{display:none}

   sb-email , sb-twitter, sb-facebook, sb-buzz and sb-blog are the different Button Classes. If you hide the mail or  buzz buttons, then it might look a little bad as these have rounded edges,
3. How to add the text “Share this:” before the Share Buttons? – This was one of the questions asked in the comments.So here is how to do it.Go to Design > Edit HTML and “Expand Widget Templates”.Look for 

   <b:if cond='data:post.sharePostUrl'>

   Just below that add
   

   <table border='0'><tr><td><b>Share this : </b></td><td>

   Now Look for the first occurrence of  

   </b:if>

   that comes after that. Just above that add

   </td></tr></table>

Got into Trouble with implementing the sharing buttons? Ok leave a comment here and i will try to help you out. :)