Wednesday, May 13, 2009

How to Add Social Bookmarking Widget Buttons to your blogger template

Guys i was busy today in making some changes to my blogger template in order to make it even more Web 2.0 :). As part of those changes here are the changes which i made to my blogger which I'm sharing as posts that might be of some help to my fellow blogger's.

1) Added Social Bookmarking Buttons to my blogger template
2) Added a Tweetthis button
3) Replaced the Addthis Social Bookmarking button with a sharethis button code
4) How to Display the code as HTML in scroll box in blogger

I'm going to share each of my experiences on how i have made all those above changes as separate posts.

1) Adding Social Bookmarking Buttons below the posts

Adding Social Bookmarking buttons below the blogger posts is a very simple process. Just follow these simple steps

Login into your blogger account and Navigate to the "Layout" section. Under that choose the "Edit HTML Page" option and check the Expand widgets option
Now look for this code

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

Imp Note: Dont forget to check the Expand widgets option or else you will not find the above code

Now copy and paste the below code immediately below that

<!-- Start of social bookmarks. Check http://searchcorner.blogspot.com/ for SEO and Online Marketing updates -->
<span class='post-author' style='font-size: 95%;'><br/>
Add Post To: |<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Digg</a>|
<a expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Twitthis</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 + "&title=" + data:post.title' target='_blank'>del.icio.us</a>|
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Stumbleupon</a>|
<a expr:href='"http://sphinn.com/evb/button.php=" + data:post.url + "&title=" + data:post.title' target='_blank'>Sphinn</a>|
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Reddit</a>|
<a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=" + data:post.url + "&Title=" + data:post.title' target='_blank'>BlinkList</a>|
<a expr:href='"http://www.furl.net/storeIt.jsp?t=" + data:post.title + "&u=" + data:post.url' target='_blank'>Furl</a>|
<a expr:href='"http://www.spurl.net/spurl.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Spurl</a>|
<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.title + "&u=" + data:post.url' target='_blank'>Yahoo</a>|
<a expr:href='"http://www.simpy.com/simpy/LinkAdd.do?href=" + data:post.url + "&title=" + data:post.title' target='_blank'>Simpy</a>|
<br/></span><!-- End of social bookmarks -->


Thats it. You are Done !. Now you can start seeing the Social Bookmarking Buttons appearing below every post in your bloggers post
Caution: Don't forget to take the backup of your blogger template before making any changes to it. Sometimes changes all changes doesn't work fine for every blogger template.

Also If you are interested in using the images as buttons then you can use this code

<!-- Start of social bookmarks. Check http://searchcorner.blogspot.com/ for SEO and Online Marketing updates -->
<span class='post-author' style='font-size: 95%;'><br/>
Add Post To: |
<a expr:href='"http://digg.com/submit?phase=2&url=" data:post.url "&title=" data:post.title' rel='external nofollow' target='_blank'><img alt='Digg' border='0' src=' '/></a>
<a expr:href='"http://www.stumbleupon.com/submit?url=" data:post.url "&title=" data:post.title' rel='external nofollow' target='_blank'><img alt='Stumbleupon' border='0' hspace='12' src=' '/></a>
<a expr:href='"http://technorati.com/faves?add=" data:post.url "&title=" data:post.title' rel='external nofollow' target='_blank'><img alt='Technorati' border='0' hspace='12' src=' '/></a>
<a expr:href='"http://del.icio.us/post?url=" data:post.url "&title=" data:post.title' rel='external nofollow' target='_blank'><img alt='Del.icio.us' border='0' hspace='12' src=' '/></a>
<a expr:href='"http://reddit.com/submit?url=" data:post.url "&title=" data:post.title' rel='external nofollow' target='_blank'><img alt='Reddit' border='0' hspace='12' src=' '/></a>
<a expr:href='"http://twitthis.com/twit?url=" data:post.url "&title=" data:post.title' rel='external nofollow' target='_blank'><img alt='Twitthis' border='0' hspace='12' src=' '/></a>
<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" data:post.title "&u=" data:post.url' rel='external nofollow' target='_blank'><img alt='Yahoo' border='0' hspace='12' src=' '/></a>
<br/></span>


Use this code, and in between the single quotes place of source(src) of the images (bold part in the code above), paste the direct url link of the images of Digg, StumbleUpon, Technorati, Delicious, Reditt and Tweetthis buttons respectively. If you want to add more buttons like sphinn, Simply, furl, etc here, you can add them too. If you have any queries regarding this post as your comments i will look into them

4 comments:

  1. Oops. I meant it’s a great article.

    ReplyDelete
  2. doesnt work. url needs to have ;

    ReplyDelete
  3. Good post on How to Add Social Bookmarking Widget Buttons to your blogger template . I just came across a free video in http://debtfreeliving.blackbeltrecruiting.com/ that tells how to sponsor 20 a month. It contains good information and I hope it hepls everyone.

    Thanks,
    Peter.

    ReplyDelete
  4. Hi,

    Good one on How to Add Social Bookmarking. If you are interested to know how to get endless distributors online

    then please have a look at thi free video at http://debtfreeliving.magneticsponsoringonline.com

    Thanks,
    keval

    ReplyDelete

 
Page copy protected against web site content infringement by Copyscape
Clicky Web Analytics