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:
- Streams content from your Facebook Page onto your website.
- Displays your current fans.
- 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
- Configure Fanbox
- Copy code
- Paste code
Once you have installed your Facebook Fanbox, you’ll want to customize it slightly.
How to customize your Facebook Fan Box
- Change the width of the Fanbox
- Change the number of fans displayed
- Remove redundant text
- Show or hide specific elements
![[Free Webinar] Facebook for Executive Staff](http://www.johnhaydon.com/wp-content/themes/headway-2013/media/cache/images/eplus-post-18286-leaf-164.png)
![Facebook Edgerank Explained by Batman and Robin [Infographic]](http://www.johnhaydon.com/wp-content/themes/headway-2013/media/cache/images/eplus-post-18091-leaf-164.gif)
![Facebook Edgerank Explained by Batman and Robin [Infographic]](http://www.johnhaydon.com/wp-content/themes/headway-2013/media/cache/images/eplus-post-18091-leaf-540.gif)
![How To Post Smart And Successful Facebook Page Updates [Infographic]](http://www.johnhaydon.com/wp-content/themes/headway-2013/media/cache/images/eplus-post-17839-leaf-540.gif)
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.
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
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.
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.
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!
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
Nice to meet you, Neil, I think…
[...] Here’s Haydon on How to add a Facebook Page Fanbox to your website (and customize it). [...]
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
I don't think you can, David.
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?
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'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.
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.
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
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
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