Since last week, a myriad of sites have been incorporating the “Like” button on their sites. WordPress self-hosted blogs are not the exception and there are a huge amount of Facebook Like buttons on the WordPress Extend plugin repository. But why bloating up your WordPress installation adding another plugin when we can just add a couple of lines and get our button? Save options queries and save loading time with the following tutorial.
For this tutorial, I will be focusing on using the XFBML method, which is the one that gives you more data about your visitors. In order to do that, you need to setup your application. It’s very, very easy. Go here:
http://developers.facebook.com/setup/
Fill in the fields and click the big blue button to create your app.
You will now be given some infomation:
App Name: I Love Colors
App URL: http://atomic-temporary-176953424.wpcomstaging.com
App ID: ~your app id number~
App Secret: ~your app secret number~
Take note of the App ID number.
Now, open your functions.php file in your theme root folder and add the following lines. Note that you need to enter your App ID number in the fourth line of the ilcFBJS function.
[php]
/*
* Facebook Like Button
*/
function ilcFBLike($content){
return ‘<div><fb:like href="http://atomic-temporary-176953424.wpcomstaging.com" layout="button_count" show_faces="false" width="50" action="like" font="lucida grande" colorscheme="light"></fb:like></div>’ . $content;
}
function ilcFBJS(){
echo "
";
}
add_filter (‘the_content’, ‘ilcFBLike’);
add_action (‘wp_footer’,’ilcFBJS’);
[/php]
And that’s it, now you have your own Facebook Like button. If you’re using the Hybrid Theme, you can make use of one of its hooks instead of filtering the content to display the button.
[php]
function ilcFBLike(){
echo ‘<div><fb:like href="http://atomic-temporary-176953424.wpcomstaging.com" layout="button_count" show_faces="false" width="50" action="like" font="lucida grande" colorscheme="light"></fb:like></div>’;
}
add_action (‘hybrid_after_header’, ‘ilcFBLike’);
[/php]
One more thing you could add is a different url for the href property of the like button or include the fb namespace including
[html]
xmlns:fb="http://www.facebook.com/2008/fbml"
[/html]
on your html tag. Visit the Facebook page for the Like Button to learn more about its parameters.
Nice tut..very useful..thanks…
Probably because a plugin doesn’t require any coding for the non techies.
Here’s the best WordPress plugin around (full support for Open Graph, translated in 10 languages):
http://wordpress.org/extend/plugins/like
thanks for code it useful
it very useful and easy to use
Bottomless, that is absolutely true and there are a lot of other reasons even for seasoned web developers like for instance “why bother if somebody else already wrote a plugin?” However, don’t forget that each WordPress plugin is bundled with a lot of options to be useful to most users so you end up adding a plugin with a lot of translation languages, a lot of options (eating database queries) that you might never use. If you can, you should always avoid plugins, and this is valid for WP, jQuery or any other system.
You guys have a cool web site, I am hope to have one like yours one day
Thanks for providing this code, I tested it and it works flawlessly! (cool webdesign btw!)
Great Claus, too bad FB was down today 😀
Hello everybody.
I would appreciate it if you could probably test my plugin if you are not so familiar with coding! Some Features are:
Plugin is available in English and in German
the Button can be individualy created for every site or one button for the whole blog
you can exclude sites which won’t get a like button
individual button position (before/after the content)
add all available OpenGraph Meta-Tags
you can individually design your Like-Button with css (css-Class)
our Like-Button-Generator makes it even more easier for you to create a Like Button
Analyse your Blog: Analyse the activity of your visitors and their likes
Use iFrame or XFBML-Button (with share and comment functionality)
use a shortcode to insert the like-Button
create a Like-Button Sidebar-Widget (also individual Like-Button for every Site/Post or one Like-Button for the whole site.
and many more 🙂
You can get it here:
http://wordpress.org/extend/plugins/like-button-plugin-for-wordpress/
thx a lot 🙂
Awesome! Thanks for the tip!
but not valid
It doesn’t work for me. And I’m still looking for the way to put a Like Button on single post, without wp plugin.