Facebook Fan Box Widget for WordPress

Facebook Fan Box

This is a WordPress widget to display a Facebook fan box on the sidebar. Utilizing Facebook fan box API, this widget displays the fans of your Facebook profile page. This widget is easy to install because it is packaged as WordPress plugin that can be installed very quickly. It is also easy to use and configure because it is deployed as widget. The Facebook fan box also has ‘Like’ button. This button interacts with your blog readers directly, so if it is clicked, it will add up to the number of your fans.

This widget requires WordPress version 2.8 or above to function properly. It also requires you to have a Facebook profile page to be connected to. To create a Facebook profile page, you have to have an account in Facebook. This is easy to do, you can navigate to Facebook website and get started right away.

The following image shows the appearance of this widget:

Facebook Fan Box widget

And the following image shows administration screen of this widget:

Facebook Fan Box widget admin options

Installation

Before installing, make sure you have at least version 2.8 of WordPress. Do the following steps to install this widget:

  1. Download the widget from http://wordpress.org/extend/plugins/wp-fb-fan-box/.
  2. Extract the directory wp-fb-fan-box from the downloaded file, and then upload it to your WordPress plugins directory (/wp-content/plugins/).
  3. Activate the plugin through the ‘Plugins’ menu in WordPress.
  4. Go to Appearance > Widgets > Facebook Fan Box, drag and drop it to sidebar area, and start entering your info.

Widget Parameters

The following list is the widget parameters that you can set from the administration screen:

  1. Width

    The width of the widget in pixels.

  2. Height

    The height of the widget in pixels.

  3. Profile Id

    The profile id of your Facebook page. You can obtain this id after creating your Facebook page. It is displayed on the browser’s address bar while loading the page.

  4. Connections

    This is a number indicating how many fans you want to display in the widget.

  5. Stream

    Facebook page can have its own stream. Turning this option on will show the page stream inside the box.

  6. Header

    If turned on this option will show the fan box header.

Related Posts

Latest Posts with Share Widget for WordPress
 
Recent Comments with Gravatar Widget for WordPress
 
Top Commenters Gravatar Widget for WordPress
 
Ranged Popular Posts Widget for WordPress
 
Rounded Tag Cloud Widget for WordPress
 
This entry was posted in WordPress and tagged , .

