How to add a Facebook Page Fanbox to your website (and customize it)

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

Rehydrate your inbox here. Send hate mail here.

Read more articles about Facebook
  • http://twitter.com/BWChicago Brian W

    As far as I can tell, there's no way to tell how many clickthroughs or fans you are getting via the fan box. Do you know of a way?

    • http://www.johnhaydon.com johnhaydon

      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.

  • http://www.issuelab.org luisemarie

    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

  • http://twitter.com/thejeffbrown Jeff Brown

    Luise,

    Could your width be set a little wide still? I noticed in John's video when he brought his within 250, the up and down scroll bar appeared.

  • http://www.issuelab.org luisemarie

    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.

    • http://www.johnhaydon.com johnhaydon

      Luise – try editing the “height” within the code.

  • JeffHurt

    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.

    • http://www.johnhaydon.com johnhaydon

      Thanks, Jeff!

  • http://www.ferreemoney.com/blog J. Neil Ferree

    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

    • http://www.johnhaydon.com johnhaydon

      Nice to meet you, Neil, I think…

  • Pingback: John Haydon: how to install a Facebook widget on your blog at WordPress Blue

  • http://www.davidpepke.com/ David Pepke

    Can you change the color of Fan Box? I would like to have it with a black background and white text as the rest of my site http://www.davidpepke.com

    • http://www.johnhaydon.com johnhaydon

      I don't think you can, David. :-(

  • http://twitter.com/marbletea Knight Berman Jr

    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!

    • http://www.johnhaydon.com johnhaydon

      Actually, customizing colors would have to do with HTML. Maybe I should include a screen shot of my HTML hack job? ;-)

  • http://twitter.com/marbletea Knight Berman Jr

    If you're interested, here's the only info I've been able to find about using CSS to change colors, etc: http://forum.developers.facebook.com/viewtopic…. … Been experimenting by looking at the code these guys reveal, and was able to adjust the colors of the box and main links fine to fit my website, but haven't been able to figure out how to specify link colors within the updates feed….

    • http://www.johnhaydon.com johnhaydon

      Knight – Thanks you so much for the link!

  • http://www.ilovewaterloo.com/ Fabricio

    I'm the admin, why I don't have the ‘Add Fan Box to your site’ option?

    • http://www.johnhaydon.com johnhaydon

      They do – under “Promote your page” in the right sidebar when you're in edit mode.

  • http://www.ilovewaterloo.com/ Fabricio

    I'm the admin, why I don't have the ‘Add Fan Box to your site’ option?

  • http://www.johnhaydon.com John Haydon

    They do – under “Promote your page” in the right sidebar when you're in edit mode.

  • jpickett1968

    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?

    • http://www.johnhaydon.com John Haydon

      It looks like you created a Facebook Profile, not a page. What this video, Jeff: http://blip.tv/file/2341364

  • http://www.3dprog.com/ Patrick Dubinski

    any luck finding the font-color and changing it to white? Here's my page, maybe you can tell me what I'm doing wrong.

    http://www.3dprog.com/skydivided

  • Oren

    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