Thursday, October 1, 2009

Add Social Bookmark Widget/Links to Blogger

Add Social Bookmark Widget/Links to Blogger

Tips to how to add the following links to each blog post:

Add Social Bookmark Widget/Links to Blogger


Social Bookmark Links are widely used by bloggers to help their readers share the useful contents to the world! Digg, Technorati, Delicious, Stumble Upon, Facebook etc are widely used onlinesocial bookmarking and sharing communities.

This post explains how to add Social Bookmark Links below post body(content) in Blogger(blogspot) blogs. It's very simple, just do the following steps:

Note:Please Note: Before Editing your Template, Save a copy of your current template by clicking 'Download Full Template' in 'Edit HTML' page of the Blogger 'Layout' Window and 'Preview' the changes before Saving

Steps:

1 Go to Blogger Dashboard - click Edit Layout - then click Edit HTML

2 Select Expand Widget Templates as shown in the image below:

3 Then Search(Ctrl+F) the code given below in your template:
<br /><data:post.body/></p>
4 paste the below code after above searched lines:


<!-- Start of social bookmarks -->
<b><i>Share this:</i>
|<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Digg</a> |
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Twitter</a> |
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' target='_blank'>Technorati</a> |
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Del.icio.us</a> |
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>StumbleUpon</a> |
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Facebook</a> |
</b>
<!-- End of social bookmarks -->

Adding a 'Share This' button

You might have noticed the 'Share This' button that appears below each of my posts. In today's tutorial we'll create this button for your blog. Why bother to use it? Well, with the 'Share this' button visitors will be able to share your content with their friends or community, and you know yourself what will happen. Loads of visitors will be coming to your blog!

Ok, without any further ado, open http://sharethis.com/publishers/ in your browser. Browse quickly through the page to see what it has got to offer you. If you have used this service before click on the 'Sign in' link at the top-right of the page, otherwise click 'Register' and create your new account.

After you've created your account, sign in, and enter http://sharethis.com/publishers/getbutton/. In this page you can customize your button to your need. First be sure that you've chosen the 'ShareThis Button for other websites' in the 'Pick your platform' section. I know, there is the Blogger option on the drop-down list, but we are using the raw script for better flexibility. After you are done tailoring the button, just click on 'Get ShareThis code' on the bottom of the page. You should now see the code for the button, copy it.

The next step is to add the button to each and every post on our blog. No, I don't want you to go edit all your post and paste the code on each one, that would be an idiotic waste of time. Instead, go to Dashboard > Layout > Edit HTML. Make sure you've ticked the 'Expand Widget Templates' checkbox. Use your browser's search function to find the code:


Paste the code you've copied earlier after the

tag.
It should look like this:


Save the template. That's all! If you have done it correctly you should now see the 'Share This' button at the end of every post.