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://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&quot; 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&quot; 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&quot;
[/html]

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

12 thoughts on “How to add a Facebook Like button without a plugin”

  1. 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.

  2. 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 🙂

Leave a Reply