Inserting the Facebook “Like” Feature on your Website

Facebook are changing things up and this week a new feature has come out that allows you to ‘Like’ a page external from Facebook.

By selecting the ‘Like’ button on a website it will automatically appear in your Facebook feed if you are logged in.

This is a great way to get traffic from Facebook to your external website, but it won’t happen unless you have the like feature on your website. So here is a quick run down of how to do it.

First of all head on over to the Facebook Developers Social Plugins Like Page. Here you will find information about the feature and its different customisations. If you scroll down to the bottom you can add your website details in a form, customise the look and generate the code. Copy the code and place it where you want it to display in your website (much like the “share” and “fanbox” widgets).

The easiest option is to grab the iframe code and it will look like this:-

<iframe src=";layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

Now this will only reference the individual page you have specified, you don’t want to have to be going in and getting this code for every page or blog post on your website. So for PHP websites replace where you have your url and insert the following code:

<?php echo urlencode('http://'.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']) ?>

This will get the current page the user is on when they press the button. So your end result will look more like this:-

<iframe src="<?php echo urlencode('http://'.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']) ?>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

For WordPress Users

Yep there is a bunch of plugins available already! So if you’re not into coding head over to the WordPress Plugin directory. My personal favourite so far is ‘Like‘.

Looks a little scary?

This tutorial isn’t for newbies, so if you want this feature on your website pronto and you are feeling a little out of your depths I suggest you contact your web developer or contact us and we can help you out.

1 thought on “Inserting the Facebook “Like” Feature on your Website”

  1. I have been succesful in getting the “like” button to appear on my home page, but not on ALL pages. Plus, when I copy & pasted your code it made my text below it go way down the page & I cannot seem to get it back up, so it will begin right under the “like” button line. Any suggestions?

Comments are closed.