How to add social bookmark links to your posts in Blogger

This is just a remake of original post by Amanda Fazani about how to add social bookmark links to your posts in Blogger. The original posts had it's template code put into a blockquote so it got processed by "prettyprint" and got all template code garbled. I posted a reply there and pasting a correct code here.

So, in order to add social bookmark links to your posts in Blogger you should:

1. Open your edit template code page (Customize->Layout->Edit HTML if you have a Navigation Bar on top of your blog, http://blogger.com/home->Layout->Edit HTML otherwise)
2. Click on "Expand Widget Templates" checkbox.
   
3. Search for the line starting with:
   <p><data:post.body
   (Just for this code, because it is likely that your custom template (like my Jeans one) doesn't have a space character before this and the the closing /></p> part)
   
   
4. put the appropriate code directly after the line (if you want every social service to be placed on the different line, place a <br/> tag in the end of each line):
   
   
   • For Digg:
     <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' style='background: url(http://digg.com/img/badges/16x16-digg-guy.gif) left no-repeat; padding-left: 20px;' target='_blank'>Digg It!</a>
     
   • For Del.icio.us:
     <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' style='background: url(http://images.del.icio.us/static/img/delicious.med.gif) left no-repeat; padding-left: 20px;' target='_blank'>Add to del.icio.us</a>
     
   • For StumbleUpon (please note, that it should be submit, not refer.php):
     <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' style='background: url(http://www.stumbleupon.com/images/stumble.png) left no-repeat; padding-left: 20px;' target='_blank'>Stumble This</a>
     
   
   
5. Preview and save the template.

Now you have links to social bookmarking sites in your blog so it will be easier for your readers to bookmark your posts (and actually, even visually stimulate them to do it).

An important lesson: always check the output once you embed raw html as a sample in your blogs, because only heaven knows who's gonna parse and autoformat your message and replace all 16x16 with 16×16 and " with ”, like it happened with Amanda's exceptional original entry.

0 said thank you for this page

Liked this article? Bookmark/share it with others: Digg It del.icio.us StumbleUpon Other Email this

Didn't like the article, found a mistake or just want to express your own opinion? Post a comment!