Site icon StartFunction

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.

Exit mobile version