Sunday, July 26, 2009

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


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://files.bloggerplugins.org/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://files.bloggerplugins.org/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://files.bloggerplugins.org/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://files.bloggerplugins.org/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://files.bloggerplugins.org/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://files.bloggerplugins.org/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://files.bloggerplugins.org/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://files.bloggerplugins.org/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://files.bloggerplugins.org/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://files.bloggerplugins.org/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://files.bloggerplugins.org/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://files.bloggerplugins.org/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.

Bookmark and Share
Digg this

2 comments:

The Blue Dot said...

I can not find p class='post-footer-line post-footer-line-3' in my html file even after expanding widgets? Any help would be much appreciated.

Tom Watson said...

Basically the New York Times had an article about some sites that do for images what Digg and the rest do for websites. It's worth checking out. Small Business Listings