Connect with us

Blogging

Single Click Bookmarking Buttons Below Every Post

Published

on

As we all know the importance of Social Bookmarking Sites in driving the visitors traffic to your blog that Social Bookmarking is one of the important way to increase the popularity of your blog.

So Why not add all the shortcuts buttons to some of the most popular Social Bookmarking sites below every post of your blog.
So if the reader likes that post after reading, he can just single click to the button of any social bookmarking sites he likes to sumbit the content.

This trick will add small shortcuts buttons of social bookmarking sites’ below every post of your blog.

————————————————————————————————–
First I’m going to show you how to add small Social Bookmarking Buttons below every post (as in my blog).

Advertisement

1. Go to “Layout” and then the “Edit HTML” section.
2. “Download Full Template” for downloading the backup of your blog.
3. Check the “Expand widget Templates” checkbox.
4. Search (Ctrl+F) for the tag <head> and copy/paste the code BELOW just after this <head> tag.

<script src=”‘http://files.bloggerplugins.org/simpletricks.js’”></script>

Now from this point there are two ways to do this.

First one is for those bloggers who use “Expandable Post Summaries” in their blogs.
(What is “Expandable Post Summaries”??)

But if you don’t use this, ignore point 5, and jump to number 6.

Advertisement

5.This is for those, who use Expandable Post Summaries.
Search for
<p><data:post.body></p>

And add the following code just AFTER it.


<!-- Social Bookmarking Icons STARTs-->
<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://www.bloggerplugins.org">:</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='https://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='https://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='https://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='https://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='https://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='https://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='https://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='https://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='https://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='https://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='https://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='https://files.bloggerplugins.org/icon_sb_goo.gif'/></a>
</td>
</tr>
</table><br/>
</span>
<!-- Social Bookmarking Icons ENDs-->

6. For those who don’t use Expandable Post Summaries and want the bookmark buttons to appear after every post.

Search for
<p class='post-footer-line post-footer-line-3'/>

Advertisement

and paste the same code written in point 5 AFTER this.

Preview the template first, DON’T save at this point. If Preview window shows your blog fine and with the “bookmarks buttons” link after every post, then it means, everything went perfect. Otherwise It’ll show an error, and prompt you to remove them first before saving.

Common mistakes we do is incomplete Copying/Pasting the code.
Make sure you copied everything carefully and pasted it in right places, defined above.



If you only want to show a Big DIGG Button (with submit capablity) on top right of every post.

Advertisement

Here’s the procedure…

1. Go to “Layout” and then the “Edit HTML” section.
2. “Download Full Template” for downloading the backup of your blog.
3. Check the “Expand widget Templates” checkbox.
4. Search (Ctrl+F) for this code
<p><data:post.body/></p>

and just ABOVE this, paste this code:


<!-- DIGG Starts-->
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
</script>
<script src='https://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<!-- DIGG Ends-->

(Note:If you find <p><data:post.body/></p> twice, then choose second one and paste ABOVE that.)

Advertisement

Beside digg, Twitter is also playing a major role now in social networking. You can also add a twitter submit button instead/beside digg button. Click HERE to know how.


If you find above methods difficult or messy, then you can use dozens of other websites’ free services which offer you to add social bookmarking sites’ buttons in your blog.

Some popular of those are:

Addtobookmarks

AddtoAny

Advertisement

AddThis

SocioFluid

Procedures to install those buttons will be explained (with button codes) after you create your free account.


UPDATE: (April 2009) I’ve removed these buttons that have been discussed in this post, and instead using SocioFluid bookmarking buttons.

Hope you’ll like this small tutorial.

Advertisement

If yes, then don’t forget to digg it ! ;->

If you have any problem in installing these buttons, do tell me.

Thanks.

Advertisement
Comments