How to Add Facebook Share or Like Button in Blogger Templates

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.