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.
Thanks for the post, it helped me a lot to implement this widget to my website. Cheers.
Is there a way to post this widget in an email versus a website? Thanks, B.
Please Help. I have tried numerous times to add the fan box to my site. It only adds a small little group of words that just link right back to my fan page. I’ve followed the instructions and wasn’t sure at first where to copy the html code. Then I tried adding an FTML application and pasting it there, and then displaying it on my page. It doesn’t work. It just shows those few words with a link right back to the home page. Is it a problem that my personal FB page has the same e-mail as my fan page? Please help. I don’t even see a buttion on my fan page where someone can click to get added. SedonaGicleeStudiosLLC is the name of my fan page. Thanks! Jodi
Please share complete URL of your FB Public page. Then I can help you to rebuild your facebook fan box ..
Below URL doesn’t works …
http://www.facebook.com/pages/SedonaGicleeStudiosLLC
http://www.facebook.com/home.php?#/pages/Sedona-AZ/Sedona-Giclee-Studios-LLC/111033966139
Does this link work?
Please use following code .. it works …
Simply paste above code on any of your website pages. No need to use any FTML Box. Its a HTML code which can be inserted in any HTML/JSP/PHP/ASP … or any web page …
For eg., I inserted a Dreamforce Fan Box @ http://www.salesforce.com/dreamforce/DF09/site/
Care to help a sister out? I am running IE and can’t seem to get this to work.
FB: http://www.facebook.com/business/dashboard/#/pages/Directors-of-Volunteer-Programs-Association/108207742999
Yes, why not .. anything for new sister .. 🙂
Simply paste above code on any of your website pages. No need to use any FTML Box. Its a HTML code which can be inserted in any HTML/JSP/PHP/ASP … or any web page …
help! i saw your postiing and was hoping your good nature and unselfish ways would do one last good deed and help me out. how the heck do you do this? my page is the ibf media page.
I CAN NOT GET THIS TO WORK. I CAN FIGURE OUT WHERE TO PASTE THE CODE.
Thanks, I will surely help you out to figure Facebook Fan Box.
Shalini – Do you have a public page created on Facebok?
yes, i do have a public page under ibf media (not the group which i’m going to delete). btw, i was rereading some of the directions, and am not looking to link it to my website as of yet. i will let the web designer people do that at a later time.
Ok, can you please provide me the Facebook URL of your public page. I will create the code for you which will enable you to see Facebook FB on your website!
@MYNNYECHOCOLATES.COM : Help me with your Public FB Page URL and then I can provide you the code which will generate FB Fan Box
http://www.facebook.com/home.php#/pages/IBF-Media/109573899287?ref=search
Hey Shalini,
Use following piece of code .. Just copy this code and your are all done for having a jazzy fan box 🙂
I cannot figure out where (specifically) to place the html the wizard generated for my FB. Or my page is REALLY jacked up. HELP ME!
Shelly, here you go with your FB code …
Simply paste above code on any of your website pages. No need to use any FTML Box. Its a HTML code which can be inserted in any HTML/JSP/PHP/ASP … or any web page …
Chirag, I am using iWeb09 to build my site. iWeb09 has an HTML Snippet for adding widgets, which I thought would make my life simple. But, when I paste the FanSite code into the widget, I get nothing but a small amount of text at the top of the box. Have you seen this before? Am I missing a step? Any help is appreciated.
Smiley
Can you please share me your facebook pubic page URL, I can then help you with HTML code …
Here is the URL that appears when I visit my fan page:
http://www.facebook.com/pages/Waxahachie-TX/After-Hours-Improv-Theater/137626108848
When you say, public page URL, is this what you are looking for?
Ismae, here is FB Fan box code for your site ….
<iframe scrolling="no" frameborder="0"src="http://www.facebook.com/connect/connect.php?id=137626108848&connections=10&stream=1"allowtransparency="true" style="border: none; width: 300px; height:550px;"></iframe><div style="font-size:12px; padding-left:10px"> <a href="http://www.facebook.com/pages/Waxahachie-TX/After-Hours-Improv-Theater/137626108848">After Hours Improv Theater</a>on Facebook </div><div style="font-size:12px; padding-left:10px">Ack:<a href="https://www.chiragmehta.info/chirag/2009/07/09/attract-facebook-fans-from-our-own-websites/">Chirag Mehta</a> </div>
Thanks Chirag! Works great. So now html magician…Can the Fan box go horizontal instead of vertical? If not, no worries. Just wondering.
Great, Its my pleasure!
Sorry, but the Fan Box is a predefined component of Facebook and currently there is no attribute defined by FB, which will allow us to render it horizontally instead of Vertical.
Hey, anyhow can you please share the link of the page where you added the FB Fan Box
Hi Chirag – Seems like you should be on the payroll…!! If you have the time or patience could you possible give me some guidance as well? I’m really quite tech illiterate and am not having much luck at all. Thanks for all your help.
http://www.facebook.com/terri.fitton?ref=name#/pages/CopperMoon-Gifts-Indulgences/97404645869
Hi Chirag, Me again. I think I’m getting mixed up. I already have the Fan Box on my business page. What I was trying to do was also add it to my personal page. Is that possible?
I keep trying and keep getting stuck.. the words appear so i must be missing something. I would appreciate the help 😉 Thanks darlin
http://www.facebook.com/pages/Orlando-FL/The-D-Tales/109613062223?
ref=ts&__a=1&nctr[id]=ad3167e5c12ed99e6009219651957e01&
amp;nctr[nid]=fc19a86d95c7ee451dd3925ed76d2817&
nctr[ct]=1250189067155&_fb_iframe_path=%2Fpages%2FThe-D-Tales%2F109613062223
Terri,
Yes I am on payroll. -:)
But after receiving so many requests to create fan box, this fan box code creation is now like cream on an ice. Earlier I had to put in lot of efforts to understand and write this article. Now folks like you are reaping and enjoying the fruits.
Here you go with your FB Fan Box code…
Simply paste above code on any of your website pages. No need to use any FTML Box. It’s HTML code which can be inserted in any HTML/JSP/PHP/ASP … or any web page …
I can not figure out how to paste the code into my web page given that I cannot access the code except through page>view source which, of course will let you see the code, but not change it. I am on Facebook alone and I can get the code from the “add fanbook page” but cannot reach the code for the page so I can place it there. I think that is a problem many people have had as I’ve read “where do I put the code” too many times. Thanks for any help that will clarify this. http://www.facebook.com/business/dashboard/#/pages/Chambersburg-PA/Franklin-County-Historical-Society-Kittochtinny/117984406308
I’m jumping on this bandwagon too! Please help… i’ve been trying for sooooooooo long to paste it in different places and I can’t seem to get it right… I also am trying to figure ou tif there’s a way to connect photo albums instead of uploading the same images twice from my FB profile page to my FB Fan Page… please help… my FB ID is http://www.facebook.com/home.php#/profile.php?id=1366568020&ref=profile (at least that’s what I copied from my url) “Dara Monifah”
I’m having the same problem FB Fan Box code will not load correctly. THANKS…iframe scrolling=”no” frameborder=”0″ src=”http://www.facebook.com/connect/connect.php?id=76135543422&connections=10&stream=1″
allowtransparency=”true” style=”border: none; width: 300px; height: 550px;”>
Social Denim Lake Charles LA on Facebook
where ON FACEBOOK do you paste this code?
April, your FB page is not public. First of all make it public.
http://www.facebook.com/pages/Orlando-FL/The-D-Tales/109613062223
Once done, let me know I will provide you with FB Fan Box Code
Hey Ann,
Just reach out to your web host or navigate to the location where your website pages are actually stored. Now you need to update either of those website pages to add the HTML code for FB Fan Box.
Hi, either I’m retarded or I’m not doing anything right. I was able to add the “Find us on Facebook” on my site, but even after having copied and pasted your code from above, what I see is my personal wall…not the one of my business. Can you please help me out here??? Thanks in advance
Btw I posted my website but not my FB page…which I just did above but will copy & paste again. Thanks Chirag
http://www.facebook.com/pages/BellaMini-Parties/118983264874
Hi Chirag: I see so much that I should be able to figure this out… but I can’t. My website is: http://www.m3mall.biz, and the facebook page is uner M3 Mall. I’ve been reading posts and copying the html code and I’m not getting it to work. Help?
What I am doing is – logged in as admin for the FB page, M3 Mall, then I click the button Fan Box, number 1 is Select your page, and it has one option. number 2 is Preview (looks great), 3 is a google blog a type pad or other. I click on other: I copy that text and put it on my home page. It’s a text box that’s over the rest of the items, how do you attach it to the facebook logo? my email is: melisa@m3mall.biz Thank you so much. I can’t believe how confused this has me… but I see I’m not alone.
When I past in the link and then open it on the website my personal e-mail appearsin the e-mail box. How can I avoid that?
Chirag, I am having trouble finding out where to paste the html code for the fanbox. I understand that you have given individuals the location of where to post the code but I am not understanding still. I have a music page called The Keith Beatty. I am trying to generate a fanbox for that page but the problem is where to paste the code. I appreciate any help that you can provide. Specifically where to paste the code, specifically.Thanks in advance.
Keith
Hey Melisa, here i go with FB code for your M3 Mall page ..
Hey Mirna, here i go with FB HTML code for your BellaMini Parties page ..
Hey Keith,
Just reach out to your web host or navigate to the location where your website pages are actually stored. Now you need to update either of those website pages to add the HTML code for FB Fan Box.
Hey barbara, what are you trying to post i.e, what code actually you are using …
I’m using the code provided by facebook for the badge which I cut and pasted
ok then what is not working and what you are trying to do, can you explain in more detail ..
Chirag – I copied and pasted the fan box code generated for me by facebook to insert on our website, but our icon will not show up… we get the standard blue/white figure icon instead. Is there something specific I need to do to allow our icon to appear with the fan box? Our page url is: http://www.facebook.com/pages/Rochester-NY/Nazareth-College-of-Rochester-Career-Services/54281286743?ref=search&sid=714939552.2273071203..1
Hi Chirag-
I contaced my web host- Vista Print but they say that the sitebuilder doesn’t support html coding?? I’m trying to figure out a work around (i.e. adding a link to the web page- I wanted to then add the FB icon but not sure where to locate a FB icon with the right dpi…)Can you help?
Chirag – I’ve added the fb fan box to our website (for my office’s fb page), but for some reason it isn’t displaying our icon (instead we get the standard blue/white profile icon). Is there something I need to do to display the icon? Our page’s url is: http://www.facebook.com/pages/Rochester-NY/Nazareth-College-of-Rochester-Career-Services/54281286743?ref=search&sid=714939552.2273071203..1