24 July 2008

How to add Social Bookmarks Buttons/Icons after every post in Blogger?

Advertisements

At many blogs you have seen the social bookmarking buttons, which by one-click submit your article to the Social Bookmarking sites like - digg , del.icio.us , stumbleupon , yahoo , google , furl , etc.

How does the Social Bookmarking helps ?

By adding these social bookmarking buttons/icons, either you or any of your reader can submit your article to these sites. Now when your article is listed here at these sites , there is a chance that you can get some visitors of millions using these social bookmarking sites.

So in addition to make your site look beautiful and professional these social bookmarking buttons/icons help you get more traffic to your site.

How to add these Social Bookmarking Icons/Buttons to my Blogger Blog after each post ?

Here's the step-by-step guide for you -

STEP I - Goto = Dashboard > Layout > Edit HTML > Expand Widget Templates

STEP II - Now find this in your template -
<head>
STEP III - Just add this after that tag -
<script src='http://free.blogger.help.googlepages.com/socialbookmarks.js'></script>
So that it looks like this -
<head><script src='http://free.blogger.help.googlepages.com/socialbookmarks.js'></script>
STEP I V- Now find this in you template -
<p class='post-footer-line post-footer-line-3'>

STEP V- Add the following after this line -
<style type='text/css'>
.bookmark img { border: 0;
padding:0px; }
.bookmark a:hover {
position: relative;
top: 1px;
left: 1px; }
</style>
<span class='bookmark'>
<table align='left' border='0' cellpadding='0' width='100%'>
<tr>
<td style='vertical-align:middle' valign='middle' width='30%'>
<div expr:id='"sbtxt"+data:post.id'>Bookmark this post<a style="text-decoration:none;" href="http://free-blogger-help.blogspot.com">:</a></div><script type='text/javascript'>showsbtext(&quot;sbtxt&quot; + &quot;<data:post.id/>&quot;,0)</script>
</td>
<td>
<a rel="nofollow" expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext("sbtxt" + data:post.id + "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" + data:post.id + "",19);"' target='_blank'><img alt='StumpleUpon' src='http://2.bp.blogspot.com/_tbHfaj1A058/S5H2WJfeTxI/AAAAAAAAJOQ/jFC154y_EYs/s1600/icon_sb_stumb.gif'/></a> <a rel="nofollow" expr:href='"http://ma.gnolia.com/bookmarklet/add?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext("sbtxt" + data:post.id + "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" + data:post.id + "",6);"' target='_blank'><img alt='Ma.gnolia' border='0' src='http://2.bp.blogspot.com/_tbHfaj1A058/S5H2px8DsjI/AAAAAAAAJOY/n-6Nj1iVo9U/s1600/icon_sb_mag.gif'/></a>
<a rel="nofollow" expr:href='"http://digg.com/submit?phase=3&amp;url=" + data:post.url' expr:onmouseout='"javascript:showsbtext("sbtxt" + data:post.id + "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" + data:post.id + "",1);"' target='_blank'><img alt='DiggIt!' src='http://1.bp.blogspot.com/_tbHfaj1A058/S5H24Re438I/AAAAAAAAJOg/0gV5f5rWKdM/s1600/icon_sb_dig.gif'/></a> <a rel="nofollow" expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext("sbtxt" + data:post.id + "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" + data:post.id + "",2);"' target='_blank'><img alt='Del.icio.us' src='http://4.bp.blogspot.com/_tbHfaj1A058/S5H3LnJysWI/AAAAAAAAJOo/zECxYOEZArI/s1600/icon_sb_del.gif'/></a> <a rel="nofollow" expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=" + data:post.url + "&amp;Title=" + data:post.title' expr:onmouseout='"javascript:showsbtext("sbtxt" + data:post.id + "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" + data:post.id + "",3);"' target='_blank'><img alt='Blinklist' src='http://1.bp.blogspot.com/_tbHfaj1A058/S5H3btojGDI/AAAAAAAAJOw/_kt78l6ibpk/s1600/icon_sb_bli.gif'/></a> <a rel="nofollow" expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&amp;=" + data:post.title' expr:onmouseout='"javascript:showsbtext("sbtxt" + data:post.id + "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" + data:post.id + "",4);"' target='_blank'><img alt='Yahoo' src='http://2.bp.blogspot.com/_tbHfaj1A058/S5H3pWu5x6I/AAAAAAAAJO4/d6zq3Mm83xU/s1600/icon_sb_yah.gif'/></a> <a rel="nofollow" expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&amp;t=" + data:post.title' expr:onmouseout='"javascript:showsbtext("sbtxt" + data:post.id + "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" + data:post.id + "",8);"' target='_blank'><img alt='Furl' src='http://1.bp.blogspot.com/_tbHfaj1A058/S5H34lcn9CI/AAAAAAAAJPA/GbUdMU8vUTM/s1600/icon_sb_fur.gif'/></a> <a rel="nofollow" expr:href='"http://www.technorati.com/cosmos/search.html?url=" + data:post.url' expr:onmouseout='"javascript:showsbtext("sbtxt" + data:post.id + "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" + data:post.id + "",9);"' target='_blank'><img alt='Technorati' src='http://3.bp.blogspot.com/_tbHfaj1A058/S5H4HPcXcSI/AAAAAAAAJPI/O5SZBFUH87U/s1600/icon_sb_tec.gif'/></a> <a rel="nofollow" expr:href='"http://www.simpy.com/simpy/LinkAdd.do?href=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext("sbtxt" + data:post.id + "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" + data:post.id + "",10);"' target='_blank'><img alt='Simpy' src='http://1.bp.blogspot.com/_tbHfaj1A058/S5H4ViWLv3I/AAAAAAAAJPQ/Bm9-uf6QbaA/s1600/icon_sb_sim.gif'/></a> <a rel="nofollow" expr:href='"http://www.spurl.net/spurl.php?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext("sbtxt" + data:post.id + "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" + data:post.id + "",11);"' target='_blank'><img alt='Spurl' src='http://3.bp.blogspot.com/_tbHfaj1A058/S5H4lEdLV3I/AAAAAAAAJPY/Cx8YoV7uMvM/s1600/icon_sb_spu.gif'/></a> <a rel="nofollow" expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext("sbtxt" + data:post.id + "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" + data:post.id + "",17);"' target='_blank'><img alt='Reddit' src='http://4.bp.blogspot.com/_tbHfaj1A058/S5H4yzUJReI/AAAAAAAAJPg/k5p_ffCZz_k/s1600/icon_sb_red.gif'/></a> <a rel="nofollow" expr:href='"http://www.google.com/bookmarks/mark?op=add&amp;bkmk=" + data:post.url + "&amp;title="+data:post.title' expr:onmouseout='"javascript:showsbtext("sbtxt" + data:post.id + "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" + data:post.id + "",20);"' target='_blank'><img alt='Google' src='http://1.bp.blogspot.com/_tbHfaj1A058/S5H5BMIl4-I/AAAAAAAAJPo/1_s4M3pmuZ4/s1600/icon_sb_goo.gif'/></a>
</td>
</tr>
</table><br/>
</span>
STEP V- Now save template and check your blog, it should like the one I've in my blog here.