97 Responses to Facebook Fan Box Widget for WordPress

  1. Pingback: Widget WordPress: Facebook Fan Box « suhanto.com

  2. nggak says:

    sir thank you ya, saya sudah bikin and pakai and gampang sekalii. trims lagi :_

  3. myra says:

    Love your facebook widget. Had a few questions about changing the color of the border and the like buttons it puts on every post. Is there a way to change either of those things? Thanks!

    • Agus says:

      Thanks myra. As far as I know, currently there’s no option to change the color of the border and the like button. CMIIW, it is specified by facebook API.

  4. benzar says:

    hej
    how can i change your interesting plugin, because i want to have its wigdet collapsibile /i use “Widget Voodoo” by Hackadelic…/ and i need the title of the widget?

    • Agus says:

      benzar, for the current version, I didn’t include title for the widget since visually the widget already has its own title. also for the collapsible behavior, I didn’t think of it right now, maybe in next version.

  5. sam23 says:

    This looks nice, i downloaded and installed it. Thanks.

  6. very interesting widget, i use it on my own blog, thank you :D

  7. Warren says:

    Having an issue. I have a vanity URL, not a profile ID. The box is showing up shaded and simply as the top left corner of the page, not the fan box.

    It’s a pretty setup, thoughts on what could be wrong?

    • Lee says:

      Go to your Facebook “Profile”.
      Place the mouse cursor over your profile picture.
      At the bottom of your browser you’ll see a link like this…
      http://www.facebook.com/album.php?profile=1&id=641408436

      Just right-click and copy-link-location, paste it in a text editor and now you have your numeric profile ID.

      The last part “id=641408436″ is your ID number.
      Mine is 641408436 , even though my vanity url is
      http://facebook.com/leesr

    • Lee says:

      Oh, the same works on my Fan Page.

      –LeeSr

    • I am having the same issue, and it doesn’t matter which id tag I use either the full one with fb included as a link, just my name, just the numbers – it still stays the same as the shaded out box in the top left hand corner of fb.

      Any other ideas on what could be wrong?

      Cheers, Kayley.

    • Agus says:

      Hmmm, I still couldn’t reproduce this behavior on my installation. Eventhough I put the wrong number as profile Id, the blue facebook box still being displayed. It just display ‘page not found’ message.

  8. Tom Parker says:

    It looks awesome, but I get an error when trying to activate the plugin.

    Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /nfs/c07/h01/mnt/99463/domains/fowlerformula.com/html/wp-content/plugins/wp-fb-fan-box/wp-fb-fan-box.php on line 41

    Any thoughts? I’d love to use this.

    • Andy says:

      Exactly the same problem here too.

      I’m using wp 3.0 and a template made with Artisteer. No problems with any other plugins, so I think problem is most likely somewhere in plugin code. Line 41 perhaps? :)

    • Tom Parker says:

      Sorry, just noticed that domain was set to PHP4. All fixed now that I’ve changed the configuration.

    • Tore S.Mygland says:

      Feeling a bit stupid; got the same issue, but got no clue how to fix it, even with the above. Could anyone give me a few pointers? Thanks!

    • Agus says:

      I still couldn’t reproduce this behavior on my installation. Eventhough I put the wrong number as profile Id, the blue facebook box still being displayed. It just display ‘page not found’ message.

    • Lyn says:

      I’m getting the same error and don’t see a fix here. I’m on WordPress 3.0.1 on a self-hosted site.

    • Agus says:

      Lyn, not sure about the error since I couldn’t reproduce the error on my blog. I do too on WordPress 3.0.1, PHP 5.2, and my SQL 5. It looks OK here, you can see it on the sidebar.

    • Lyn says:

      I guess I’ll just delete your plug in if you don’t have any suggestions

  9. Pingback: WordPress: Facebook Fan Box Widget von Agus Suhantos

  10. Pingback: Facebook Fan Box Widget für WordPress

  11. I am not getting the full box effect with shadow at

    Halfway To Concord

    No matter what size parameters I set, the bottom of the widget gets truncated by widget below, which is too close to bottom of facebook fan box border.

    I currently have set size to 220×300 to accommodate 9 connections

    WP3.0 running Thesis 1.7

  12. Pingback: 14 WordPress Plugins for Facebook | WordPress and Facebook Consultant | (Anti) Social Development

  13. Pingback: 14 WordPress Plugins for Facebook | AwardSpace Blog

  14. flo100 says:

    The Plugin doesn’tt work at my Side
    WP 3.0

    Where is my problem ?

  15. emile says:

    Having some issues with this widget…

    First of all, I created a page for a small business, is there any way to become a “fan” of a small business site as opposed to just “liking” it? What sort of page do I have to create to have “fans”?

    Does anyone know why the bottom of my fan box is being cut off? Here’s a link: http://www.emfwatch.org/participate/ is this because there are not any “fans” yet?

    Any help would be appreciated.

    thx

    • Agus says:

      I think it’s the confusion that everybody thinks about like and ‘have fans’. Some sources in the internet said that it is the same.

  16. sukerawan says:

    bozz….bisa ga ngisinya ga lewat widget? seperti pieres wordspew gtu…..

  17. Josh says:

    First INCREDIBLE PLUGIN, second: No matter which specifications and measures I introduce, it keeps un-aligning …

    http://www.bailedeestrellas.com

  18. Dean Saliba says:

    I have this in the footer of my blog, it shows a blank space instead of the fans, any idea how I fix this?

  19. kamal thakur says:

    Thanks a lot.. that helped me..

  20. Michelle says:

    Hi – this plug-in looks awesome and I’d love to use it, but when I try to activate it, I get this error:

    Plugin could not be activated because it triggered a fatal error.
    Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /usr/local/apache/htdocs/wordpress-2.7/wp-content/plugins/wp-fb-fan-box/wp-fb-fan-box.php on line 41

    Do you have any idea what might be wrong?

    • Agus says:

      Michelle, this plugin requires widget capability of WordPress that’s available starting from WordPress 2.8. I noticed that the path you wrote above refers to WordPress 2.7. Why not consider migrating your WordPress to the newest version (3.0)?

  21. shegga says:

    Hi Agus,
    Could you please contact me as soon as possible. We’re a small design company based in Houston, Texas. We use a lot of WordPress to built our sites. We’re looking for a consultant to help us regarding development issues. We’re wondering if you’re available for such work. How do you charge for consulting service?

    I look all over your website but cannot find you email so I figure this is the best way to contact you. Thanks.

    -shegga design

  22. Agus,
    Please contact us asap using the email I listed for this comments. Or else what is a better way to contact you? Thanks

    -shegga design

  23. latha adapa says:

    looking for good job,
    i am b.sc., b.ed., 4 years experience

  24. Melanie says:

    Great Widget!

    However, If I wanted to embed it into a page— how would I do this?

  25. LisaBeth says:

    Hi and thanks for your great work.
    I’ve tried several times to create the fan box and what I’m getting is just the big blue Facebook box and in small print underneath it says, “Go to Facebook.com”. I know my Facebook page is accurate, and I’ve placed the link in the Profile ID field. Am I missing something? I’ve left it that way so you can view it, and have also tried it on Safari and Firefox. I’ve even tried it without the word Facebook in the URL in various ways since I read one of your comments about only using the numbers. Basically have tried it every way I can think of and can’t get it to show up as the full fan box. I have WP 3.

    Many thanks!

  26. I am working with your plugin “WordPress Facebook Fan Box Widget”

    I am experiencing an error.

    Go to:
    http://kofc.sacredheartschurch.org/

    Click on “like”…

    and you get this error:

    “You supplied an Open Graph type via one of the supported meta tags, but the type you specified “org” is not valid.”

    My first impression is the “page” is to new and it is a Facebook issue and if I wait a while Facebook would create the page on all its servers and it will go away. Hasn’t happened yet.

  27. iTechRoom says:

    It’s really a nice widget, Thanks for sharing.

  28. Leland says:

    bump on the embed in a page template?

  29. Maya says:

    I want to add a 2nd Fan Box…for another fan page. How can I do this?? Another plugin you recommend?

    • Agus says:

      Sorry I didn’t design this widget as multi instance. So, currently it can’t be used more than once in a blog.

  30. Pingback: Aggiorna

  31. Lucy says:

    Hello Agus. I installed the plugin and enter the ID the facebook but is not reflected in the fans in wordpess. Only see the box that says facebbok. There
    to wait or is it an error? thanks!

    • Agus says:

      Have you opened the fan page directly from the browser? If it can be displayed from the browser, it should be available from the widget.

  32. Lucy says:

    that’s to say, if the ID of Facebok is a name, and put the ID number works the same?

    • Agus says:

      This is facebook page ID number, it should be numeric only. The facebook page has name, but facebook page name is not unique. So, it must be the ID number.

  33. bambamclint says:

    get this error:

    Not Found

    The requested URL /”http://www.facebook.com/connect/connect.php was not found on this server.

    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

    • Agus says:

      Have you already created your facebook page? Try to open it from the browser directly before entering any information in the widget.

  34. Scot says:

    Agus – thanks for the great plugin.

    Question: Is there a way to keep the Plugin “on” and still display the eople that “Like” our fan page even when we are not logged in?

    I visited my blog and saw the that plugin showed “Not logged in” and was blank. Is the only way to keep this up to be logged into your FB account and page constantly?

    Thanks

    • Agus says:

      This plugin does not require us to log in to facebook to be able to see the people whom like our page. You can try it from this page, I put my facebook fan box widget on the right sidebar of this page (current condition, not guarantee for future condition). You can logout from your facebook account but you should still can see my facebook fans.

    • jen says:

      I am having this same problem. The Fan Box looks great, but I cannot see the fan avatars if I look at the site when I am not logged in to Facebook,. It simply says the number of fans I have. What am I doing wrong? Is there any way to correct this?

  35. Peter says:

    Hey

    Thanks for the widget. I´m using it as the primary widget and I´m wondering cause it seems that the width parameter doesnt seem to have any effect at all. Why is that and how can I fix it? The right side of the facebook box is cut off. :/

  36. Peter says:

    I´m sorry I really dont get your widgets widht parameter then.
    According to this very page:
    Widget Parameters

    The following list is the widget parameters that you can set from the administration screen:

    1. Width

    The width of the widget in pixels.

    • Agus says:

      Peter, there’s a width parameter in the widget I’m using as you also can see from the above image. But of course the width can’t exceeds its container since it will be cropped or hidden by the container, unless the container specified otherwise.

  37. Peter says:

    PS. If I had the wigdet width you have on this page (ie the facebook box) that would be good enough for me. It seems I cannot get 3 thumbs in one line, but it always defaults to 4.

    • Agus says:

      You are using the same widget version as I am, so it should be no difference between your version and my version since I haven’t update the widget to new version.

  38. Giancarlo says:

    Hi. Nice plugin!
    Is it possible to link the widget not to my profile page but to a page I’ve created in facebook?
    Thx

  39. Pingback: » Facebook Fan Box Widget para Wordpress . Diseño Web, Internet e Informática

  40. Nik says:

    Hi

    Awesome work on the widget. When I put it on my blog it started displaying the posts from my facebook page’s wall posts and not the fans of my page. Can you please advise what am I doing wrong here? The URL is http://britishpcrepairs.co.uk/blog

    My facebook fan page is http://facebook.com/BritishPcRepairs

  41. Pingback: Facebook Fan Box Widget para WordPress | Al que Bloguea WP le ayuda

  42. Nobbi says:

    Hello and thank you for this plugin, which runs at once ;-) .

    But I hope that you can help me in this question:
    How can I center the widget in my sidebar? I don’t want to do changings in the code without help, because I’m not a “programmer” ;-)

    Thank you and please my bad english :-(
    Nobbi

  43. Kendall says:

    where is the css for the widget located. I would like to customize some of the colors? Can this be done?

  44. Marco says:

    Hey,

    i really like this plugin, but after installing and clicking on Like on my Page, i get this error:

    “The page at http://www.facebook.com/pages/Klangkost/163205629524 could not be reached.”

    Can you help me please?

    Thank you! Marco

    • Marco says:

      PS. I tried the like widget with another page (which had less numbers in the ID) and it worked. :/ but itstill won’t work at the klangkost page..

  45. Marco says:

    Hello,

    my page ID 163205629524 is not working with the plugin. i also tried the plugin with other id’S (wich are longer) and it worked pretty well. if i click “like” with my id th ewidget gives me an error saying “could not reach the page”.. any suggestions? :/

  46. Magnus says:

    Yes it can be done – you add a parameter called css in the iframe code – regrettably it is not implemented in this plugin … yet ;)

  47. Scott says:

    I’m having trouble with this, i can enter all my information but when I go to save, it gives me” are you sure you want to do this wordpress error message”

  48. Pingback: How To Turn Your Home Builder Blog Into a Lead Conversion Machine

Leave a Reply

Your email address will not be published.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

About Me

I am a professional developer and designer for the following systems: WordPress, Magento, and OpenCart. You can hire me to do overseas works related to those systems.
Hire me | Donate / Payment | Testimonials

Recent Comments