How to Add a Facebook Fan (Like) Box to your Website

by Diana Urban on March 29, 2010

Facebook Like Box
email

If you have a Facebook fan page for your website or blog, you might want to consider adding a fan box to your website. The fan box is a widget that allows fan page admins to embed a widget featuring their fan page fans and page activity on their website.

One reason this fan box is so valuable is because visitors to your website can become a fan of your Facebook page without ever having to leave your site. This will allow you to communicate with these visitors after they leave your site via status updates and posts that will appear in their Facebook newsfeeds. And since most Facebook users check their newsfeed on a daily or hourly basis, this is extremely valuable and FREE advertising.

Guide to installing a fan box on your website or blog

1. Navigate to settings. On your Facebook page, click “Edit Settings” below the profile image.

2. Navigate to fan box. Scroll down. On the right-hand column, click on the link “Promote with a Fan Box”.

Promote your Facebook Fan Page

3. Customize your fan box. Your page will already be selected in the drop-down menu. Here, you will have several options for what you would like to appear on your fan badge. You can choose any combination of the following elements:

Stream

Fan Box Stream

Fans

Fan Box Facebook Fans

Facebook logo

Fan Box Facebook Logo

4. Get the widget or code. If you have a TypePad or Blogger blog, you can automatically install the fan box as a widget, and that’s it! For everyone else, including WordPress blogs, you’ll need to manually install code. Click “Other” to generate a text box containing your code, and proceed to step 5.

Add Fan Box Widget

5. Install the code. If you have a WordPress blog, navigate to your widgets panel. Install the “Text” widget (arbitrary text or HTML), and copy in your fan box HTML code.

6. Customize the code. If your fan box doesn’t fit into your sidebar by default, you’ll have to tweak the code a bit. If you look at my fan box to the right, I’ve customized the fan box so that it’s not as wide as the default size, and only displays six fans instead of ten. In the code, you’ll want to edit the following:

  • connections=”10″
  • width=”300″

I’ve also added a height=”270” attribute to keep the bottom from getting cut off.

If you have any questions on how to install a fan box on your website or blog, post them in the comments below.

Related Posts:

Article by

Diana Urban (formerly Diana Freedman) is the founder of ustandout.com, a guide for making your web presence stand out using social media and other web marketing tactics. Diana works in advertising as a User Experience Manager at HubSpot in Boston. Start socializing with Diana by following her on Twitter.


Like this post? Want more from U Stand Out? Subscribe via RSS to get updated with all the latest content.


fb-ebook-cta-bottom
  • http://firstpagegoogleresults.com/ website seo optimization

    allows you to attract and gain fans from your own blog/website. Before you add a Fan Box to your …

  • Pingback: 5 Reasons to Lower Your Blog's Bounce Rate | U Stand Out: Social Media

  • J_boy_on

    i am not gettin anything like promote with a fan box. Need Help asap

  • http://www.inkatechnology.co.uk Facebook Applications

    I’m having trouble with this. I’ve tried several times to add the Facebook badge to my wordpress blog. But when I click on the badge it takes me to an error message on Facebook rather than the fan page. Any suggestions?

  • Imagenedthe

    Great tut,tnx,but how to check is visitor on my website is fan of my page on fb?
    Tnx

  • Clara Samuelx

    GREAT! I have been looking HIGH and low for a link that directs you to the like box..! IDK why I don’t have them under my fan page like everyone else does and so am searching for this direct links.

    THANK YOU!

  • http://twitter.com/JacktheDogUS VictorBrodt

    absolutely great! thanks
    Wish for you what every good dog already sees, the Best!

  • Ljstrling

    i have the code but i cannot paste it onto my website, what am i doing wrong?

  • Divinelyhis

    how can i do what you did on this page underneath the “share and enjoy!” where the icons are 1/2 way hidden and peep out when cursor is rolled over it? that is so cool

  • guest

    this has to be for the old version because these instructions dont match facebook

  • http://frwiends.com/facebook Frwiends Viral fans Pages

    Thanks for the valuable guidance. You are saving me hours of work.

  • Nola_nouza

    thanks 4 ur info :)

    • Ss

      ediot

  • Pingback: How to Make Social Media New Years Resolutions You Can Keep | U Stand Out: Social Media

Previous post:

Next post: