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.

   .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: PHP, Programming, Sidebar, Template, Widget, Wordpress

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.