SFC Chicklet

I saw this morning that Jesse Stay had created a rather neat little chicklet for his FBFoundations plugin. I thought it was a clever idea, so naturally I stole it and added it to Simple Facebook Connect as well.

Of course, just copying an idea is no fun. So I had to improve upon it a bit for my version. 🙂

I ended up not using any of Jesse’s code, but I did (mostly) keep the format of his chicklet output the same, so as to try to be compatible with it for styling rules and such.

Usage

The SFC Chicklet works in one of a few ways:

• First, it’s a widget if you just want to stick it in a sidebar or something. That’s easy.
• On the other hand, if you want to integrate it into your theme, then all you have to do is to add a call to sfc_chicklet(); anywhere you like.

Configuration (Styling)

Now, unlike Jesse’s FBFoundations plugin, Simple Facebook Connect is all about simplicity. So I removed all the configuration options that he used (widths, colors, etc) and made them styleable instead.

The SFC Chicklet has a default set of styles that it puts right into the HTML itself. However, these can be easily overridden by your own styles in your theme. The thing to notice is that all the styles I use refer to classes only, not referencing the tags. So, if you re-style and use the tags as well, then your styles win the specificity war, and will take precedence.

Thus, if you want to change the background color of the main box, you can do this:

div.fanBoxChicklet {
background-color:blue;
}

Simple. The “div” makes it take precedence. Anybody familiar with simple CSS should be able to easily style it the way they like.

On the other hand, if you’re a super-themer and want to disable the built-in styles entirely, add this to your theme’s functions.php file:

global $sfc_chicklet_no_style;
$sfc_chicklet_no_style = true;

Extra

And, of course, this new plugin supports both the Application and the Fan Page methods, for those of you who have your webpage hooked to a Fan Page. This is similar to the new support for Fan Pages in the SFC Publish and SFC Fan Box plugins.

If you’re a real power user, you might want to display a chicklet for more than one page or application. Well, we’ve got you covered, just call sfc_chicklet(“ID-NUMBER”), where ID-NUMBER is the ID of your application or page. Remember, this needs to be a string, not an integer.

Internals

Internally, the plugin uses the Facebook PHP library to get the necessary data from Facebook, so there’s no need to have any odd javascript or ajax requests to make the system work. Because of the use of this Facebook code, PHP 5 is required to use this plugin.

However, the Facebook code includes a JSON library (if you don’t have one already loading), which means that if you activate this plugin, it’s quite probable that the whole SFC system will run on WordPress 2.8, even if it wouldn’t before. Of course, since 2.9 was just released, this is not as big of a deal, really.

The plugin also uses the WordPress Transients API as a caching mechanism, so that it only asks Facebook for the fan count a maximum of once per hour. The Transients API was introduced in 2.8, and so the plugin should still work okay if you haven’t upgraded to 2.9 yet.

And if you can come up with any other good Facebook plugin ideas, let me know. SFC has proven to be an easy platform for building simple Facebook plugins on top of, so they can probably be produced pretty quickly and easily. 🙂

Installation

If you haven’t installed SFC yet, then this chicklet is part of the package. Just download it and install from here:
http://wordpress.org/extend/plugins/simple-facebook-connect/

Alternatively, in a WordPress installation, just go to the “Plugins->Add New” area and search for “Simple Facebook Connect”. You can install the package directly from there.

If you already are using SFC 0.8, then you only need the new file. You can download it separately here:
http://plugins.svn.wordpress.org/simple-facebook-connect/trunk/sfc-chicklet.php

Just drop it into your /wp-content/plugins/simple-facebook-connect directory, then activate it in the Plugins panel.