How to add a Facebook Fan Page widget to your website
July 13th, 2009
Facebook recently added the ability to add a Fan Page widget to your website. For an example, check out the Cardeo sidebar, about half way down. Using javascript, or an iframe, makes adding this widget to your website pretty easy. For this tutorial, I’m going to use the javascript example.
Updated July 1, 2010
No API key required
In the past, this widget was more difficult to setup. Facebook has simplified the process, and you no longer require an API key to setup a fan widget for your personal website. Up until recently, the widget was called a Fan Box, it’s now known as a Like Box. Read on for instructions on setting it up.
Creating the Like Box
head over to the Facebook Page that you would like to create the Fan Box for. Once you get to the page, locate the edit page link, which appears under your Page Profile image. You’ll be transferred to your admin page, on the right sidebar find the Promote with a like box link and click it.
Customizing the Widget
- Set a custom width for the widget
- Set how many connections, or fans, to display
- If you would like to display your wall stream in the widget, check the Include Stream box
- If you would like to display your find us on Facebook header, check the Include header box
Once you’re done with your settings, hit the get code button. An overlay will appear with two code options. One is an iframe and the other is FBML. FBML requires that you use the . I’d recommend going that route if you care about internet standards and validation. However, if you just want the quick answer, use the iframe.
That’s it, that’s all. This process is much easier now. Feel free to post questions below.
Print This Post
64 Comments on “How to add a Facebook Fan Page widget to your website”
admin
Hey Gary, if you send me a link to the website in question, and tell me where you want it to appear, I can help you.
July 22, 2009 » 11:35 am
I got it, thanks though! I gave up trying to code myself and went back to using sitespinner, which is what I used to make the website. Was just easier that way, although I’m a bit disappointed in myself, taking the easy way out.
July 22, 2009 » 2:59 pm
Hi, thanks for this info, it’s great. I cannot for the life of me see where this is on my new Fan page:
Creating the Fan Box
head over to the Facebook Page that you would like to create the Fan Box for. Once you get to the page, locate the “add fan box to your site” link, which appears under your Page Profile image.
(I can see this prompt on my personal page – but not on my Fan page.) Am I missing something? Many thanks!
October 2, 2009 » 3:18 pm
admin
Hi Pam,
I think the problem you’re having is that you’re trying to add a fan box for a group, not a page. Groups are different from Pages and you can’t add a fan box for a group, only a page. To view the Pages index, go to:
October 3, 2009 » 11:43 am
Hi there,
Your site is listed #1 for the keyword “facebook fans page widget width”.
I have a problem regarding the width of the widget displayed.
I set the widget width as 250 but it’s displaying the size of 952×150 px. I’m tired of searching how to customize the width to 250px width.
Even your FB widget is displaying 952×150 px on Cardeo.
Any idea how to bring it back to my control. I don’t want to use an IFRAME !
Thanks.
November 11, 2009 » 4:05 am
admin
Hi, to edit the width, generate your facebook widget code and paste it into your html file, here’s what mine looks like:
<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("55ac1a9bb954a30ff3f60d3868fedfb5");</script>
<fb:fan profile_id="6078245255" stream="1" connections="8" width="270"></fb:fan>
<div style="font-size:8px; padding-left:10px">
<a href="http://www.facebook.com/pages/North-Vancouver-BC/Cardeo-Creative/6078245255">Cardeo Creative</a> on Facebook</div>In the <fb:fan> tag, note the width attribute. Mine is set to 270, the default is 300. Simply change that attribute to whatever pixel width you want, that should solve it for you.
November 11, 2009 » 12:05 pm
Hi, this looks like really helpful info, but I’m running into the same problem as another user who doesn’t have the “Add a fan box to your site” link listed under my profile picture on our company’s Facebook fan page (it’s not a group page). I’ve done some Google searches for reasons why it might not be listed and can’t seem to find anything.
February 18, 2010 » 2:59 pm
Found it – the link is under “edit page” -> “promote your page”. The javascript code FB generated didn’t seem to require an API key.
February 18, 2010 » 4:29 pm
I want to add the icons like you have on this page for browsers to follow my client’s site on Facebook and Twitter. I like how small your images are. Do you have the code for those and how I can incorporate them into the page?
March 18, 2010 » 7:58 am
Hi Cathy, I’ll put it on my list of posts to write for the near future.
March 18, 2010 » 11:08 am
Cathy:
Unfortunately you can’t add functional links to a Twitter page. The best you can do it upload a customized background image that has text links to your client’s page on various social media sites.
For Facebook, the easiest way might have been to use FindMeOn to generate the images and code you’d need but sadly that service is closed to new sign ups at the moment. It’s easy enough to set this up manually, however.
1. add the static FBML application to your Facebook page
2. lots of people use the standard-issue FindMeOn icons, so just visit some blogs and right-click on the icon you want, select “save image” and download the image
3. upload the images to your client’s web server
4. go to the static FBML application on Facebook and click “edit” and just hand-code the HTML. It might look something like:
5. name the FBML tab whatever you want, like “Follow Us” or “Other Ways We Can Connect”
March 18, 2010 » 1:52 pm
Thanks for this. I looked all over facebook for this info. I am curious as to why this they do not make this information readily available. I appreciate it…
March 19, 2010 » 2:32 pm
no problem, thank for reading
March 19, 2010 » 4:29 pm
Hi admin just browsing the web for this info also my website is crazy i have no idea where to put the code i have html webpage but not sure if i should use ifrme or java,
if possible can you help me with this i want to put it at the bottom of my webpage.
March 26, 2010 » 6:20 am
Hi Jonathan,
just follow the instructions above and cut and paste the code that facebook supplies into your html page layout – wherever you want it to appear. no need for java, you could put it in an iframe but I wouldn’t recommend that.
March 26, 2010 » 11:06 am
Hello,
I installed the Facebook widget on my site, but it only works when you click on categories.
When you click on individual posts or the home page there is only ‘coupons on Facebook’.
I really want the widget to work on the individual posts because thats where I send all my
visitors.
Have you got any ideas?
Many thanks.
Barb
March 27, 2010 » 3:57 pm
Hi Barb, can you please post a link to website?
March 27, 2010 » 4:08 pm
The website is:-
Barb
March 28, 2010 » 3:27 am
Is that right column using sidebar.php or archives.php? If it is archives it will only be on your archive / category templates. You need to insert the Facebook code into your sidebar.php file and then include it on every template. Does that make sense?
March 28, 2010 » 10:28 am
Thankyou for your repy.
All I did was insert the code into a text widget.
I wouldn’t know where to input the code on every template.
March 29, 2010 » 5:07 am
Oh ok, there lies your problem. You need to edit the actual template files to get this to work properly. I’d suggest looking into hiring a web designer, in your area, to help you out.
March 29, 2010 » 9:40 am
izzi
Hi
Is there a way to add a facebook group widget unto a website? Same way it can be done for a fan page?
March 31, 2010 » 12:09 pm
Hi Izzi, unfortunately there isn’t a group widget. Here’s a link to all the available facebook widgets:
March 31, 2010 » 4:28 pm
Troubled
Is there anyway you could help me out, I am so frustrated trying to put this Facebook logo on my website? Much appreciated.
April 17, 2010 » 11:42 pm
Feel free to post your question(s) here and I will try to help.
April 18, 2010 » 7:36 pm
Troubled
Well, I can’t seem to even start a fan page. I am quite confused on how to put a facebook logo on my website, and allow people to click on my website so that they show they are a fan of my website on their facebook pages. Can you please start with all the steps before obtaining the API key? All I have so far is a personal facebook page, which has allowed me to share photos with family and friends. Thanks for your help.
April 18, 2010 » 8:58 pm
Hi, ok if you just want to add a facebook logo to your website and link it to your facebook page, you don’t need an api key. You can simply link it like you would any image to an external website.
The first thing you need to do is find a facebook logo you want to use on your website. There are tons of possibilities, check out some here at iconfinder.net:
Pick an icon and download it to your computer. I’ll assume you rename it to facebook.jpg. Upload the image to your images folder on your websites server. If you images folder is the in the root directory, the code should look like this:
<a href=”http://www.facebook.com/link-to-your-facebook-page” rel=”nofollow”><img src=”images/facebook.jpg” alt=”Facebook”></a></pre>
make sure you replace the above link with the actual link to your facebook page. That’s it.
April 18, 2010 » 9:45 pm
hi troubled if you want i can do it for you just view my page on to have a look if thats what you want and just mail me the page that u want the link or script to be and tell me where about you want the icon. jonathan.reddy1@gmail.com
April 19, 2010 » 1:44 am
Troubled
Thanks. However, does this mean that anyone can click this logo, and they will become a fan of my website, which will show on THEIR facebook page? I want all of my friends and family members to have the ability to go to my external website, find a facebook logo/link somewhere on the page, and be able to click on that link, then, each of them will get a link (became a fan of “my external website”) on their own individual facebook pages. Then, some average Joe that is visiting their facebook page can see that link, and they may want to visit my external website, or add my site to their facebook page. The point of this is advertising my external website on as many individual facebook pages as possible. Thanks again for your help.
April 19, 2010 » 6:43 am
I forgot to input my website name. Thanks
April 19, 2010 » 6:45 am
Thanks for offering to help Jonathan. Troubled see above :)
April 19, 2010 » 10:31 am
Thanks everyone. I will get in touch with Jonathan.
April 20, 2010 » 6:31 am
hi again troubled i have created your icons and scripts for your webpage to show facebook twitter and rss feeds now actived all you need to do now is upload the rssfeeds script to the root of your hosting account where you other pages are,
then create a folder named images and put the 3 icons in there,
then upload the new webpage i have sent you find out the name of the current home page and rename the one i mailed you to it and upload and overwrite the old 1.
thats it letme know if all goes well.
April 20, 2010 » 10:02 pm
Thanks again for doing that Jonathan. Would you be interested in writing on a guest post on Cardeo with your solution?
April 21, 2010 » 9:41 am
Dave
Hello, I was wondering how you put up the links to twitter and facebook like you did at the end of your post. I want to make it like it only displays the icon as the link like where it says “Share this post”
April 21, 2010 » 11:20 am
Hi Dave, use this line of code for facebook
<a href=" rel="nofollow">" onclick="return fbs_click()" target="_blank">img icon here</a>
use this line for twitter, if you aren’t using this with WordPress, change up the status property to be something more appropriate:
<a href=" reading <?php the_permalink(); ? rel="nofollow">" title="Click to share this post on Twitter" target="_blank">img icon here</a>
April 21, 2010 » 12:38 pm
Dave
Thanks alot. Just wondering if I can do the same thing except instead of sharing the page, I can simply link it to a fan page on facebook and the main profile for twitter. Sorry if that’s what exactly what you described above, I just do not have access to the appropriate resources at the moment so I’m just throwing my questions out there. Thanks again.
April 21, 2010 » 12:49 pm
you can definitely do that, it acts as a regular link, like this:
<a href=" src="your-icon.png" /></a>
same for twitter
<a href=" src="your-icon.png"></a>
If you are looking for some good facebook or twitter icons, check out
April 21, 2010 » 1:12 pm
ok lets try this every1 as much as we all assume this kind of work should be left to pros its not hard at all so il give ul the basics and pretty soon u guys can be building ur very own websites follow these steps below:
-step 1 download this application and icons here
all instructions are on the website it is a freeware and i use it coz its easy
-step 2 install the application
-step 3 open the application
-step 4 create a folder and put in your web pages there and create another folder named images and put in your facebook or twitter icons there
-step 5 go to your kompozer application click on file and open file it should direct you to search for your webpages.
-step 6 click on your main webpage that you want to input ur logos
-step 7 look at the bottom of ur page you will have 4 views (normal,html tags,cource,preview)lets keep life simple for now just leave it on normal.
-step 8 choose a place where you like to put ur logos by just clicking on an area u like.
-step 9 at the top of ur page the 4th menu tab it says insert click on it and click on image.
-step 10 click on the yellow folder at the end and it will direct you to find ur logo click and open (voila ur logo is almost done)
-step 11 now click on the link option at the end any click it open and insert your facebook or twitter url in that space on top
-step 12 click on advanced edit and below the facebook logo click on the below option it varies so it could be alt what ever it it just click on it
and at the bottom where it says attribute type the word target in lower caps and where vlaue is type _blank and then ok and save the page.
-step 13 we are done but we need to test it so click on browse its next to publish towards the top of the page.
Thats it it should work if not make sure you followed all the steps(sorry for so many steps but im trying to make it very simple to figure out)
play around with this application its great for a beginner.
if you need any more help drop me a mail here
jonathan.reddy1@gmail.com
enjoy……
April 21, 2010 » 2:43 pm
Diana
Still trying to figure out how facebook fanbox works I am pretty sure I have all the information I need but the fanbox is black if I was to click on the fanbox it does bring me to the correct facebook site but I am not seeing the like button or the people that have joined the site… any ideas.. really thought this was going to be easy.. LOL!
Thanks
June 2, 2010 » 2:56 pm
Check out the below link, some of the code may have changed recently
June 2, 2010 » 3:20 pm
Diana
Yeah I have done that… let me send you the link and you can see what I am trying to do with the one fanbox that is already there.
Thanks for the prompt response…
June 2, 2010 » 3:46 pm
Is it the part in the middle of the page? It shows up for me but it is weirdly cropped for some reason. are you sticking it into an iframe or something?
June 2, 2010 » 4:34 pm
Diana
does it matter if it is a group or person facebook? because if it does then I know what the issue is…
June 2, 2010 » 5:53 pm
I believe these widgets only work with Fan Pages – Unless something has changed recently, they don’t work with groups or for people’s personal profile pages
June 3, 2010 » 10:14 am
Diana
well the one I have working now is a group… the one I was trying to get it to work on was a person which they tried to make as a group… LOL! well thanks for your help
June 3, 2010 » 11:26 am
Hi
How do you change the background colour so that all the information can be seen. Thanks
June 10, 2010 » 3:25 pm
Hi Rups, what background color are you referring to? Do you have a link you can post?
June 10, 2010 » 5:19 pm
Hi
We have added the box on the website, eg: – at the bottom of the page, the third ad box but as we have a black background the colors of the added box dont show, anyway these can changed?
Thanks
June 11, 2010 » 1:26 am
try adding this line to your style sheet
.connect_widget { background-color:#fff !important; }
June 11, 2010 » 10:15 am
I am working on a website for someone and I cannot find the “add fanbox to your site” link. The customer is Studio 59 Pilates. This is the first of these I’ve done and nothing seems to work.
July 1, 2010 » 9:25 am
Let me clarify – what I am trying to do is exactly what you did above in the “follow me” box. Like the “f” and go directly to facebook page. Thanks
July 1, 2010 » 9:28 am
Hi Amy, if you’re looking to add a share button like that, include this link on the page with an icon of your choosing. I’d suggest checking out iconfinder.net
<a href=" rel="nofollow">" onclick="return fbs_click()" target="_blank">icon img here</a>
July 1, 2010 » 10:34 am
I am having a problem which seems really silly, but I can’t work it out. When I go to the promote with a like box, it comes up with Lactose Free Milk instead of my fanpage. Am I supposed to add my fanpage ID number? If so, where can I find that?
Thanks!!
July 1, 2010 » 6:01 pm
Hi Naomi, try emptying your cache, and restart the browser. Which browser are you using?
July 2, 2010 » 9:35 am
Hi, for some reason it gives me a code to someone else page. Lactose Milk page and I follow your steps pull up my page, hit edit page, click promote page with a like box and all the info comes out but to the side it’s not my page it’s this other page. How do I fix that? Thanks for all your help!
July 8, 2010 » 3:14 pm
Hi Sandra,
You should try clearing your browser cache and then try again. What browser are you using by the way?
July 8, 2010 » 5:10 pm
heres a thought how about trying to put your own facebook id instead of the system default facebook has which is the lactose milk,
July 8, 2010 » 5:30 pm
Hi guys,
I am having the exact same Lactose Milk problem – do you know where I can find my Facebook fan page ID (for mediacation) to put it in, instead of the Lactose Milk ID?
Thanks so much in advance,
Nik
July 30, 2010 » 6:40 pm
I’m sorry for just now seeing this response I am obviously not as computer savvy as I thought. I’m using firefox.
July 31, 2010 » 2:45 pm
Jonathan I’m not sure what my ID is… thanks
July 31, 2010 » 2:46 pm
Ok log on to your facebook and click on your fan page and when the url link is open copy the numbers from you browser and save it somewhere so you dont forget it,
Im talking about the link that looks something like this
July 31, 2010 » 5:05 pm
Can you post a link to your Facebook page Nik?
July 31, 2010 » 10:29 pm
Thanks for the great article. Only thing is, just how the heck to you get the fan box where you want on the website. The only place I can get it to show up is above all my other content. I’m a coding idiot, so any explanation that can be written in English would help out….a lot!
July 22, 2009 » 9:50 am