62 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: digg | del.icio.us | technorati | links | posts | template | social+bookmarks