Feel free to comment if you like this post or if you are having any difficulty trying it.

Related Posts

42 comments

August 17, 2008 at 4:40 AM

Awesome! Thanks.

August 21, 2008 at 1:51 AM

This is a nice post but the code cannot be copied from the page

August 21, 2008 at 6:05 AM

thanks very helpful

August 21, 2008 at 9:04 AM

@ Jigsawman....the code can be easily copied....just because of color of the template you cant see when you select it....just select it and do copy paste.. :-)

September 10, 2008 at 10:47 AM

Hey, pretty clear instructions, thanks.
Got a problem though... my post area is small, and the icons are too big. It kind of messes up that area a little. Could you pls help me.
http://mixtomatch.blogspot.com/

September 10, 2008 at 11:32 AM

@ Divya, the size of icons cannot be reduced, rather you can increase width of your text area.

September 10, 2008 at 11:38 AM

Sorry, I am not XML savvy, how do I do that?
:(
I love your bookmark bar, and I want to add it one way or the other...
I have a 3-column template if that helps.

September 11, 2008 at 9:34 AM

hey divya.....try this -

outer-wrapper width:990px
main-wrap1 width:520px
sidebar-wrap width:200px
newsidebar-wrap width:200px;

Just put these values in your template,if the sidebar is placed at bottom instead on right side just reduce 'main-wrap1' value by 10 and check.

Tell me if it works.

September 11, 2008 at 3:25 PM

Thanks for the instructions. I created a 3 column template from a 2 column original. So it got a little complicated. But it kind of looks ok now with a little trial and error. I thought I could never learn, it is not bad after all!
Thanks anyway, it is sitting pretty on my footer.

September 12, 2008 at 9:21 AM

Thanks a lot....

September 12, 2008 at 10:43 PM

@ Divya and Shafar.....you are always welcome.

September 14, 2008 at 11:26 AM

Thank you. I have added this to my blog.
http://onlinecelebrities.blogspot.com

September 15, 2008 at 8:17 AM

nice...

September 15, 2008 at 9:41 AM

Thanks

September 19, 2008 at 10:52 AM

THANK YOU for this!

September 22, 2008 at 1:39 AM

Thanks for this guide it has been very helpful.
I've added this to my blog.

Fast Fire Fish Blog

Ankit
September 28, 2008 at 1:11 AM

How do I do this in Wordpress custom installation..?

lisa
October 15, 2008 at 1:24 PM

Can someone please tell me how to get the icons to go left to right instead of top to bottom? Thanks! See here

www.preppydays.blogspot.com

October 26, 2008 at 2:25 PM

Hi Raman....
I really loved your codes for working, You can't imagine what I've gone through to get these codes, I created a link to your artcile in my blog, ( hope you don't mind)
:)

Thanks a lot!

October 26, 2008 at 8:19 PM

Hey Abdullah Mahmood , thanks for a link to my article.... it's a nice method to appreciate my work.

October 26, 2008 at 8:21 PM

@ Lisa, I didn't get you,,, the icons are not going from top to bottom...

January 13, 2009 at 2:52 PM

thanx i added them to my blog

January 23, 2009 at 11:27 PM

Oh ya thank you. THis works well for some teplates. However i have added this to mine after removing some bookmarking tools.
Anyway thanks

January 29, 2009 at 4:30 AM

Thanks a lot for these, they helped tons.

March 3, 2009 at 6:45 AM

@ the sword, celebs image, tourism radio....you are always welcome friendz

March 10, 2009 at 9:09 AM

Nice work. The link should be copyable. What about adding an addme.com button after every post in the html template of blogger.

www.muwasalat.com
http://GetFreeEducation.blogspot.com

March 12, 2009 at 1:11 AM

I've changed the template now, there will be no problem now to copy the link or code.....

I'll write about addme.com button soon.

March 28, 2009 at 2:12 AM

Thanks you, i have been implemented your tips in my blog Tukang Kritik

June 11, 2009 at 8:18 AM

thank yo.....

June 28, 2009 at 12:46 PM

Awesome post! Thanks so much! Don't suppose you know the code to list facebook on there too?

July 2, 2009 at 1:53 AM

ok I'll try to get code to add facebook there :)

November 7, 2009 at 7:40 AM

Thanks buddy that was a helpful info.

March 5, 2010 at 12:42 PM

@DRAMAN
please upload the icon files by yourself and give codes for that.(or get the code again from my blog. the images are now uploaded on blogger) pleaase don't provide links to files.bloggerplugins.org

Regards
Aneesh

March 5, 2010 at 10:46 PM

@Aneesh

Now images are hosted separately.

July 25, 2010 at 2:22 PM

@drraman i tried this but fail, please help me in this.

July 26, 2010 at 2:33 AM

It works.

Well here is the simpler tutorial

Add "AddThis" Bookmarking & Social Sharing button to Blogger blogs

July 26, 2010 at 3:14 AM

@drraman i have added one gadget on my fotter as featured partners, but this is displaying adjoing, i want this to be one by one
like
yatra.com
expedia
shine
....
...

this kind of thing..
how to do that...


Thanks For your help

July 26, 2010 at 7:01 AM

Go to Design > Add a Gadget. Scroll down and select Link List.

New Site URL : Link address
New Site Name : Link Name

Add a Link.

July 26, 2010 at 9:07 AM

@drraman all are hyperlinked, please check out, i want this to be in align like i show you on my last comment.

July 26, 2010 at 9:42 AM

@drraman Thanks i have done it...

July 27, 2010 at 12:27 AM

@drraman i got three options while searching 2 part mentioned above
p class='description'spandata:description span p
p class='comment-footer'
p class='comment-footer'

where to put that code mentioned in second step, also i want to add facebook or orkut.com in a share button on starting part, or if you could do orkut like we share Buzz.


is it possible?


Thanks

July 27, 2010 at 12:43 AM

Please AddThis: http://www.blogger-help.com/2010/07/add-addthis-bookmarking-social-sharing.html

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More