Social Media Guide helping you connect to Social Networks: Twitter, Facebook, Google, LinkedIn, YouTube using social media

Add a Facebook Fan Button to your Website

Facebook, Page, Social Media — By Matthew Tommasi on August 6, 2009 at 6:51 pm


 

fan button

Facebook’s Fan Box is a social widget that allows Facebook Page owners to attract and gain Facebook fans from their own website.

The Fan Box lets users:

  • See how many users are already fans, and see some of their friends who are
  • Read recent posts from the Page
  • Become a fan with 1-click without needing to visit the Page

Before we get started you need to have a Facebook Page already setup!

To add a Facebook Fan Box (ie Fan button) to your website, login to your Facebook account.

Now that you are logged in, navigate to the Facebook Widgets page here http://www.facebook.com/facebook-widgets/index.php

Click on Fan Box,

The Fan Box Widget page will now display,

Now select whether you want to include your page’s stream in the widget, the number of fans you have and/or the Facebook logo.. you will be shown a preview of your selection,

Now select your blog’s platform.. as I am using WordPress I will select <Other>.. then copy the code that has been generated,

The next step involves pasting this code into your website.

I’m using WordPress.. so from the Dashboard, under Appearance..  click on Widgets,

widgets

Drag the text widget to your sidebar,

test widget

Now paste in the code you copied before into the text widget a click <Save>,

text widget

Your Facebook Fan Box button is now visible on your website,

fanbox

Another great way to promote your business or product!

become a fan

Checkout my other related posts:

Finally..

If you liked this post please register to receive The Social Media Guide’s free newsletter that’s packed with tips, guides and more!

Most of these posts are available to download for free as PDFs for registered members.

Please help spread the word by becoming a fan of The Social Media Guide on Facebook,

And following me on Twitter,

Enjoy!


 
 

Tags: Blog, facebook, guide, how, instructions, linkedin, setup
  • sandra
    Hi Matt. Great, clear posts as are your others. Nothing like pictures to show the way!. I followed your instructions up to the bit where you add a connect widget part. FB does not display this option - it has the "Edit page/suggest to friends/promote with an add" ones, but not the "add a fanbox" one. Is it something I'm missing or just FB wierdery?
  • Hi Sandra

    Thanks for the comment.

    I have noticed that Facebook has made some changes.. so I have amended this
    post to reflect their changes.

    Enjoy!


    --------------------------------------------------
  • Michelle
    I am doing everything you say and it still shows this big facebook mess. I just want to put the become a fan button on my site. Can you help? I know it is probably something easy...I have troubleshooted (is that a word) everything I can think of!
    UGH.
  • Hi Michelle

    FB had made some changes and I have amended this post to reflect..

    Thanks again.
  • Hi Michelle

    Thanks for the comment. What is it exactly that you are having trouble with when trying to add th FB button to you site?

    Matt

    ________________________
  • A great FB widget, but do they have also flash widgets like the one from twitter?
    I can't find it, can someone help?
  • It doesn't look as though they have a flash widget.

    Please see the comment below for a link to their widget page.
  • Keith
    Is there anyway to just include the button and not the image and text?
  • No unfortunately.. Facebook allows three different versions,

    1. Button + image + text
    2. Button + image + text + fans
    3. Button + image + text + fans + stream

    http://www.facebook.com/facebook-widgets/fanbox...



    --------------------------------------------------
  • lanirg
    I have found exactly what I need to add a fan button to my website through your directions- except that in the box under my page name it says "i am a fan" instead of "become a fan." how do i change that?
  • The reason it is showing "I am a fan" is because at some point previously,
    you have become a fan of your own site.

    If you want it to show up as "Become a fan" you need to "un-fan yourself"
    from your own site, from within Facebook.




    --------------------------------------------------
  • lanirg
    but i thought i need to be a fan in order to be the admin- i tried to un-fan myself and it said i couldn't or i'd delete the whole page!
  • jDeppen
    I thought I would have to un-fan but I just logged out of facebook then refreshed the page with my button.
  • Keith
    Cheers for the reply, shame, I'd say alot of people would only want the button like myself.
  • yes I agree that a huge number of people would like this option. The lack of it is just so typical of Facebook. They are totally unresponsive to the needs of their users.
  • Errol Larkan
    HI

    Sorry to be a pain, but I found this broke down for me right in the beginning when you say
    in the status bar click on applications without illustrating what you mean. For the life of me I cant see or know what the status bar is you refer to and cant see any applications choice anywhere.. so please the first steps are key . I find facebooks interface really seems to change so easily through choices made that it gets very confusing.
  • Hi Errol

    Firstly, log into Facebook.

    Now that you are logged into Facebook, the status bar is located along the
    'very bottom' of the Facebook page.

    The "Applications" button (or object) is located on the very left of the
    status bar.. basically bottom left-hand-side of the screen.

    From there, just click on "Applications" then "Ads and Pages"..

    Hope that helps.

    Cheers
    Matt


    --------------------------------------------------
  • Thanks for this tip, i will add the fan button to my blog:)
  • Thanks for the comment!



    --------------------------------------------------
blog comments powered by Disqus
Copy Protected by Chetan's WP-CopyProtect.