Update from Facebook Team …
As a Facebook Page owner, you can implement the Fan Box widget on your own website to gain more fans and share your Facebook updates. Implementing requires pasting just 4 lines of code.The widget currently has 3 components: “Button”, “Stream” (optional), and “Fans List” (optional). The widget can fit in a space as small as 200 x 64 (just the “button”) or offer a richer experience including recent posts and other fans at a full 600 x 544 pixels (width adjustable from 200 – 600 pixels).
Some live examples on each Page’s own website for businesses include Coca-Cola, Blackberry, Tide, Herbal Essences, and Threadless.
About Facebook Fan Box
The Facebook Fan Box is a social widget(just 5-10 lines of HTML Code) that allows Facebook PAGE owners(i.e., we) to attract and gain Facebook fans from their own website(i.e., ChiragMehta.info)
The Fan Box lets users:
• See how many users are already fans, and see some of their friends who are
• Read recent posts by from the Page
• Become a fan with 1-click without needing to visit the Page
Code
UPDATE : Use Iframe, for easier access to Fan Box.
<iframe scrolling="no" frameborder="0"
src="http://www.facebook.com/connect/connect.php?id=FACEBOOK_PROFILE_ID&connections=10&stream=1" allowtransparency="true"
style="border: none; width: 300px; height:550px;">
</iframe>
OR you can Copy following code to any page on your site where you want to display a Fan Box.
<script src=”http://www.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php” type=”text/javascript”></script><script type=”text/javascript”>FB.init(“API_KEY”, “”);</script><fb:fan profile_id=”YOUR_PAGE_ID”stram=”1″ connections=”10″
width=”300″></fb:fan><div style=”font-size:8px; padding-left:10px”><a href=”VANITY_URL”>PAGE_NAME</a> on Facebook
Preview
Customizing the Fan Box
The Fan Box gets rendered by the fb:fan XFBML tag. You can customize the Fan Box by changing the defaults for the following attributes in the fb:fan tag:
profile_id: The ID of the Page associated with the Fan Box.
stream: Set to 1 to display stream stories in the Fan Box or 0 to hide stream stories.
connections: The number of fans to display in the Fan Box. Specifying 0 hides the list of fans in the Fan Box.
width: The width of the Fan Box in pixels.
height: The height of the Fan Box in pixels.
Bugs (Discovered as per my Implementation)
Above code works perfectly fine in Mozilla Firefox. The fan box gets rendered properly. But the same code doesn’t render a fan box in IE,chrome and not even in Safari.
Sorry about the double post above… one point of clarification: when you are logged into facebook the icon appears as it should, but when you are not logged in and just go to our website that is where the icon does not appear correctly. Thank you for any assistance you can provide!
@Career Services : Please use following code and it will generate the complete facebook fan box. I verified and it is working fine …
@Patrica : They how were you able to add facebook logo to your page, I think you have some sort of access ..
I just wanted to have a place where people could click and become a Fan from my Personal Page about Carolyn E. Withem Photog….and/ or on my actual fan page….But I don’t understand where to past it…I have tried to paste in regular comment section, doesn’t work and there isn’t anywhere to paste it in my Info section….So I don’t get it….Help please?…….FB.init(“fd5a3bda6f1c84465770ca1558b6ae71”);Carolyn E. Withem Photography and Greeting Cards on Facebook
I have a FB fanbox on the home page. It displays fine BUT the stream will not scroll in Firefox or Safari. It will scroll in IE7 without any problems. The code has stream=”1″. And I haven’t found any way to resolve this “bug”
I too have tried to post a fan box on my FaceBook page but it will not do anything. Can you help, please?
http://www.facebook.com/pages/1-800-PaparaZZi/175648079438?ref=nf
Hi I am trying to add the fanbox to my website but only half the box shows up there isn’t a bottom and I can’t see my fans or anything could you please please please help me. I am puting the iframe code into the HTML but its not working ? http://www.facebook.com/pages/ACCION-USA/6107914729
Natalie, can you please provide the URL of your website where i can see the fan box you placed.
http://www.accionusa.org/home/support-u.s.-microfinance/get-involved.aspx , here it is
Natalie, please use following ….
Thanks Chigra the box is still small and doesn’t show allt he information, but I will keep trying to work it out thanks for your time.
Natalie, I can no longer see the FB Fan Box on your site …
Hi I am new to creating a fan page and am trying to get a FB fan box to place on my Facebook Page. Is that possible? I have a myspace but hardly ever get on there. I guess if someone’s offering free help. I will take what ever I can get. I have a facebook, myspace and a twitter page. Thanks,Kristie
Hi Kristie, You can place a FB Fan Box on your own web page. On facebook public page already there is a fan box, no need to place a fan box on facebook page
Fanbox will scroll in IE7 byt not FF or Safari
Check the fanbox preview at dreamforce.com
I can not figure out how to put the fan box on the page, i do not want to link it to another website, can you please help???
Yes, above code helps you to generate the FB Box. Let me know if you need help on generating FB Fan Box.
Maybe you could help me, too? What is the code I need to place a Fan page on the bottom- left directly below “Oliver Wendell Holmes”?
Do you need this too?
http://www.facebook.com/home.php?#/pages/Gladde-Music-Publications/180291264662
…or should it be – http://www.facebook.com/pages/Gladde-Music-Publications/180291264662