Social Bookmarking your Blogs

I had long wanted to add those tiny icons to my blog posts. Finally found some time today. Googled it and realized it was quite simple. Making very little template code changes would be enough.

1. You need to host the icon images somewhere, I used Google sites.
2. Go to your blogger dashboard. Click on Layout of the blog you wish to modify
3. Click on Edit HTML
4. Check the Expand Widget Template
5. Search for the text “post-footer-line-3”
6. It was a ‘div’ tag in my template. I think it should be the same in most templates
7. Inside this is where you add your code for the links (Which I have explained further below).
8. Save the template

Code to add the links:
It is a simple anchor tag, making an icon/image or some text or both link to the submit url of the respective social site.

Try adding it one by one. Just remember these things:
1. Set the target value to _blank so that the user does not actually navigate away from your blog but instead opens these sites in a new window
2. The post.url and the post.title variables will get you the current page details, which you would be submitting to the respective social site
3. You might encounter some xml parse errors – usually with the actual ampersand symbol – replace it with the text &

Examples from what I have done:

<!--Google Bookmark-->
<a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'> <img alt='Google Bookmark' src='http://YOUR HOSTED URL/googleicon.gif'/></a>

<!--Stumble Upon-->
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Stumble Upon' src='http://YOUR HOSTED URL/stumbleicon.png'/></a>

<!--Del.icio.us-->
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'> <img alt='Del.icio.us' src='http://YOUR HOSTED URL/deliciousicon.png'/></a>

<!--Digg-->
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'> <img alt='Digg' src='http://YOUR HOSTED URL/diggicon.png'/></a>

<!--Technorati-->
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'> <img alt='Technorati' src='http://YOUR HOSTED URL/technoratiicon.png'/></a>

<!--Reddit-->
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'> <img alt='Reddit' src='http://YOUR HOSTED URL/redditicon.png'/></a>

<!--Twitter-->
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'> <img alt='Twit This' src='http://YOUR HOSTED URL/twittericon.png'/></a>

<!--Yahoo Bookmark-->
<a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'> <img alt='Yahoo Bookmark' src='http://YOUR HOSTED URL/yahooicon.png'/></a>