64 Add "Digg it!", "Del.icio.us" and other social bookmark links to your posts
August 19, 2007 /

Although I am a faithful user of "AddThis" social bookmark buttons, I've been looking for a way to insert specific social bookmarking links so readers can easily submit individual posts to Digg, Del.icio.us, Technorati and other social bookmarking sites. Now, if you take a look at the bottom of each post, you'll notice these links in place. Here's how to add such links to your own blog posts:

The links you need to add to your template are called by the <a expr...> expression, and are unlike regular links in that they use javascript-style coding to work properly. Each link will look something like this:

<a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>DiggIt!</a>
Unlike regular links which you could feature in the body of your posts, you need to replace some HTML code (escape the code), which is why the & symbol is replaced by &amp; in these links. The section I have highlighted in red varies depending on the bookmarking link you wish to use; all of the remaining code remains the same for all social bookmark links.

To keep things simple, I'll show you how to add Digg, Del.icio.us and Technorati bookmarking links to your posts in this tutorial. If you would also like to use other social bookmarking sites, you'll find their links further down the page.

For Blogger Layouts (New Blogger)

Here's how to make those links appear in each of your blog posts:

  1. Before making any adjustments to your template, ensure you have made a backup of your original template by going to Template>Edit HTML in your Blogger dashboard and clicking on the "Download Full Template" link near the top of the screen. Then if you accidentally make a mistake, you know you can easily restore your template to it's original form!
  2. Now, check the "expand widget templates" box is ticked, then search for this section of code:
    <div class='post-footer'>
    If you want the social bookmark links to be in your post footer (above the author details, comment links, etc), you will place the link codes below this line. If you prefer them to feature right at the bottom of each post, scroll up slightly until you see the <p><data:post.body/></p> line, and place the code just below this instead.
  3. The code you need to insert is as follows:
    This will make the links look like this:
    DiggIt!   ♦Add to del.icio.us   ♦Add to Technorati Faves

    Be sure to copy and paste the code exactly as it appears: accidental spaces or line breaks will stop the code from working properly in your template!
  4. Preview your template to ensure it looks the way you want and then save it. Now you can test the links to ensure they work properly by viewing your blog posts and clicking on the links.

The following are links to all social bookmarking sites which I have tested and found to work in new Blogger layouts:

Del.icio.us <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Add to del.icio.us</a>
Digg <a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>DiggIt!</a>
Reddit <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Reddit</a>
Stumbleupon <a expr:href='"http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Stumble This</a>
Google Bookmarks <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'>Add to Google Bookmarks</a>
Yahoo My Web <a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Add to Yahoo MyWeb</a>
Technorati <a expr:href='"http://technorati.com/faves?add=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Add to Technorati Faves</a>
Slashdot <a expr:href='"http://slashdot.org/bookmark.pl?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Slashdot it</a>

You can further customize these links by adding seperators between them, as I did in the example above. I used &#9830; to create diamond shaped bullet points. You could use spaces, slashes or anything else you wish instead. A good reference for the html code needed for special characters can be found here.

For Classic Blogger Templates:

  1. While the process is very similar to that of Blogger Layouts templates, I have to say it's much easier to insert these links into Classic templates!. As before, make a backup of your template before making any adjustments (you can highlight all of your template in the editing window, then copy and paste to Notepad for this).
  2. Find this section in your blog template:
    <p><$BlogItemBody/$></p>
  3. Add the following code right beneath this line to feature Digg, Del.icio.us and Technorati social bookmark links in your blog posts:
    &#9830;<a href="http://digg.com/submit?phase=2&url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>">Digg it</a> &nbsp; &#9830;<a href="http://del.icio.us/post?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>">del.icio.us</a> &nbsp; &#9830;<a href="http://technorati.com/faves?add=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>">Add to Technorati Faves</a>
  4. This will again produce links which when clicked will enable readers to add your post URLs and titles to their favorite social bookmarking sites.

Here is the full list of different links I have tested for Classic Blogger templates:

Del.icio.us <a href="http://del.icio.us/post?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>">del.icio.us</a>
Digg it <a href="http://digg.com/submit?phase=2&url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>">Digg it</a>
Reddit <a href="http://reddit.com/submit?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>">reddit</a>
Yahoo My Web <a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?t=<$BlogItemTitle$>&u=<$BlogItemPermalinkURL$>">Yahoo MyWeb</a>
Google Bookmarks <a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>">Google</a>
Stumbleupon <a href="http://www.stumbleupon.com/submit?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>">StumbleUpon</a>
Technorati <a href="http://technorati.com/faves?add=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>">Add to Technorati Faves</a>

I hope this tutorial helps you to add these links to your Blogger posts! Please leave your comments and suggestions below.

Technorati Tags: | | | | | |

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

64 comments:

  1. Hi,

    I tried to copy your text in the box above into my template. But I get this error message

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity "title" must end with the ';' delimiter.

    ReplyDelete
  2. @ Editor: my apologies for this: the html file in the iframe was not correctly formed! I have uploaded a new file which will be displayed if you refresh this page. This should work fine when you copy and paste into your template.

    Do let me know if you still have troubles with this code!

    ReplyDelete
  3. Add social bookmarks to your blog site such as digg, del.icio.us and StumbleUpon with simple code:

    http://100-dollars.blogspot.com

    ReplyDelete
  4. Thanks! Put the code where you said and it worked great! Would have never figured it out on my own. I appreciate you posting this.

    ReplyDelete
  5. I've made some code to embed social bookmakings in your page. Direct link to the post in my AdSense Blog http://adsensical-adsense.blogspot.com/2007/12/blogger-blogspot-social-bookmarks.html

    ReplyDelete
  6. Excellent, just what I've been trying without success to figure out. Thanks very much for the post, easily editable too. Great work.

    Steve
    Rental Properties In France

    ReplyDelete
  7. How to add delicious,diggit to my blogspot ?
    This is my blog: http://ambatisreedhar.blogspot.com
    Tell me the steps in brief please.
    ambatisreedhar@gmail.com is my mail id.
    Thanks
    Sreedhar

    ReplyDelete
  8. hey this was great, it worked perfectly. but how can i turn those footers into icons instead of the "digg it" or "stumble it"?

    ReplyDelete
  9. Once this is done, how do I insert a line break between these links and the author etc?

    Cheers

    ReplyDelete
  10. Thanks. You're a star. And I've added a link 2u ;]

    ReplyDelete
  11. For Oli:

    The easiest method would be to add <br/> after your final link (or <br/><br/> if you'd prefer to make a space between these lines).

    Hope this helps!

    For Paul Canning: Thanks for the link! I'm glad this post was useful for you.

    ReplyDelete
  12. I was having problems getting technorati updates and because I'd just done this, thought the two might be related. so i took this off :{

    now trying to redo this and getting

    error bX-qarjrd

    tried various spots in code + variations

    but then - after maybe an hour of looking around - I remembered, this is because I use Firefox. Flicked on ietab and voila!

    now eating my computer resources and I'm using a slow clumsy browser ..... may be worth mentioning in your posts that Blogger/Google expects you to do things in IE ...

    ReplyDelete
  13. Thanks for this, the code worked perfectly!

    @paul canning: I know it's been a while since your post and have probably figured it out, but for anyone who doesn't know how to fix the "bX-qarjrd" error, clear out your cookies and cache in firefox and it will work all fine again. I spent a few minutes wondering if the code was messed up, but that isn't the case at all.

    So the reason it worked in ietab for you is that you had either no cookies for blogger in IE or just out of date cookies.

    ReplyDelete
  14. Hi, it works for me! Have been reviewing this in many other blogs, but yours is the clearest to follow! Thanks!!

    ReplyDelete
  15. I just tried to paste the code following your instructions and I received this error message : bX-btcv0r

    Your help will be greatly appreciated
    Thanks

    ReplyDelete
  16. How do I add stumble this, google bookmarks and my yahooweb to this? I've tried and the only thing that works is the original script!

    Thanks!

    ReplyDelete
  17. Thanks for the code, it helped me out big time!

    buckledover.blogspot.com

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. Great code, I've know more about expr:href..
    Thank you

    ReplyDelete
  20. thank you, worked fine for me :)

    ReplyDelete
  21. http://feedyouradhd.blogspot.com

    I had all kinds of problems until I, too, remembered I use Firefox. When I switched to IE and added your code, it worked perfectly. Many thanks, Amanda.

    ReplyDelete
  22. I added Blogger's "Reactions" widget to my posts. You have to revert to widgets to template default in order to add it. This wipes out your code. When I try to add it back, the digg, technorati, etc., buttons will not reappear, no matter what I do (and I did use expand widget templates), I can't get the buttons to reappear. It appears I can have EITHER the social networking buttons or Blogger's "Reactons." Do you know of a workaround?

    ReplyDelete
  23. Fucking great!!!!!
    finally I found it and ik works great..
    Thx..
    Dadexter

    http://mixdiggerz.blogspot.com/>

    ReplyDelete
  24. Thanks so much! I looked at 20 different google results for add digg button on blogger before you. Yours are by far the clearest, most easily followed directions I found. Thank you!

    ReplyDelete
  25. How about adding a "share on Facebook" link?

    ReplyDelete
  26. THANK YOU!!! I've been looking everywhere for an easy way to do this! You're the best!

    ReplyDelete
  27. Awesome! Thanks a lot. I used your scripts (with a few modifications) and added several scripts of my own. If you'd like, you can find them on my blog.

    ReplyDelete
  28. Thanks for this! It took me a few tries, but I did get it to work, and it even looks nice!

    ReplyDelete
  29. Thank you so much for this post. A year and a half later, and it is still being used. Well done.

    ReplyDelete
  30. hey a amanda thanks for this tut

    but can i add picture???imean i dont want to use text i want pics

    how can i???

    ReplyDelete
  31. thnaks for this one

    but can i add pics??

    i mean i dont like text only and want to add site logo can i do it???

    ReplyDelete
  32. I'm looking for some bookmarks like this Stumble It! (3 Reviews)... I saw it in your blog, but not info about

    ReplyDelete
  33. Thanks for this! Been looking for this for a long time.

    ReplyDelete
  34. Thanks for this post......... very nice post.....

    ReplyDelete
  35. Great thank you,you have made my life much easier!!

    ReplyDelete
  36. http://essam.zxq.net

    http://decoratgdeda.blogspot.com

    http://www.agd3as7ab.com/vb

    http://alagmysoft.blogspot.com

    ReplyDelete
  37. Thanks so much for this! I haven't been this moved by a blog for a long time! You’ve got it, whatever that means in blogging. Anyway, You are definitely someone that has something to say that people need to hear. Keep up the good work. Keep on inspiring the people!
    regards:
    trade4target

    ReplyDelete
  38. I like "ad this" too but like you I was looking for more! Thanks for the post!

    ReplyDelete
  39. Thanks for taking the time to discuss this, I feel strongly about information and love learning more on this. If possible, as you gain expertise, It is extremely helpful for me. would you mind updating your blog with more information

    ReplyDelete
  40. This comment has been removed by the author.

    ReplyDelete
  41. I am thoroughly convinced in this said post. I am currently searching for ways in which I could enhance my knowledge in this said topic you have posted here. It does help me a lot knowing that you have shared this information here freely. I love the way the people here interact and shared their opinions too. I would love to track your future posts pertaining to the said topic we are able to read.

    ReplyDelete
  42. fine tips that should be followed strictly. thanx a lot

    ReplyDelete
  43. Blogging keeps me insane. Keep up all the positive work. I too love to blog. I found this one to be very informative :)

    Whirlpool Bath

    ReplyDelete
  44. http://www.jemsite.com/forums/f33/25-1082107210761088-a-114592.html

    ReplyDelete
  45. Awesome Posting ! You are so inspirational and you talk sense. That’s important. You’re intelligent and you
    have a lot of heart. I love your posts! Thanks
    www.aadhaarcards.com

    ReplyDelete
  46. Blog is good. and better than blog comments

    ReplyDelete
  47. Thanks to share with us the information. I wish you good luck!

    ReplyDelete
  48. This is all very new to me and this article really opened my eyes.Thanks for sharing with us your wisdom.

    ReplyDelete
  49. YES! I finally found this web page! I’ve been looking just for this article for so long!!
    web development dubai
    dubai web design

    ReplyDelete
  50. Fabulous article writing. Your article delivers varied passion therefore I bookmarked this science system for future visit that i hope can get a current content from your post and every one content unit progressing to be pleasant to scan with some new things.
    web development dubai
    dubai web design

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy