Skowronek

Facebook Badge as a WordPress Sidebar Widget

August 22nd, 2008

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. 





    5.
  5. Register the widget with your sidebar in the function.php script 
    if ( function_exists('register_sidebar_widget') )
{
		register_sidebar_widget(__('Facebook'), 'widget_facebook', '');
}
  6. Make sure you have dynamic sidebar enabled in your sidebar.php script
  7. Finally, update your stylesheet to override the Facebook style settings. 
    .fb_root_vert
{
	width:195px !important
}

.fb_vert
{
	width:193px !important
}

.fb_object table tr td
{
	width:185px !important
}

.fb_badge > a
{
	display:block !important;
	padding-left:50px !important;
}

.fb_badge
{
	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: , , , , ,

This entry was posted on Friday, August 22nd, 2008 at 2:54 pm and is filed under Off-Topic. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

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

  1. Loren Says:
    September 11th, 2008 at 10:10 pm

    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:
    September 12th, 2008 at 5:15 am

    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:
    September 12th, 2008 at 2:16 pm

    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:
    September 13th, 2008 at 2:39 pm

    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:

    http://static.ak.fbcdn.net/rsrc.php/v2/35546/css/badge.css

    the original badge script looks like this:

    document.write(”);
    document.write(”);
    document.write(”

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

  5. Skowronek Says:
    September 13th, 2008 at 5:36 pm

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

  6. Loren Says:
    September 14th, 2008 at 8:28 am

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

    http://web.me.com/loren_ryter/

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

    thanks.

  7. Skowronek Says:
    September 15th, 2008 at 8:49 am

    Posting here is fine.

    I believe the status truncation is a function of the Facebook.com 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.

Recent Posts

Recent Comments

Manage