Social bookmarking for your blogspot/blogger blog

Blogger/Blogspot allows its users to edit the complete layout of the blog page through its 'edit template' feature. This gives the blogger full control over the layout of their pages and gives the kind of flexibility that you can get from any custom systems. The default blogger templates do not give links for social bookmarking from the blog pages. In this article we explain how to add social bookmarking links and buttons in your blogspot/blogger blog.

As with any systems that are flexible the template system is reasonably complicated. To be more precise it is complicated for the uninitiated. But don't worry we will explain in detail how to add the social bookmarking links to your blog.

Log in to your Blogger Account and go to your Blogger Dashboard. Then click on the Manage: Layout link. This will take you to the template management page. Click on the edit HTML Link. This will open the your template for editing. Before you start editing, download a copy of your template by clicking on the 'Download full template' link in the page. Once that is done, click on the Expand Widget Templates checkbox on top of the edit text box. This will expand all the widget sections in the template. Now you are ready for editing.

Search for <b:include data='post' name='postQuickEdit'/> in the text area. Just below this there is a closing </span> tag. Add the following lines of code after this tage and before the next closing </p> tag;

      <!-- Add to favorites section -->
      <br/>  
      <span class='post-icons'>
Bookmark: <a expr:href='"http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Add To Google Bookmarks'><img alt='Add To Google Bookmarks' border='0' class='icon-action' src='http://www.zyxware.com/images/icons/google.gif'/></a><a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&amp;t=" + data:post.title' target='_blank' title='Add To Yahoo MyWeb'><img alt='Add To Yahoo MyWeb' border='0' class='icon-action' src='http://www.zyxware.com/images/icons/yahoo.gif'/></a><a expr:href='"https://favorites.live.com/quickadd.aspx?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Add To Windows Live'><img alt='Add To Windows Live' border='0' class='icon-action' src='http://www.zyxware.com/images/icons/live.gif'/></a><a expr:href='"http://slashdot.org/bookmark.pl?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Add To Slashdot'><img alt='Add To Slashdot' border='0' class='icon-action' src='http://www.zyxware.com/images/icons/slashdot.gif'/></a><a expr:href='"http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Stumble This'><img alt='Stumble This' border='0' class='icon-action' src='http://www.zyxware.com/images/icons/stumble.gif'/></a><a expr:href='"http://www.technorati.com/faves?add=" + data:post.url' target='_blank' title='Fav This With Technorati'><img alt='Fav This With Technorati' border='0' class='icon-action' src='http://www.zyxware.com/images/icons/technorati.gif'/></a><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Add To Del.icio.us'><img alt='Add To Del.icio.us' border='0' class='icon-action' src='http://www.zyxware.com/images/icons/delicious.gif'/></a><a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Digg This'><img alt='Digg This' border='0' class='icon-action' src='http://www.zyxware.com/images/icons/digg.gif'/></a><a expr:href='"http://www.bloglines.com/sub/" + data:post.url' target='_blank' title='Add To Bloglines'><img alt='Add To Bloglines' border='0' class='icon-action' src='http://www.zyxware.com/images/icons/bloglines.gif'/></a><a expr:href='"http://mystuff.ask.com/mysearch/QuickWebSave?v=1.2&amp;t=webpages&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Add To Ask'><img alt='Add To Ask' border='0' class='icon-action' src='http://www.zyxware.com/images/icons/ask.gif'/></a><a expr:href='"http://furl.net/storeIt.jsp?u=" + data:post.url + "&amp;t=" + data:post.title' target='_blank' title='Add To Furl'><img alt='Add To Furl' border='0' class='icon-action' src='http://www.zyxware.com/images/icons/furl.gif'/></a><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Add To Reddit'><img alt='Add To Reddit' border='0' class='icon-action' src='http://www.zyxware.com/images/icons/reddit.gif'/></a><a expr:href='"http://www.newsvine.com/_wine/save?u=" + data:post.url + "&amp;h=" + data:post.title' target='_blank' title='Add To Newsvine'><img alt='Add To Newsvine' border='0' class='icon-action' src='http://www.zyxware.com/images/icons/newsvine.gif'/></a></span>

This will add bookmarking links for Google Reader, Yahoo Bookmarks, Live Bookmarks, Slashdot, Stumbleupon, Technorati, Delicious, Digg, Bloglines, Ask, Furl, Reddit and Newsvine. You can also decide to select a few of the above and remove the others in which case you have to delete the corresponding anchor and image tags from the above code. Please note that there are no spaces between the icons and hence the code is a very long line.

Once this is done you can save your template and this process will check for any xml formatting errors you could possibly have created. Blogger template should be valid xml and if you have made any mistakes it will let you know. If you did make any mistake it would be easier to restore your saved backup and then redo the editing. Once you have successfully saved the template your blog will have social bookmarking links below every post. You can check out this blog to see how this would look on your blog.

If you have any questions do post us a comment and we can try to help you out with your issue.