How to add a Facebook Like button without a plugin

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://ilovecolors.com.ar

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.


/*
* Facebook Like Button
*/
function ilcFBLike($content){
    return '<div><fb:like href="http://ilovecolors.com.ar" layout="button_count" show_faces="false" width="50" action="like" font="lucida grande" colorscheme="light"></fb:like></div>' . $content;
}

function ilcFBJS(){
    echo "<div id=\"fb-root\"></div>
    <script>
    window.fbAsyncInit = function() {
      FB.init({appId: '~your app id number~',
      status: true,
      cookie: true,
      xfbml: true});
    };
    (function() {
      var e = document.createElement('script');
      e.type = 'text/javascript';
      e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
      e.async = true;
      document.getElementById('fb-root').appendChild(e);
    }());
    </script>";
}
add_filter ('the_content', 'ilcFBLike');
add_action ('wp_footer','ilcFBJS');

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.


function ilcFBLike(){
    echo '<div><fb:like href="http://ilovecolors.com.ar" layout="button_count" show_faces="false" width="50" action="like" font="lucida grande" colorscheme="light"></fb:like></div>';
}
add_action ('hybrid_after_header', 'ilcFBLike');

One more thing you could add is a different url for the href property of the like button or include the fb namespace including

xmlns:fb="http://www.facebook.com/2008/fbml"

on your html tag. Visit the Facebook page for the Like Button to learn more about its parameters.

Liked this? buy me a coffee so I can stay awake doing more things like this.

Tags: social network, tutorials. Categories: WordPress.
Friday, April 30th, 2010.

Rachel May 4th, 2010

Nice tut..very useful..thanks…

Bottomless May 5th, 2010

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

waterfilter May 5th, 2010

thanks for code it useful

miter saw blades May 5th, 2010

it very useful and easy to use

Elio May 19th, 2010

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.

Francis Onuman Jnr May 28th, 2010

You guys have a cool web site, I am hope to have one like yours one day

Claus September 23rd, 2010

Thanks for providing this code, I tested it and it works flawlessly! (cool webdesign btw!)

Elio September 23rd, 2010

Great Claus, too bad FB was down today

GangXtaBoii September 28th, 2010

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