Tutorials, tips and tricks about Blogger

07 Dec

Official buttons for sharing on Blogger

4 Comments | by in Features, News | 2010

Español Português

Blogger has added a new feature, a few weeks ago, to its platform: buttons to share the content of a post through social services such as Facebook, Twitter, Blogger, Google Buzz or traditional email.

How to add them?

You need first to activate them:

Dashboard → Design → Blog Posts → Edit


If, with this, the buttons don’t appear on your blog after doing this, surely you’ve got a custom template, so you have to add the code manually to add the feature. In the code on your template (Dashboard → Desing → Edit HTML → Expand Widget Templates) search for something like this:

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

Note: you can also search for post-footer-line-2 or post-footer-line-1.

After the code, add this:

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

Make sure all tags have been closed properly or errors will appear.


From the classes by default given by Blogger, you can add styles to the icons and customize their location, size or any other propierty using CSS. The classes given by Blogger are:

.post-share-buttons {} /* Buttons container */
.share-button {} /* This applies classes to all buttons */
.sb-email {} /* Share via Email */
.sb-blog {} /* Share on another blog on Blogger */
.sb-twitter {} /* Share on Twitter */
.sb-facebook {} /* Share on Facebook */
.sb-buzz {} /* Share on Google Buzz */


As always, Blogger brings features very late, when its users have been using them without its help. I think you get a complete option here as it allows you for share your information using the most used services like Facebook, Twitter and email. The email is maybe the main feature, as it adds a new page with a form easy to fill and make use of your Gmail contacts.


4 Comments, leave a reply · Feed
  1. when i add the following code:


    they are appearing as links bellow each others, can you help?

  2. when i add the following code:


    bellow: “”

    they are appearing as links bellow each others, can you help?

  3. Hi BTemplates.com,

    First of all I wanna thank you for what u do 🙂 I always pick my tempates from te ones you propose!

    I have a question concerning the Blogger default sharing tools: I wanna get rid of them because I want to choose mine. So, I’ve searched for the solution in the html template, followed the instructions found on the web but they r still there, cant remove them 🙁

    thank you!

    can u please help? My template is “Simples 2.0”

  4. I have followed the above instructions and my share buttons are still not showing up. I used the Coffee Desk template. Can you please help me?


You must be logged in to post a comment.

Tutorials, tips and tricks about Blogger