Ye Meri Life Hai – Chirag Mehta

Read recent Facebook posts & Attract Facebook fans from your own websites

July 9th, 2009

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


Facebook Fan Image

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.

Comments

71 Comments

RSS
  • Danielle says on: September 24, 2009 at 5:23 pm

     

    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!

  • Chirag Mehta says on: September 25, 2009 at 12:51 am

     

    @Career Services : Please use following code and it will generate the complete facebook fan box. I verified and it is working fine …

    <iframe scrolling="no" frameborder="0" src=" http://www.facebook.com/connect/connect.php?id=54281286743&connections=10&stream=1&quot; 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/Rochester-NY/Nazareth-College-of-Rochester-Career-Services/54281286743">Nazareth College of Rochester – Career Services</a>on Facebook </div> <div style="font-size:12px;padding-left:10px">Ack: <a href="http://www.chiragmehta.info/chirag/2009/07/09/attract-facebook-fans-from-our-own-websites/">Chirag Mehta</a></div>

  • Chirag Mehta says on: September 25, 2009 at 1:00 am

     

    @Patrica : They how were you able to add facebook logo to your page, I think you have some sort of access ..

  • Carolyn E. Withem Photography and Greeting Cards says on: October 7, 2009 at 7:27 pm

     

    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

  • Chris says on: October 9, 2009 at 1:37 am

     

    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”

  • Heather Bryanton says on: October 11, 2009 at 5:38 am

     

    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

  • Natalie says on: October 22, 2009 at 10:13 pm

     

    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

  • Chirag Mehta says on: October 22, 2009 at 11:24 pm

     

    Natalie, can you please provide the URL of your website where i can see the fan box you placed.

  • Natalie says on: October 23, 2009 at 12:01 am

     

    http://www.accionusa.org/home/support-u.s.-microfinance/get-involved.aspx , here it is

  • Chirag Mehta says on: October 23, 2009 at 2:34 am

     

    Natalie, please use following ….

    <iframe scrolling="no" frameborder="0" src=" http://www.facebook.com/connect/connect.php?id=6107914729&connections=10&stream=1&quot; 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/ACCION-USA/6107914729">ACCION USA</a>on Facebook</div> <div style="font-size:12px;padding-left:10px">Ack: <a href="http://www.chiragmehta.info/chirag/2009/07/09/attract-facebook-fans-from-our-own-websites/">Chirag Mehta</a></div>

  • Natalie says on: October 23, 2009 at 7:50 pm

     

    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.

  • Chirag Mehta says on: October 23, 2009 at 10:18 pm

     

    Natalie, I can no longer see the FB Fan Box on your site …

  • Kristie says on: October 29, 2009 at 7:14 am

     

    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

  • Chirag Mehta says on: October 30, 2009 at 3:46 am

     

    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

  • Chris says on: November 2, 2009 at 10:26 am

     

    Fanbox will scroll in IE7 byt not FF or Safari

  • Chirag Mehta says on: November 2, 2009 at 10:57 am

     

    Check the fanbox preview at dreamforce.com

  • Jessica says on: November 6, 2009 at 5:10 am

     

    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???

  • Chirag Mehta says on: November 6, 2009 at 6:55 am

     

    Yes, above code helps you to generate the FB Box. Let me know if you need help on generating FB Fan Box.

  • Brad Nelson says on: December 13, 2009 at 11:01 pm

     

    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”?

  • Brad Nelson says on: December 13, 2009 at 11:27 pm

     

    Do you need this too?
    http://www.facebook.com/home.php?#/pages/Gladde-Music-Publications/180291264662

  • Brad Nelson says on: December 13, 2009 at 11:36 pm

     

    …or should it be – http://www.facebook.com/pages/Gladde-Music-Publications/180291264662

Your email address will not be published. Required fields are marked *

*