Add the Facebook Like Button on your website or WordPress is a great idea which let your visitors share your content with their friends on Facebook and then drive traffics back to your site.
This tutorial aims to place the button on WordPress, it’s also easy if you want to do with other CMS or website.
1. Open your single.php file in your themes’s folder. In my case, it’s loop-single.php file in twentyten folder
2. Paste either of following implementation code below somewhere in your file:
+ Iframe:
<iframe src="http://www.facebook.com/plugins/like.php?href=your_url&layout=standard&show_faces=false&width=450&action=like&font&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe> |
+ Javascript – XFBML:
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="your_url" show_faces="false" width="450" font=""></fb:like> |
Replace your_url by your current page url. There is a function to get the current page url by PHP, read more: http://4rapiddev.com/php/php-get-current-page-url/
In WordPress blog you can use get_permalink() function to get your current page url so the 2 ways of implementation should become something like this:
+ Iframe:
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink());?>&layout=standard&show_faces=false&width=450&action=like&font&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe> |
+ Javascript – XFBML:
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<?php echo get_permalink();?>" show_faces="false" width="450" font=""></fb:like> |
A preview of the Facebook Like Button:
There are some options for you to config the button:
+ show_faces=true | false: show | don’t show profile pictures below the button
+ layout= standard | button_count | box_count
+ action= like | recommend: the verb to display in the button. Currently only ‘like’ and ‘recommend’ are supported.
+ colorscheme = light | dark: the color scheme of the plugin
Read more on the Facebook Like Button page.