How To Add Facebook Box Count Like Button To Blogger And WordPress

Facebook has announced a new layout to their like button today. With this new update users can add box_count like button to your Blogger or WordPress blog. The update looks merely like killing their very own Facebook share button. So here, I am gonna teach you how to add the all new Facebook box_count like button on your blogs.

Live Demo:

 

For Blogger

Go to Edit HTML tab, check on Expand Widget Template and search for <data:post.body/> and paste the following code right after it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot;   data:post.url   &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:45px;'/>
</b:if>

If you want to add it inside the post, search for <div class=’post-header-line-1’/> and paste the following code

<div style='float:right; margin-right:10px;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot;   data:post.url   &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:45px;'/>
</b:if>
</div>

Some might already have the like button, so go to the like button script and replace this line layout=button_count with layout=box_count

For WordPress

Go t0 Single.php in your WordPress admin and add the following in Single.php

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;font=arial" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:50px;"></iframe>

If you already have the like button, replace the layout=button_count with layout=box_count

Still need help, drop in your comments.

September 10, 2010. This entry was posted in Blogger, Tutorials, WordPress and tagged . Bookmark the permalink.

We Recommend HostGator Hosting

Bloggermint strongly recommends Hostgator Hosting for all of your web hosting needs. Sign up today for WordPress Hosting at just $4.95/month.

Use coupon code "bloggermint" to get 25% discount on any hosting packages. Get an account with Hostgator now!