Facebook Badge as a WordPress Sidebar Widget

I tinker around a lot with WordPress. As a matter of fact, I tinker a lot and am quite good at it. I have created various custom modules (unpublished) as well as written a PHPBB to WordPress migration utility (long lost unfortunately). Lately I have been keen to develop custom sidebar widgets by mashing up social site widgets. My latest, the Facebook badge sidebar widget.

This is alpha code and is not intended for those unfamiliar with PHP and/or the WordPress API.

You will also need to be familiar with the WordPress widget API.

  1. Create a Facebook badge
  2. Copy the script code they provide following a successful build
  3. Add the following PHP function into your widget.php file with the generated code between the badge tags
    function widget_facebook($p)
  4. Register the widget with your sidebar in the function.php script
    if ( function_exists('register_sidebar_widget') )
    		register_sidebar_widget(__('Facebook'), 'widget_facebook', '');
  5. Make sure you have dynamic sidebar enabled in your sidebar.php script
  6. Finally, update your stylesheet to override the Facebook style settings.
    	width:195px !important
    	width:193px !important
    .fb_object table tr td
    	width:185px !important
    .fb_badge > a
    	display:block !important;
    	padding-left:50px !important;
    	background:#3B5998 !important;
    	margin-bottom:8px !important;

Now that you have the code, you can add the widget to your sidebar through the WordPress widget administration screen.

That's all. Enjoy.

Tags: , , , , ,

7 Responses to “Facebook Badge as a WordPress Sidebar Widget”

  1. Loren Says:

    Hi there… thanks for this. Where did you get the info on the css for the facebook badge? is there any more? I’m trying to make their js not truncate the status message text, or better yet, wrap it. do you know if that’s possible? thanks.

  2. Skowronek Says:

    To my knowledge there are no docs on doing this. If the status is being truncated, its probably the wrapper div cutting out the overflow. If you download the CSS stylesheet that is loaded with the badge you can look at their rules and override them as needed. If you’re unfamiliar with this, I can amend this tutorial on how to get the CSS and JavaScript files that are loaded.

  3. Loren Says:

    I’m not terribly familiar with how to do that but could probably figure it out. If you had the time, it would be appreciated! Thanks.

  4. Loren Says:

    It seems like the truncation is done by the JS, not the css.

    sorry this is very newbie but the “pasted” badge script loads another script which seems to get this css:

    the original badge script looks like this:


    Status:has returned from a 2 week \”face…”);

  5. Skowronek Says:

    what is your site and i’ll go take a look if you don’t mind.

  6. Loren Says:

    yeah sorry about the last post, i forgot it wouldn’t escape the brackets etc.

    if you prefer to email me rather than post here, my contact email is at the bottom.


  7. Skowronek Says:

    Posting here is fine.

    I believe the status truncation is a function of the badge and cannot be modified. The ellipses that appear are build in to the actual badge. There may be a setting eventually, but to my knowledge, there is not one now.

    Hope that helps.