Official buttons for sharing on Blogger

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.

Customization

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 */

Conclusion

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.