(Anti) Social Development

Affordable WordPress Websites - Kim Woodbridge

How to Add the Facebook Fan Page Widget to Your Website

by

Sea Fan (by Fr Antunes)

Facebook has a pretty cool fan page widget that you can add to your website.

The widget is fairly easy to install and can include photos of your page’s fans, a stream of articles or both.

The downside to this widget, like any widget, is that is can slow down the loading of your page and works better in some browsers than in others.

 

  1. Login to Facebook and go to your Fan Page
  2. Click on the link that says ‘Add Fan Box to Your Site’
    fanbox
  3. You will then be on the page where you can customize the fan box. You can have streams (the postings on the fan page), fans, or both. Since my fan page stream mostly contains the same articles that are on my website, I chose to only display the fans. The right side of the page will give you a preview of what the fan box will look like.
    custom
  4. The settings provide code specific to Blogger and Typepad but if you have any other type of website, including WordPress, select other. You will be given a block of code that you will want to copy (highlight the code box and use Ctrl+C on your keyboard).
  5. Those of us using WordPress will probably want to place the code in a sidebar widget.
    widget
  6. The code will contain a variety of options that can be edited. The facebook developers wiki contains the elements that can be modified. For example, the default width was too wide for the bottom of my sidebar so I made that smaller. You can also change how many fans are displayed, the height and the number of streams (posts on the fan page).

    7. fan

Do you think using this widget will get more people to fan your facebook page? Or do you think it’s unnecessary sidebar bling?

photo credit: Fr Antunes



Keep Reading:
New Facebook Custom Tab for (Anti) Social Development that Uses WordPress
Creative Ways to Use Facebook Business Pages - PC World Article
How to Set Up Free Shared SSL with Hostgator
2 Ways to Like Add Facebook Like to Your WordPress Site


