Now that Facebook has crossed the 500,000,000 user mark (that just looks like too many zeroes, doesn’t it?) its even more important to get out there and brand your organization properly.  This means using the “Like” box on your blog, your website, or basically anywhere you publish content online.  Today, I’ll show you how to style the “Like” box using common CSS tags and the Facebook Like Box Form.

You’ll need:

CSS Edit
Facebook Like Box Form

and fill out the info you want.

Click Get Code:

Copy the URL that the iFrame option gives out and load it up in css edit

Select an element and open up it’s respective stylesheet.

Style the elements that you want and paste them into a new stylesheet.
Save this style sheet on a remote server.

In order to reference your new stylesheet you are going to have to use a little FBML. Go back to the “Get Code” dialog box and copy the XBML snippet.

Replace ‘like-box’ with ‘fan’

Add your css url to it and voila!

Example:

<fb:fan profile_id=”1855986685″ stream=”1″ connections=”3″ width=”190″ height=”480″ css=”http://www.yoursite.com/style.css?2“></fb:fan>

Be sure to add “?” and a number at the end of the URL. Facebook caches the stylesheet. Adding the ? and number allows to see your changes.

Finale.

Follow the directions on how to enable XFBML on your site and paste in your short-code for the like-box and you’re done!

Note: So far i haven’t figured out how to do this using the frame method.