Blogspot How to: Add Social Bookmarking Icons in Blog Posts Footer


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/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;'/>
  5. The only change you need to do in the above code is to replace http://feeds2.feedburner.com/BloggerFAQs 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.

6 comments:

  1. thansk but why is it i cant see the icon in my blog

    ReplyDelete
  2. @ maue, gimme your blog address!

    ReplyDelete
  3. I cant find the place where to add those lines, search function of my browser also cant find it...

    ReplyDelete
  4. @ Guerilla Crafters United, just gimme your blog address where you wanna apply this hack...

    ReplyDelete
  5. This didn't work for me.

    I don't know if that's got anything to do with the fact that I don't understand what site feed really means. I followed blogger's instructions when I set up the blog, but I don't know if that means the blog is automatically syndicated or not.

    And if it is, I don't know what the URL is, and don't know how to find it. Frustrating. Blogger's help is hopeless at helping people who don't understand much.

    ReplyDelete
    Replies
    1. Hi Jennifer, Blogger help can be useless sometimes but a huge number of people are using it so, it will improve over time.

      Delete

Note: All comments will be moderated.