Computer TnT

Specially requested by Innovative Minds at Work, on how to add Social Bookmarking Link in post.

As many might already know, one of the best way of building Backlink for your site/blog is adding it to Social Bookmarking Websites. Other than requesting your reader to help Bookmarking it if they find it useful, it's also equally important to provide them an easy way of Bookmarking.

Basically there's 3 types of Social Bookmarking Link which blogger often use.

1. AddThis

Addthis is a free service which provides a simple widget code which you can place into your template.
When users click it, they will be brought to a page of the most popular social bookmarking or feed reader services.

Through that interface, they can submit your site or blog post to their online bookmarks or feed readers. It work best for people whom like simplicity in design where there's only one button at the end of each post.
It also provides a well statistics of the popular posts that are bookmarked.



Register for a free account with them. When you are logged in, click on 'My Account' and 'Get the code for your widget'.
You can either have a bookmarking widget or feed widget, choose a size of the button, and indicate your blogging platform.
Once you click on the 'Get your free button link', you will be shown a few codes that you can use.

2. Social Bookingmarking Text Links

Text links are neat and can easily fit into the Post footer.

But unlike Addthis, it's a more complicated process adding Social Bookmarking Text Links to your post.

Let us take a look of an example of Digg:

It's to an automatic link for every post, such that you do not have to key in the Post URL or Post Title.

I'm not too sure which of the Social Bookmarking Site you're interested, so lets list a few more popular one:

<!-- Start of social bookmarks. -->
<span style='font-size: 85%;' class='post-author'><br/>
Add Post To: |
<a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Digg</a>|
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank'>Technorati</a>|
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>del.icio.us</a>|
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Stumbleupon</a>|
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Reddit</a>|
<a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=" + data:post.url + "&amp;Title=" + data:post.title' target='_blank'>BlinkList</a>|
<a expr:href='"http://www.furl.net/storeIt.jsp?t=" + data:post.title + "&amp;u=" + data:post.url' target='_blank'>Furl</a>|
<a expr:href='"http://www.spurl.net/spurl.php?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Spurl</a>|
<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.title + "&amp;u=" + data:post.url' target='_blank'>Yahoo</a>|
<a expr:href='"http://www.simpy.com/simpy/LinkAdd.do?href=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Simpy</a>|
<br/></span>
<!-- End of social bookmarks -->

3. Social Bookmarking Icon

If you prefer images instead of text, you can have icons or buttons to represent the bookmarking sites.
The icon links will look like what we're having here in Computwer Tips and Tricks.

You can easily find these popular Social Bookmarking Icons by Google and uploading them to free picture hosting. Replace the Text in the above code with the icons, and you're ready to roll.

But for the benefit for my readers, here's what I use (With credits to TipsForNewBlogger):

<!-- Start of social bookmarks. --><br/>
<a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Digg' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/digg.gif'/></a>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank'><img alt='Technorati' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/technorati.gif'/></a>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='del.icio.us' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/delicious.gif'/></a>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Stumbleupon' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/stumbleupon.gif'/></a>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Reddit' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/reddit.gif'/></a>
<a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=" + data:post.url + "&amp;Title=" + data:post.title' target='_blank'><img alt='Blinklist' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/blink.gif'/></a>
<a expr:href='"http://www.furl.net/storeIt.jsp?t=" + data:post.title + "&amp;u=" + data:post.url' target='_blank'><img alt='Furl' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/furl.gif'/></a>
<a expr:href='"http://www.spurl.net/spurl.php?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Spurl' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/spurl.gif'/></a>
<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.title + "&amp;u=" + data:post.url' target='_blank'><img alt='Yahoo' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/yahoo.gif'/></a>
<a expr:href='"http://www.simpy.com/simpy/LinkAdd.do?href=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Simpy' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/simpy.gif'/></a><br/>
<!-- End of social bookmarks -->

Where to place the Bookmarking Code?

Here's the important question, other than placing these Social Bookmarking Links in sidebar, where else can we place it?

Simply follow these steps:

Go to 'Template' > 'Edit HTML' and check the box that says 'Expand Widget Templates'.

Here's the few location to place these code to it to work best (illustrated using default Blogger Template):

1. You can place them just below your Posts and before the 'Posted By' line. Scroll to these lines and place the relevant code at the red portion:

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
PLACE CODE HERE
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>

2. If you want it to be just above the labels:

Scroll to these lines and insert the relevant code at the red portion:

PLACE CODE HERE
<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>

3. Should you want the bookmark links to be at the bottom after the labels:

Scroll to these lines and place the code at the red portion:

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>
PLACE CODE HERE