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?

Posted August 25, 2009
  • 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?
  • It looks like you created a Facebook Profile, not a page. What this video, Jeff: http://blip.tv/file/2341364
  • I'm the admin, why I don't have the ‘Add Fan Box to your site’ option?
  • They do - under "Promote your page" in the right sidebar when you're in edit mode.
  • 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....
  • Knight - Thanks you so much for the link!
  • 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!
  • Actually, customizing colors would have to do with HTML. Maybe I should include a screen shot of my HTML hack job? ;-)
  • 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.
  • I don't think you can, David. :-(
  • Guest
    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
  • Nice to meet you, Neil, I think...
  • 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.
  • Thanks, Jeff!
  • 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.
  • Luise - try editing the "height" within the code.
  • 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.
  • 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
  • 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?
  • 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.
blog comments powered by Disqus