Add Social Bookmark Links to your Posts in Blogger

Social bookmarking services are a useful way to aggregate your content across the web and bring more awareness to your blog. Services such as Digg, Stumbleupon and Del.icio.us allow readers to bookmark posts of interest and offer a means for others to discover them too. In this post, I’ll explain how you can add bookmarking links to three popular social bookmarking sites beneath each of your posts in Blogger.

One of the best ways to encourage visitors to bookmark your best posts with these services is to add links to these services beneath each of your posts, like this:

The text links themselves don’t take up too much space (especially if you choose to display these side-by-side), while the icons help draw attention to the links and visually communicate the service they link to.

In Blogger powered blogs, you can add some code to your template which will automatically add your post’s permalink and title; this encourages your readers to use such services as they are able to add your posts quickly and easily to their bookmarking service of choice.

Instructions to add Digg, Stumbleupon and Del.icio.us links beneath your Blogger posts

In your Blogger dashboard, go to Layout>Edit HTML and check the “Expand widget templates” box.

Then search for this line:

<p><data:post.body /></p>

Directly beneath this line, add one or more of the following sections of code:

Add your post to Digg:

<a style=”background: url(http://digg.com/img/badges/16×16-digg-guy.gif) left no-repeat; padding-left: 20px;” expr:href=’”http://digg.com/submit?phase=2&url=” + data:post.url + “&title=” + data:post.title’ target=’_blank’>DiggIt!</a>

Bookmark with Del.icio.us:

<a style=”background: url(http://images.del.icio.us/static/img/delicious.small.gif) left no-repeat; padding-left: 20px;” expr:href=’”http://del.icio.us/post?url=” + data:post.url + “&title=” + data:post.title’ target=’_blank’>Add to del.icio.us</a>

Stumble this page (Stumbleupon):

<a style=”background: url(http://www.stumbleupon.com/images/stumble.png) left no-repeat; padding-left: 20px;” expr:href=’”http://www.stumbleupon.com/refer.php?url=” + data:post.url + “&title=” + data:post.title’ target=’_blank’>Stumble This</a>

If you prefer to add these links side by side, simply add a space between each of these links. To have each link appear on a separate line, add a line break (<br/>) between each link.

Of course, there are dozens of social bookmarking sites you may like to add your Blogger posts to, but in my experience these three seem to be the most popular ones.

Useful Links

Here are some useful links you may want to read with regard to social bookmarking sites:

• 30 Social Bookmarks links for blogs
• Why you’ve got to dig Digg to get Dugg
• Social Bookmark Link Creator
• AddThis (an easy button/widget to encourage sharing of articles in blogs)