August 19, 2007

Add "Digg it!", "Del.icio.us" and other social bookmark links to your posts

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:

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:

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!

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.

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:

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).

Find this section in your blog template:

<p>&lt$BlogItemBody/$></p>

Add the following code right beneath this line to feature Digg, Del.icio.us and Technorati social bookmark links in your blog posts:

Find us on Facebook

Follow by Email

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: