How to add a Facebook Page Fanbox to your website (and customize it)
The Facebook Page Fanbox is a social widget that converts casual website visitors into fans of your Facebook Page. The Fanbox does this with three key features:

  1. Streams content from your Facebook Page onto your website.
  2. Displays your current fans.
  3. Enables visitors to “become a fan” of your Facebook Page with one mouse-click.

Embedding this widget on your website or blog is an absolute must – for any social media strategy. Plus it’s very easy!

How to place a Facebook Fan Box on your website or blog

  1. Configure Fanbox
  2. Copy code
  3. Paste code

Once you have installed your Facebook Fanbox, you’ll want to customize it slightly.

How to customize your Facebook Fan Box

  1. Change the width of the Fanbox
  2. Change the number of fans displayed
  3. Remove redundant text
  4. Show or hide specific elements

What else can we do with a Fanbox?

Comments

    1. If you want to count the number of clickthroughs from your website to your Facebook Page, use a .png image of the fanbox with bit.ly as the link. You'll loose the interactive nature of the Fanbox, but you'll gain the stats.

  1. Good question, Brian. I don't know of a way to trace new fans specifically to the facebook fan box. We just recently posted the box on our blog and have been averaging an additional 2-3 new fans a week. It's not much, but since our blog is the only venue where the fan box was posted, I think we can safely say that it contributes to new fans.

    Quick question: Can anybody tell me why the box is cut off and won't fully display on the bottom? http://issuelabfootnotes.blogspot.com/ On the right hand side.

    Thanks!
    Luise

  2. Jeff – thanks for your response. I don't think that's it, because the scroll bar only applies to the stream section of the fan box. Our box seems to fit completely within our column width-wise, but is just cut off at the bottom.

  3. As always, great stuff from you John! Thanks for the helpful tips and videos. Hat tips to you for making it simple, relevant and easy to apply.

  4. This is the 3rd tracking diddy I have you now John, albeit I pulled a [ready,fire,aim] on your buddy Grant's site, but the end result was worth it. Now I got you on Twitter, YT and this here kick butt blog site by way of your Headway video – good stuff amigo. ~ Neil Ferree

  5. I think I saw something on Facebook saying that you COULD customize the colors via CSS, but I'm not sure how to do that exactly. Actually, that's what I was trying to find when I found this page. Thanks for the great info!

  6. This is lame, but showing my age – how do I create my fan page? Somehow I created a page for my organization just like an individual would. Now I understand this should be a Fan Page? I'm at facebook.com/childrenscare. I'd like to create a Fan Page and keep the URL. Possible?

  7. Hello.
    im using thesis theme and i want to adjust the fan box to be in the same line as my nav menu and my header.
    how can i edit (padding) the fan box ?
    thanks,
    Oren