How to Add Facebook Like Box to Your Website

How to Add Facebook Like Box to Your Website

Facebook pages have become an important tool for expanding the reach of websites and blogs. Facebook social widgets are a great way to integrate Facebook page with your website. Let’s see how we can add the Facebook Like Box (the newer version of Fan Box)  to a website or blog in  a couple of minutes.

Get the Like Box Widget Code

Facebook Like Box Code

Log into your Facebook account and go to your page. Now click on the the ‘Edit page’ link on the left side of your page’s profile. On the Facebook page settings page, you will see a tab called “Marketing”. You’ll see the link “Add a Like box to your website“.

Customize Facebook Like Box Code

Enter the URL (Web address) of your page along with custom width and other preferences on the Like Box Page and hit “Get Code” to generate the code. You will get two options: one that uses i-Frames and the other javascript-based XFBML code. If you want a fast and dirty solution, copy-paste the i-Frame code on the desired page or location on your website.

For enhanced functionality, you should use the XFBML code. It is more flexible than i-Frames. Earlier, it required Javascript SDK, not any more.  You don’t need to be a Javascript ninja to be able to use it for your Facebook Like Box. Copy-pasting the following code will suffice. Add your Facebook page URL at the appropriate place.

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
</script><fb:like-box href="Facebook-Page-URL-Here">
</fb:like-box>

Customize Your Facebook Like Box

You can define width and height in pixels, colour scheme (light or dark) and number of connections (fans) to show in the Like box. You can also turn on and off the header (blue strip with Facebook logo) and stream or Facebook posts of the page.

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
</script><fb:like-box href="Facebook-Page-URL-Here" width="300" height="301" connections="10" header="false" stream="false">
</fb:like-box>

Update: Facebook has changed the way you can add a Like box to your website. This article has been updated accordingly. The old methods for adding Facebook Like boxes are still being supported.

Old Method of Adding Facebook Fan Page

Get Facebook Page ID

Before proceeding, you will have to find your Facebook page’s ID. It will be present in most links on your Facebook page. Just move your mouse over the profile image and you will find a URL with the ID mentioned in it.

Many functions in the Facebook Javascript SDK require an application ID. We will need to set up a Facebook application before going forward. How to get an application ID?

Set Up Facebook application

To get one, head over to http://www.facebook.com/developers/apps.php and set up a new application. For your convenience, call it the same as your website’s name. You can leave other details blank, as long as you end up with an application ID to insert into the SDK code.

The final code will look like this:

<div id="fb-root"></div>

<script>
 window.fbAsyncInit = function() {
 FB.init({appId: 'Your-App-ID', status: true, cookie: true,
 xfbml: true});
 };
 (function() {
 var e = document.createElement('script'); e.async = true;
 e.src = document.location.protocol +
 '//connect.facebook.net/en_US/all.js';
 document.getElementById('fb-root').appendChild(e);
 }());
 </script>

<fb:like-box profile_id="Your-Page-Profile-ID" width="300"  connections="20" stream="false" header="false"></fb:like-box>

The above code consists of three components: a div tag, the Javascript and the Like Box FBXML code generated earlier. You can copy-paste the above  code and modify it. Replace Your-App-Id in Javascript with your Facebook application ID. In the Facebook Like Box code, you need to change the profile_id. You can change the values for width and number of connections as well. If you want header and stream to appear in the Like Box, delete the respective parts in the code. Paste this code at the desired place in your blog or website.

If you want, you can clean up your code by saving the Javascript code enclosed within the script tags in a separate file and saving it with .js extension. Upload this file on your server, and add the link to this file instead of the Javascript code. The code will look like this:

<div id="fb-root"></div>
<script src="Link-to-Javascript-File" type="text/javascript"></script>
<fb:like-box profile_id="Your-Page-Profile-ID" width="300" connections="20" stream="false" header="false"></fb:like-box>

Older Fan Box Code

If you want to use the older Fan Box, use the following code with appropriate customizations:

<div id="fb-root"></div>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">FB.init("Your-App-ID");</script>
<fb:fan profile_id="Your-Page-Profile-ID" connections="20" width="300"></fb:fan>

To jazz up the Fan Box, you can add a custom CSS file to it. Link your CSS stylesheet by adding a new attribute to the <fb:fan> code.

<fb:fan profile_id="Your-Page-Profile-ID" css="http://example.com/likebox-style.css?1" connections="20" width="300"></fb:fan>

The ?1 at the end is a requirement and denotes the version of the stylesheet. Each time you modify the stylesheet, you need to increase the number by one. If you fail to change the number, the old styling will be used from Facebook’s cache. So whenever you make a change and reupload the CSS file, remember to also change the link to ?2 and so on.

How to make changes to the Like Box? Use Firebug add-on in Firefox to customize the  Like Box in the browser. Once you have made the desired changes to the Like Box using Firebug, copy the code and paste it in your stylesheet.

Comments

  1. Nice work Pritam, your code/instructions worked perfectly. I followed you over from your post on the site “line25″.

    Thanks

  2. Hey Pritam,

    thanks for the great tutorial.
    Everything worked well, except for the styling. For some reason, my styles are not used and the box is always displayed as Facebook Standart.
    Can you maybe have a look and tell me whats wrong?
    The box is at http://www.g3-remarketing.de, Bottom-Right (German Site, but the box is pretty much self explanatory, isn’t it?)

    Thanks a lot,
    Cheers,
    Matt

    • ok, apparently you can only customize the old box (fb:fan), but not the new box (like). is that correct, or is there something else that i’m missing? if you still have any tips for me, please let me know.
      Cheers.

      • Hi Matt, I also found the new Like box cannot be customized. If you really want a customized Facebook Like Box, use the old Fan box code. Practically, both give you the same result. Cheers.

  3. I am using the same fb:like-box from the facebook developers site but for some reason it doesn’t work in Internet Exploere ( IE8 ). Does anybody else have the same issue?

    I have tried the fb:like-box inside the and below the script? I am not using any CSS on the facebook code

  4. I found the problem, I was missing the xmlns:fb at the top of the page.

  5. hey thx for the great tutorial!

    unfortunately i cant get the custom css to work… i added an ? plus number at the end of the line and the path to the css file is also correct.

    here´s the code:

    FB.init(“FILLEDOUT”);

    could someone please help me out?

    • Hi Dave! Are you using the new Facebook Fan Box code? The CSS functionality doesn’t work with it, as mentioned in the article.

  6. Hi Pritam P Hans
    What you have instructed is O.K, but instead of Page ID we need to put the full url of that page…Not facebook is asking Page URL not the Page ID

    • I don’t get what you are trying to say. I always write about things that I know for sure and have tried myself. Others have been able to add Facebook fan page using the method mentioned in this article.

    • Thanks Tech24X7 for pointing it out. Facebook has changed the way fan page code was generated and implemented. The article has now been updated.

  7. Hi Pritam,

    I am having difficulty following your instructions because my profile page does not show the “marketing” option (your first instruction) although I was able to get to the Like Box social plugin portion. After inputting my URL, the sample view on the right displays “The page you requested…” error. Am I doing something wrong? The HELP SECTION of Facebook is NO HELP at all for my case.

    Please help. Would greatly appreciate it. Thanks in advance!

    • If the new method is not working for you, try the old ways for adding Facebook page. There should be no error if you copy-paste the URL of your Facebook page (without any additions such as #wall).

  8. Hi, I have question regarding creating the css file. As I checked with firebug the fan-box has 2 the random letters css files. Which one should I copy to the css file, which is linked to fan box by the css=””.

    Regards,
    Sc0rp0w

    • Hi Sc0rp0w, If you are talking about the version number of the css file, I will depend on how many times you have edited the file. The number is added to tell Facebookk which file to use from its cache and avoid use of old stylesheet. You will have to link your own stylesheet for this. All the best.

  9. Great tutorial!!

    I am having a slight problem though, I am using the older fanbox with added css. When I click the like button on my site I get a security warning when trying to connect. Do you have any ideas why this is happening. I have tried both the API and ap ID with no difference, do I need to submit the app to facebook. Thanks for any advice I am kinda new to this stuff.

    Thanks
    Keith

  10. Pritam! Thanks so much for this tutorial!

    I just had a question about the ?1 that comes after the css. I’m building and testing a theme using easyphp installed on my computer locally. And in this case, I now have no idea what “reuploading the CSS” means anymore.

    I got as far as getting the like box to appear, but I can’t get any of my css to work and I’m guessing it might have to do with the ?1. Any suggestions how I might approach this?

  11. Hi, nice tutorial. I want use the old fan box method, but i don’t know how to get the Your-App-ID and Your-Page-Profile-ID because i have already set username (Jabra.UA) for facebook account.

  12. Hello thanks for the help with the code.
    When you say…”In the Facebook Like Box code, you need to change the profile_id”

    Do we change the profile_id to our facebook profile page id?
    I keep trying the code and end up with a white box…;-(
    Thanks again for the code, I need some help to get it to work.

  13. Once you have the code, where do you paste it?

    • Paste in the HTML if you are using a static website. For WordPress or Blogger, you can paste it in a HTML widget.

    • ok, I am still having trouble understanding this. I want to add the like button to my business facebook page and i still can’t figure out where to paste it. I went to view source but I can not edit that to paste the code. I just want the button to show up on my facebook page.

      • Sorry, you should take help from someone who understands basics. Every Facebook page has its own Like button. You don’t need to add it there.

  14. Would using these older codes fix the IE fb_xd_fragment bug?

    I’m hoping, because I’m losing out on a lot of followers!

  15. Sometimes this plugin have a bug. Sometimes faces does not appear so you have to contact the facebook developers to fix it. I experienced it in my site.

  16. Pritam, great tutorial. In January, I was poking around with adding Facebook integration to my site. First, I created a facebook page for my website called Tennis Maps (http://www.facebook.com/pages/Tennis-Maps/165294736849377). I added a facebook likebox to the bottom of my pages that includes a scrolling list of any status messages I make to my Tennis Maps facebook page.

    Later I wanted to add a Facebook comments box to individual pages on tennismaps.com. So, I created a Facebook application called Tennis Maps (http://www.facebook.com/apps/application.php?id=171804839523450). That gave me an appId that I can use in Facebook widgets.

    However, now I feel as though I’ve created a split identity for tennismaps.com on Facebook. It appears that people are liking the original Facebook Tennis Maps page and the Facebook Tennis Maps application page separately. Is there a way to link the two Facebook entities together somehow?

  17. wow neat steps , will try out thanks a lot, do post the same for G+ also. thanks.

  18. Good day

    Thanks a lot for your post, I installed the Facebook fan box on my WordPress website.

    I have a picture on my Facebook page and would like the same picture to show in the box on my website. Could you please help with that?

    Would appreciate your comments.
    MJ

  19. Is there a way to set the show_faces attribut to false and still show the number of likes even if the like button has been clicked?

    • I guess you can do that by customizing the Like Box while generating the code.

      • Do you mean while generating the code in facebook developer? I tried that and tested all the attributes and the only option is to keep the images displayed to show the number of likes even if someone has clickedthe like button. I was looking for a work around that’s why i posted my question, it seems that it can’t be done

  20. Hi – I had to update our like box to the newer one. Is there any way in the API or otherwise to get rid of our profile icon? The box is in a very narrow space and we need all the room we can get. If you look at the site, you’ll see what I mean. Thanks.

  21. So, using the Like Box code I was getting a bug in chrome/safari/firefox (lower than v7) that meant all images coming up in the news stream were picking up a max-width of 120px, so were distorting (height was around 250+ so everything was elongated). Major hassle! On FF 7 and IE 8 the images were appearing large, 300 x 220 approx, so though bigger, looked fine. I swapped for using the Fan Box code, and restyled the whole box using local css. Now everything is cool, but IE 8 doesnt parse Fan Box. I run a simple ‘if gte IE8…’ to use the Like Box for that browser.

    One thing, in previous info on the web, to get your profile ID if you’re now using a name for your url Facebook page, you don’t seem to be able to get it from the profile image, but you can see it when you mouse over the ‘edit page’ link on top right of your page.

    Hope this helps!

  22. Can you please tell me how to add a css style to the new facebook like box to the html 5 code

    Thanks

  23. Thanks for the great article but i have a doubt from long time…

    In your tutorial you have given
    …../Specky-Geek/134797253228895 a facebook page url right.?
    But in your site bar when i moue over on like button its url is

    https://www.facebook.com/speckygeek

    How its converted from

    …../Specky-Geek/134797253228895
    to
    https://www.facebook.com/speckygeek

    • Hi Jaswanth, You can create a unique name for your page once it has a certain number of Likes. I am not sure about the number of Likes required, but it is pretty low. All the best.

  24. my like box is set up however, the pics only show when a personis logged in to their facebook acct. once you log out of the acct and refresh the screen the pics are gone but the box is still there. what causes this to happen?

    • Are you sure you have set up your Facebook Like Box properly. Just double check all the settings. Facebook keeps updating itself, so try to grab the code again.

  25. why do the profile pics on my site leave when a person logs out of face book. the on;y way the pics will show is to log into your facebook acct. do you know why?

  26. i am positive. i have been trying it for about 3 weeks and it’s the same thing.

  27. Hi, I wonder if you can help me. I have a website and am trying to add a like button on my page. I have this code:
    <iframe src="http://www.facebook.com/plugins/like.php?href=ID)); ?>&layout=standard&show_faces=true&width=450&action=like&colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:450px; height:60px”>

    I posted this on my blog and got the “like” button. The problem is the profile of people that clicke the like are not showing. Can you help? I am running a contest and need to know who clicked the like. Please help.

    Thank you.

  28. I hours of searching, finally i found what I’m looking for. I installed wp plugins for facebook but it give me more headache. Finally I found your method, the basic one, and I know that this is what I’m looking for. Thank you.

  29. Thanks Pritam. I was using line25′s code but it was breaking sometimes. Your code snippet works perfectly for me.

    Thanks,
    Prasenjit.

  30. Hi we have added facebook like box in our websites.we have added a stylesheet in that.its working fine in ubuntu but not in windows.

    Please advice

    • Hi Jagesh, If your stylesheet is working in one browser and not in others this means the codes are not compatible with all browsers. It is a very common problem. Firefox, Chrome are intelligent enough to render your CSS properly, but Internet Explorer often messes things up. You will need some minor fixes.

  31. Dear Sir or Madam,

    I got a social media plugin on my website that enbables my readers to like an article. Unfortunately, the likes are not automatically migrated into my facebook-fan page since I were posting my articles on my facebook-fanpage manually. Consequently, not any of the likes appear on my fanpage and the impression is that nobody likes the articles.

    Do you know what I can do in order to export the likes to my fanpage?

    Otherwise it would be a pity to waste all these likes. The public impression of my work is getting worse.

    I am glad to hearing back from you.

    Sincerely,

    Max Neumann

    • Try to create interesting posts. The only way to get likes on social networks and go viral is to have great content that people would like others to read as well. I hope you get the point.

  32. Yes. It is working on my side. Thanks.

Trackbacks

  1. [...] Facebook Like Box Code speckygeek.com [...]