Add Social Bookmarks to your Blogger Template
15 Sep, 2009. Written by Tom Roggero
This tutorial was inspired by the one done by Dan on Theme Forest about social bookmarks on WP. This is, in fact, the same thing but we are going to make it for Blogger, the Google blogging service.
It was really easy to get it after reading a bit on Blogger Docs (but hard to find that page). Obviously this is NOT a begginer-ready tutorial.
How to start?
First
of all, we need a blog.
Second
, after login, go to your blog administration panel, and look up for Edit HTML under Layout tab.

Third
, Make sure "Expand widget templates" is checked.

Fourth
, press CTRL+F to search (Cmd+F on Mac) the next piece of code:
<b:includable id='post' var='post'>
After that code, the templating of each of your posts will start. Go down until it is closed. You must know where to write the sharing thing.
In my case, is between
<div class='post-footer-line post-footer-line-1'>
and
<span class='post-icons'>
, but that might depend of your Blogger template.
Fifth, I will use the same icons: social.me
So next is the magic information.
Fifth: Equivalents Functions
(WordPress to Blogger)
WordPress
<?php the_title(); ?>
In Blogger is
<data:post.title/>
for unique use (outside of an attribute of a tag like href for anchor), or
<tag expr:attribute='"normal attribute settings" + data:post.title'>tagtext</tag>
in case of inside.
WordPress
<?php the_permalink(); ?>
In Blogger is
<data:post.url/>
or
<a expr:href='data:post.url'>Permanent link</a>
So, those ones, are the only structures we will care about for this. Of course, those must be used before de Blogger Loop, like you use the WP equivalents inside the WP Loop.
<a expr:href='"http://twitter.com/home/?status=" + data:post.title + ": " + data:post.url' title='Twitter!'> <img src="http://yourdomain.com/blog-images/twitter.png" alt="Send to Twitter!" /> </a> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' title='StumbleUpon'> <img src="http://yourdomain.com/blog-images/stumbleupon.png" alt="StumbleUpon" /> </a> <a expr:href='"http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' title='Vote on Reddit'> <img src="http://yourdomain.com/blog-images/reddit.png" alt="Reddit" /> </a> <a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' title='Digg!'> <img src="http://yourdomain.com/blog-images/digg.png" alt="Digg!" /> </a> <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' title='Note on Delicious'> <img src="http://yourdomain.com/blog-images/delicious.png" alt="Delicious" /> </a> <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' title='Share on Facebook.'> <img src="http://yourdomain.com/blog-images/facebook.png" alt="Facebook" id="sharethis-last" /> </a>
That is the piece of code I'm using on my Spanish blog (check out to see demo), and I think it is working pretty good.
Anything you doubt, just comment above. I'll reply ASAP.