Comments

  1. Dot says

    Kim, you’ve just got to stop posting so much great stuff about WordPress. I just don’t have the time to implement all the stuff you write about, or even read them. My Favorites is filling up with bookmarks to (Anti) Socal Development.!

    :-D

  2. Barbara Swafford says

    Hi Kim,

    This is great information. Now I just have to learn how to set up a fan page on Facebook. and I see in your related posts, you’ve written about that, too.

    Your site is like one stop shopping. Love it!
    .-= Barbara Swafford´s last blog ..Words For Sale =-.

    • Kim Woodbridge says

      Hi Barbara – Thanks! I’ve covered a lot about Facebook fan pages so if you just go to that category in my sidebar, you should find most of the info that you need.

  5. Michelle says

    Hi Kim,
    Thanks as always for the great posts.

    I opted not to do the actual fanpage widget on my site – just to keep things looking consistent as I have Social Media Icons for a number of my locations.

    But I have used this on another site and it did work really well (as easily as you mention above!)

    Michelle @mmangen
    .-= Michelle´s last blog ..How uncomfortable are you? =-.

    • Kim Woodbridge says

      Hi Michelle – Thanks. I put the widget on my site to write the article and was planning on removing it after a couple of weeks. I got 20 new fans in one day since I added it! So, for now, I think I’m going to leave it and see what happens.

    • Kim Woodbridge says

      Hi Jenn – Unfortunately, I don’t have any experience with myspace so I’m not sure if the widget will work there or not. It does contain javascript, which they might not allow. For example, I can’t add code to a facebook fan page that contains javascript either.

      • jenn says

        thanks anyway Kim!
        it’s true that myspace does not allow javascript. it seems like there is a way, but it also seems very complicated. if i figure it out, i’ll post it here.

  9. Maciek says

    Kim,
    Thank you for the great tutorials. I have a quick question:

    Is it possible to add this fan page widget in the body of an html email with iContact for example, and have it appear once the email is sent? I can get it to appear in the body of the email in the preview, but once the email is sent, the widget does not show up in the email.

    Thanks in advance.

    • Kim Woodbridge says

      Hi Maciek – Have you tried it in different email programs?

      I don’t know the answer to this but the widget does use javascript and the email program may not want to run it due to security issues.

      I think the best thing to do is ask the newsletter people.

  10. Indian Girls Club says

    Hi there,

    Your site is listed #2 for the keyword “facebook fans page widget width” and cardeo 1.

    I have a problem regarding the width of the widget displayed.

    I set the widget width as 250 but it’s displaying the size of 952×150 px. I’m tired of searching how to customize the width to 250px width.

    Even your FB widget is displaying 952×150 px on Kimwoodbridge.

    Any idea how to bring it back to my control. I don’t want to use an IFRAME !

    Thanks.
    .-= Indian Girls Club´s last blog ..Shocking 180 Desi Girls Smoking Pics =-.

  11. damian says

    what if I cannot find the add “‘Add Fan Box to Your Site” option listed in step 2? I have looked for it where you show it and all over but cannot find it?

    Thanks for any help
    D

    • Kim Woodbridge says

      Hi Damian – Looks like once again Facebook has moved a setting. Go to Edit Page instead. On the right hand side is a section called ‘Promote Your Page’. The 4th one should say “Promote with a fan page box’.

      • Trent says

        Hi Kim,

        I can’t find the add “Add Fan Box to your site” option. I saw the previous guy and your response but it looks like it may have been moved again. Any help would be greatly appreciated.

        Thanks,

        Trent

        • Kim Woodbridge says

          Hi Trent – If you go to Edit Page it is now on the middle right and says Promote with a Like Box.

          Things have moved around since they changed “Fan” to “Like”

  12. Ari Herzog says

    Running into a Facebook-Wordpress snafu, maybe you can suggest what’s going on with my site.

    The developer wiki — http://wiki.developers.facebook.com/index.php/Fan_Box — indicates two scripts: the default script and a smaller one-line script for sites already running Facebook Connect and querying those javascripts.

    I am running FB Connect for comments.

    So, if I use the default script as my widget, then the fan box only appears on http://ariwriter.com but not on individual posts and pages. If I substitute that widget with the smaller one-line script, then the fan box only appears on posts and pages but not the central landing page.

    Ideas? How can it be on everything? If I insert both scripts into the widget panel, then the homepage sees two fan boxes.
    .-= Ari Herzog´s last blog ..How Electromyography May Change Your Life =-.

    • Kim Woodbridge says

      Hi Ari – As I have no experience with Facebook connect, I don’t think I can answer the question without doing testing and research. I did, however, have a couple of thoughts.

      1. Did you try deactivating all of the other plugins except for Facebook connect? Perhaps there is a javascript conflict … Except, it seems like this would be an all or nothing problem.
      2. Ok – I just looked at your site. The widget works on single posts pages where Facebook connect is actually displayed. That page is loading the scripts needed for the widget to work but the other pages aren’t. Is there a way to load the libraries on all pages?

      • Ari Herzog says

        Beats the heck out of me. I suppose if the choice is posts and pages, or posts and pages and the homepage, I’d rather have the latter but will take the former. If someone’s commenting, they’ll see the box. If they’re not commenting, they won’t. I imagine more people are apt to click the box if they comment.
        .-= Ari Herzog´s last blog ..How Electromyography May Change Your Life =-.

        • Kim Woodbridge says

          Hi Ari – It’s something I can add to “things to research when I have time list”. Did you try deactivating other plugins? This could be hard to try to duplicate without using all of the same plugins and the same theme.

          I would go for having it on posts and pages rather than the homepage. If your visitors are like mine, they are usually coming to an individual post or looking for specific information.

  13. ERIC says

    I HAVE A PERSONAL FACEBOOK PAGE AS WELL AS A FAN PAGE. HOW CAN I ADD MY FACEBOOK FAN PAGE WIDGET FROM MY FAN PAGE TO THE LEFT SIDEBAR OF MY PERSONAL FACEBOOK PAGE? IS THIS POSSIBLE TO DO? I WAS THINKING THIS WOULD ALLOW ME TO ADVERTISE MY FAN PAGE TO ANYBODY WHO COMES TO MY PERSONAL PAGE. ANY SUGGESTIONS AND COMMENTS AND IDEAS WOULD BE APPRECIATED. THANK YOU.

    • Kim Woodbridge says

      There must be something on the single post template that is conflicting with the widget that isn’t happening on the category template. I took a quick look but nothing jumped out at me.

  18. Miria says

    How do I find my fan page in face book. I typed it in the search box and all these headings came up to join their groups.
    There was no link that says ‘Add Fan Box to Your Site’

    I read some of your comments and there is one there where Damien is also looking for his fan page and your reply is e
    Hi Damian – Looks like once again Facebook has moved a setting. Go to Edit Page instead. On the right hand side is a section called ‘Promote Your Page’. The 4th one should say “Promote with a fan page box’.

    Ok wheres do you edit the page

    Miria

    • Kim Woodbridge says

      Hi Miria – You have to find your page in order to edit it. If you can’t find it, try going to Home > Ads & Pages > Pages (on left) and you should then have a list of all the pages that you are the Admin of.

      If you don’t have an Edit link on your fan page, then you are either not the Admin or it’s a business fan page and there aren’t any customization capabilities.

    • Kim Woodbridge says

      Hi Sheryl – I think it’s currently broken. Someone else mentioned this to me and when I tested it, I had the same result. Some stuff isn’t working properly since Facebook made their “like” updates last week. They usually sort these things out after a bit.

  21. Mahrokh says

    Hi,

    I have a page in face book and it is from before, I don’t have “Add Fan Box to Your Site”
    I don’t know how to change it to match with new design of page,
    i need to add it to my website.

    • Kim Woodbridge says

      Hi Mahrokh – It has moved since I wrote this article.

      Go to Edit Page > On the right is a section called Promote My Page. The last link should say Promote with a Like Box.

  23. divya says

    hey your post is helpful and following your post i create a fanpage but i can’t see add fanbox to your site button.i just see three options here.one is edit page then promote an add and suggest fan thats all.

  24. Donna Bennett says

    I am trying to get my Fanpage widget on my website and when I copy and paste the code to my website the ony thing that appears is the text- how can I get the fanpage box to appear on my website?

  25. Donna Bennett says

    I am not sure what kind of site it is-just my personal website that I want to add the link to my Business page to. My web address is provided above, maybe that will help. Thanks

  26. Donna Bennett says

    I did get the code from your link and it is on my website- but look what it says. It says Facebook platform- not Lake Hartwell Realty which is my page- how do I get it to change? Thanks

  27. Nick Young says

    Anyone know if there is a max width for the FanBox embed? I tried it once before really wide, like 1000+ pixels and it displayed weird… :)

  30. Sawleng says

    Hi Kim,

    I am so happy to find this page on your website.

    Can you tell me where can I find your step 2 on “Click on the link that says ‘Add Fan Box to Your Site”?

    I have questions on adding social media into my blog. After I’ve moved my blog from blogspot to WordPress (www.treasure-memories.com), I’ve also created Facebook Fan Page and Tweeter for my blog. I would like to do the following:

    1) Group together the “Follow Me / Like” on my blog for Facebook and Tweeter where I can see number of followers. How do I do that?

    2) Link my blog to my Facebook Fan Page. Currently, it’s link to my Facebook personal page, which I do not want due to privacy. How do I change that?

    3) To make things worse, while my blog post is still in draft format, it get highlighted into my Facebook personal page. How do I solve this?
    Group together the “Follow Me / Like” on my blog for Facebook and Tweeter where I can see number of followers. How do I do that?

    Really hope to hear from you soon.
    sawleng

Trackbacks

Sign Up

Subscribe to the (Anti) Social Newsletter for WordPress Tutorials, Recommendations, Special Offers and More


Pin It on Pinterest

asd

Sign Up!

Subscribe to the (Anti) Social Newsletter for WordPress Tutorials, Recommendations, Special Offers and More

You have Successfully Subscribed!