Add a Facebook Fan Button to your Website
[Edit 03 Sep 2010 - Please also checkout my post How to Add a Facebook Like Box to Your Website]
Facebook’s Fan Box is a social widget that allows Facebook Page owners to attract and gain Facebook fans from their own website.
The Fan Box lets users:
- See how many users are already fans, and see some of their friends who are
- Read recent posts from the Page
- Become a fan with 1-click without needing to visit the Page
Before we get started you need to have a Facebook Page already setup!
To add a Facebook Fan Box (ie Fan button) to your website, login to your Facebook account.
Now that you are logged in, navigate to the Facebook Widgets page here http://www.facebook.com/facebook-widgets/index.php
Click on Fan Box,
The Fan Box Widget page will now display,
Now select whether you want to include your page’s stream in the widget, the number of fans you have and/or the Facebook logo.. you will be shown a preview of your selection,
Now select your blog’s platform.. as I am using WordPress I will select <Other>.. then copy the code that has been generated,
The next step involves pasting this code into your website.
I’m using WordPress.. so from the Dashboard, under Appearance.. click on Widgets,
Drag the text widget to your sidebar,
Now paste in the code you copied before into the text widget a click <Save>,
Your Facebook Fan Box button is now visible on your website,
Another great way to promote your business or product!
Checkout my other related posts:
- Create a Page for your Business on Facebook
- Add a Vanity URL to Your Facebook Page
- NetworkedBlogs – Bring your Blog to Facebook
Finally..
If you liked this post please register to receive The Social Media Guide’s free newsletter that’s packed with tips, guides and more!
Most of these posts are available to download for free as PDFs for registered members.
Please help spread the word by becoming a fan of The Social Media Guide on Facebook,
And following me on Twitter,
Enjoy!
Related posts:
- NetworkedBlogs – Bring your Blog to Facebook
- Create a Page for your Business on Facebook
- Import your Blog’s Feeds to Facebook
- GButts: The All-in-One Google Button
- Broadcast and Watch Live Video on Facebook with Justin.tv
- How to add Google Friend Connect to WordPress
- How to Download Facebook Photo Albums
29 Comments
Nice easy to follow instructions for the fanbox M@tt – I bet your still getting a great flow of new visitors from this article nearly a year down the line.
I have just posted instructions on how you can further integrate Social Media & Email by embedding the facebook like button in your email newsletters.
Article is certainly not as well done as yours, quick and dirty, but then again its pretty simple really.
http://emailexpert.org/adding-a-facebook-like-but…
The FB page this post refers to has changed.
Just copy and pasted this code!
FB.init("5946d7118697785370dd468eeef32716");
This worked for me. great tips.
The "like" button doesn't seem to make that much of a difference to me. We'll see though!
Hi, thank you for these articles. I've browsed all the words about facebook, but still couldn't get what exactly I want.
May i ask how to add the "add us on facebook" to the home page of a website, this button is usually together with the "follow us on twitter" and "wathc us on youtube" buttons, just like the top right "T" and "F" buttons.
Thanks a lot!
Easy to follow instructions but when I follow the steps, I don't get a preview of what it will look like (but shouldn't I?) and when I execute, what posts of my site is link reading "What Valerie Thinks is on Facebook" in the tiniest font possible with no images. the link works but the visual is nowhere near what it is supposed to be.
Any idea where I'm going wrong?
Thanks in advance.
Valerie
I thought I would have to un-fan but I just logged out of facebook then refreshed the page with my button.
but i thought i need to be a fan in order to be the admin- i tried to un-fan myself and it said i couldn't or i'd delete the whole page!
The reason it is showing "I am a fan" is because at some point previously, you have become a fan of your own site.If you want it to show up as "Become a fan" you need to "un-fan yourself" from your own site, from within Facebook.————————————————–
Matt – I thank you sincerely for this simple, yet, crazy thing I had to do to get my fan button to appear! It was nowhere on facebook instructions! You have made me very happy! Thank you!!!
I have found exactly what I need to add a fan button to my website through your directions- except that in the box under my page name it says "i am a fan" instead of "become a fan." how do i change that?
Hi MichelleFB had made some changes and I have amended this post to reflect.. Thanks again.
Hi SandraThanks for the comment.I have noticed that Facebook has made some changes.. so I have amended this post to reflect their changes.Enjoy!————————————————–
Hi Matt. Great, clear posts as are your others. Nothing like pictures to show the way!. I followed your instructions up to the bit where you add a connect widget part. FB does not display this option – it has the "Edit page/suggest to friends/promote with an add" ones, but not the "add a fanbox" one. Is it something I'm missing or just FB wierdery?
yes I agree that a huge number of people would like this option. The lack of it is just so typical of Facebook. They are totally unresponsive to the needs of their users.
Hi MichelleThanks for the comment. What is it exactly that you are having trouble with when trying to add th FB button to you site?Matt________________________
I am doing everything you say and it still shows this big facebook mess. I just want to put the become a fan button on my site. Can you help? I know it is probably something easy…I have troubleshooted (is that a word) everything I can think of! UGH.
It doesn't look as though they have a flash widget.Please see the comment below for a link to their widget page.
A great FB widget, but do they have also flash widgets like the one from twitter?I can't find it, can someone help?
Cheers for the reply, shame, I'd say alot of people would only want the button like myself.
No unfortunately.. Facebook allows three different versions,1. Button + image + text2. Button + image + text + fans3. Button + image + text + fans + streamhttp://www.facebook.com/facebook-widgets/fanbox…..————————————————–
Is there anyway to just include the button and not the image and text?
can i translate it to Myanmar?
Hi ErrolFirstly, log into Facebook.Now that you are logged into Facebook, the status bar is located along the 'very bottom' of the Facebook page.The "Applications" button (or object) is located on the very left of the status bar.. basically bottom left-hand-side of the screen.From there, just click on "Applications" then "Ads and Pages"..Hope that helps.CheersMatt————————————————–
HISorry to be a pain, but I found this broke down for me right in the beginning when you sayin the status bar click on applications without illustrating what you mean. For the life of me I cant see or know what the status bar is you refer to and cant see any applications choice anywhere.. so please the first steps are key . I find facebooks interface really seems to change so easily through choices made that it gets very confusing.
Did you ever get this figured out? My husband and I are trying to add the FB to our business web page and I, like you, do not even see any status bar or applications button. Can you tell me if you ever figured this out and if so, how? Thanks very much. Kristine G
Facebook are forever changing the way they do things.
You can generate the code for a Like Box (as it is now called), for your website, here – http://developers.facebook.com/docs/reference/plu…
Thanks for the comment!————————————————–
Thanks for this tip, i will add the fan button to my blog:)