How to Use Social Bookmarking Icons in Post Footer

I've social bookmarking icons installed in my post footer. You can also install these icons in your post footer so that your visitors can easily share your post with the world.



Remember: Backup your template before moving on.

To install these icons on your blog go to Layout | Edit HTML | Check Expand Widget Templates and search for this code...

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Now, place the following code right after the above code...

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<big><big><big> Share this post! </big></big></big>
<div class='spacer' style='margin-top:10px;margin-bottom:10px;border-top:solid 1px #DEDEDE;'/>
<div class='social-table'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td valign='top' width='50%'><table border='0' cellpadding='0' cellspacing='0' width='222'>
<tr>
<td height='24' width='24'><img border='0' height='16' src='http://lh3.ggpht.com/_TqPdHmAEwTM/SgxdHoRIprI/AAAAAAAAEC4/UOmW1Zfg04I/facebook.png' width='16'/></td>
<td height='24'><a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; +data:post.url'><strong>Share on Facebook</strong></a>
</td>
</tr>
<tr>
<td height='24'><img border='0' src='http://lh4.ggpht.com/_TqPdHmAEwTM/SgxdH2E0JsI/AAAAAAAAEDE/HTXaxE7_KaU/twitter.png'/></td>
<td height='24'><a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><strong>Share on Twitter</strong></a>

</td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='http://lh3.ggpht.com/_TqPdHmAEwTM/SgxiZxfvTGI/AAAAAAAAEDU/AvuLyM_PGa4/stumble.png' width='16'/></td>
<td height='24'><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; +data:post.url'><strong>Share on StumbleUpon</strong></a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='http://lh6.ggpht.com/_TqPdHmAEwTM/Sgxdp40mQUI/AAAAAAAAEDM/_Nee9ul6zpc/s128/delicious.png' width='16'/></td>
<td height='24'><a expr:href='&quot;http://del.icio.us/post?url&quot; +data:post.url'><strong>Share on Delicious </strong></a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='http://lh4.ggpht.com/_TqPdHmAEwTM/SgxjIHpTaiI/AAAAAAAAEDY/pZtBL9woxzw/reddit.png' width='16'/></td>
<td height='24'><strong><a expr:href='&quot;http://www.reddit.com/submit?url=&quot; +data:post.url'>Share on Reddit</a></strong>
</td>

</tr>
</table></td>
<td valign='top' width='50%'><table border='0' cellpadding='0' cellspacing='0' width='222'>
<tr>
<td height='24' width='24'><img border='0' height='16' src='http://lh4.ggpht.com/_TqPdHmAEwTM/SgxkjUlW8eI/AAAAAAAAEDc/iDE9H_-vX9w/digg.png' width='16'/></td>
<td height='24'><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'><strong>Share on Digg </strong></a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='http://lh5.ggpht.com/_TqPdHmAEwTM/Sgx1uAMIp7I/AAAAAAAAEDk/UvMj9nzDyJI/design_float.png' width='16'/></td>
<td height='24'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; +data:post.url'><strong>Share on DesignFloat</strong></a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='http://lh4.ggpht.com/_TqPdHmAEwTM/Sgxdp80sUoI/AAAAAAAAEDQ/3eYyxtWAGpM/s128/technorati.png' width='16'/></td>
<td height='24'><strong><a expr:href='&quot;http://technorati.com/faves/?add=&quot; +data:post.url'>Share on Technorati</a></strong></td>

</tr>
<tr>
<td height='24'><img alt='Feeds RSS' border='0' height='16' src='http://lh5.ggpht.com/_TqPdHmAEwTM/SgxdH0I91sI/AAAAAAAAEDA/cDcvpz3WJug/feed.png' width='16'/></td>
<td height='24'><a href='http://feeds2.feedburner.com/BloggerFAQs'><strong>Subscribe to Feeds RSS</strong></a>
</td>
</tr>
</table></td>
</tr>
</table>
</div>
<div class='spacer' style='margin-top:10px;margin-bottom:10px;border-top:solid 1px #DEDEDE;margin-bottom:10px;'/>
</b:if>
<div style='clear: both; height:30px;'/>

The only change you need to do in the above code is to replace http://feeds2.feedburner.com/BloggerFAQs with your blog feed URL. After that, save your template and see the social bookmarking icons on your post page.

Feel free to comment for help in this tutorial or if you just want to say thanks.