Pages

Monday, September 19, 2011

add social bookmarking icons to blogger posts

today the world has become very small so socialising makes it easy for us to know each and every thing so from this you can reach to thousands of people to like your content
Social bookmarking services such as StumbleUpon, Digg & Reddit (->My love) are really popular these days & if a blog post makes it's way to the front page of these services then it's your lucky day. The concept is simple; people browsing web share their favorite bookmarks with others through these services. You can install these icons in your post footer so that your visitors can easily share a post.

Remember: Backup your template before moving on.

Steps to Add the Social Bookmarking Icons.


  1. Go to Layout | Edit HTML.
  2. Check Expand Widget Templates, the page will automatically refresh.
  3. After that press Ctrl + f and search for this code:
    <div class='post-body entry-content'>
       <data:post.body/>
       <div style='clear: both;'/> <!-- clear for photos floats -->
     </div>
  4. Now, place the following code right after the previous step 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/BlogzGuru'><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;'/>
  5. The only change you need to do in the above code is to replace http://feeds2.feedburner.com/BlogzGuru with your blog feed URL.
  6. After that, save your template and you can see the icons in post footer but only on posts' pages.

1 comment: