Have you seen those Facebook embedded boxes on business websites and blogs? Do you want to add your Facebook page box to your website too? Let’s see how you can easily embed your Facebook page on your website using the Facebook Page Plugin (Social Plugins).
Facebook pages are 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.
With the release of Graph API v2.3, the Like Box plugin is deprecated. You need to use the new Page Plugin instead. The Page Plugin allows you to embed a simple feed of content from a Page into your websites. You can use the Facebook Page Plugin to embed and promote any public Facebook Page on your website. Just like on Facebook, your visitors can like and share the Page without leaving your site.
Get the Facebook Like Box (Page Plugin) Widget Code
Log into your Facebook account and go to your page.
Head over to the Facebook Page Plugin generator on Facebook.
Enter the URL (Web address) of your page along with custom width and other preferences on the Like Box Page and hit “Get Code” button (after the widget preview) to generate the code.
You will get two options: one that uses iFrame and the other Javascript SDK code.
If you want a fast and dirty solution, copy-paste the iFrame code on the desired page or location on your website.
For enhanced functionality, you should use the Javascript SDK code. 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.
Step 1: Include the JavaScript SDK code on your page once, ideally right after the opening body
tag.
<div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0&appId=143452682350947&autoLogAppEvents=1" nonce="sLJh2bbM"></script>
Step 2: Add the code with your Facebook page URL at the appropriate place.
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div>
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.
Learn how to start your blog like a pro
A comprehensive guide to starting your blog. Whether you are looking to start blogging as a side hustle or you want to use it as a marketing tool, learn everything you need to create your blog from scratch. Learn how to pick the right keywords, register a domain name, buy the right web hosting and install your self-hosted blog. Start blogging with this easy guide.
Doug says
Nice work Pritam, your code/instructions worked perfectly. I followed you over from your post on the site “line25”.
Thanks
Pritam says
Thanks for your visit, Doug! Good to know that you benefited from the post. Hope to see you around.
Matt says
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 www.g3-remarketing.de, Bottom-Right (German Site, but the box is pretty much self explanatory, isn’t it?)
Thanks a lot,
Cheers,
Matt
Matt says
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.
Pritam says
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.
Matt says
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
Matt says
I found the problem, I was missing the xmlns:fb at the top of the page.
Dave says
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?
Pritam says
Hi Dave! Are you using the new Facebook Fan Box code? The CSS functionality doesn’t work with it, as mentioned in the article.
Techs24x7 says
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
Pritam says
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.
Pritam says
Thanks Tech24X7 for pointing it out. Facebook has changed the way fan page code was generated and implemented. The article has now been updated.
twinx says
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!
Pritam says
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).
Sc0rp0w says
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
Pritam says
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.
Keith says
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
Pritam says
Hi Keith, I visited your website. You Facebook Like box is working fine. I didn’t get any error. Stay in touch.
Keith says
Thanks! Maybe it is my browser settings. Your site is bookmarked.
Raiman says
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?
Pritam says
Please go through the discussion on this page to find the answer to your question.
AntowaKartowa says
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.
Pritam says
Sorry, I don’t have exact idea about it. Try fiddling with various links on your page. It must be hidden somewhere in those links.
AntowaKartowa says
I found it in photo album. Choose one, enter it and you got something like http://www.facebook.com/album.php?id=100000475283746&aid=22838
App ID i steal from the fan-box demo page that found on some blog. But this id should be one for all who try to add fan box, am i right?
Pritam says
You can find the link to create you own app above. It just a matter of few clicks to have your own app id.
Reteeks says
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.
Pritam says
Things have changed a bit. Now it’s a lot easier to add Like Box. Check out Facebook. 🙂
Annette says
Once you have the code, where do you paste it?
Pritam says
Paste in the HTML if you are using a static website. For WordPress or Blogger, you can paste it in a HTML widget.
Shelly says
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.
Pritam says
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.
Matt says
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!
Pritam says
If you are getting a blank page instead of Facebook Like Box, try including stream of latest posts as well.
Green Stickman says
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.
James Humphrey says
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?
deepak says
wow neat steps , will try out thanks a lot, do post the same for G+ also. thanks.
MaryJo says
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
Vartkes Nadjrian says
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?
Pritam says
I guess you can do that by customizing the Like Box while generating the code.
Vartkes Nadjrian says
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
Leah Root says
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.
pen says
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!
Bloxico says
Can you please tell me how to add a css style to the new facebook like box to the html 5 code
Thanks
jaswanth says
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
Pritam says
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.
james says
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?
Pritam says
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.
james says
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?
james says
i am positive. i have been trying it for about 3 weeks and it’s the same thing.
Pritam says
I guess I don’t have an answer to your query right now. Try looking into Facebook Developer Help section.
Tierney says
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.
Pritam says
Why don’t you follow the FBML method mentioned in this post? This is what I am using on my website.
Tierney says
Hi there. I used the IFrame code because it works on my website post. I tried yours but I don’t understand the app id and all that. 🙁 I posted the code on my website blog. http://tierneyomalley.com
I don’t know how to fix this.
Jali says
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.
Prasenjit @ Make Money Blogging says
Thanks Pritam. I was using line25’s code but it was breaking sometimes. Your code snippet works perfectly for me.
Thanks,
Prasenjit.
Jagesh says
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
Pritam says
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.
max neumann says
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
Pritam says
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.
Apon says
Yes. It is working on my side. Thanks.