There are a number of Facebook tutorials, including my own offering examples of FBML to add additional functionality to a Facebook fan page.

However, on many occasions these tutorials fall short of the mark, with no server side functionality currently available via FBML, connecting to databases, or consuming information from other sources is difficult.Third party services fill the gap, but are often expensive, or cumbersome to implement.

One of the most common questions I get asked regarding FBML is how to integrate a WordPress blog, or blog posts on a Facebook fan page tab. This tutorial takes you through the steps of doing just that, with no third party application required.

For my own Facebook page, I have opted to offer exclusive content (not available on my main blog) via Facebook. In addition to that, fans and non fans see a different opening tab, giving them incentive to ‘Like’ the page.

Here’s what we are going to end up with:

1). A tease and reveal tab created via a Facebook application
2). Exclusive content which is only available to Facebook fans
3). Some added spice in the form of Facebook Javascript (FBJS) to cycle the posts elegantly.

Here’s what the final result looks like:

See the example live here. (Obviously) you’ll have to fan this page to see the posts.

Step by Step

Here’s what we need to do. Step by Step.

1). Create a new WordPress category to house the exclusive content
2) Find the new category ID
3). Exclude the category ID from your RSS feed and main blog
4). Obtain a Facebook application key and application secret
5). Download the latest Facebook libraries.
6). Setup a directory in the root of your WordPress install
7). Ammend and upload the required files
8). Change Facebook application settings to point to your new files.

Step 1. Create the new category

A relatively simple process, creating a new category in WordPress is as simple as going to the category section and adding the details. Further information (for those who need it) can be found on the codex.

Doesn’t really matter what you call this. The important part of the process, is working out what the unique “category ID” for the newly created category is.

Step 2. Find the new category ID

The category ID can be found simply from within the WordPress admin section. When you have created the new category simply hover over its name, and you’ll see this in the toolbar..

Unsurprisingly, cat_ID represents the new category ID. Keep this handy, as you are going to need it to exclude the category from your main blog.

Step 3. Exclude the category

There are three places we are going to remove this category. One is the sidebar of your WordPress blog, the other is inside the main blog loop – and finally the third is your RSS feed.

1) Removing from the sidebar

See Under ‘ Hiding the category for the sidebar‘ in this post, which uses a very similar technique to create a custom newsletter using WordPress.

2 & 3) Removing from the main loop and RSS

I’ve used a custom plugin that I’ve created to handle this. You can download it here, but please remember to set the $category_id_to_remove variable at the top of the plugin prior to upload. It looks something like this for you code junkies curious.

add_filter('pre_get_posts', 'exclude_category');

function exclude_category($query) {

//HEY YOU! - REMEMBER TO SUBSTITUTE THIS VARIABLE NOTICES THE MINUS SIGN TOO.

$category_id_to_remove = '-1127'; // this should be changed to the catID

$query->set('cat', $category_id_to_remove);
return $query;
}
?>

Ammend,  upload and install in the usual way that plugins are installed. To test that you have successfully excluded the category, simply create a post and assign it to that category. It shouldn’t appear in either your RSS feed, or your main blog. Sorted.

Step 4. Facebook app keys

To obtain Facebook application keys, you’ll have to create an application first. Visit this URL to begin the setup of a fresh application.  You can call this whatever you like. Accept the terms and click next, you may be required to fill in a captcha prior to moving on. You’ll be presented with a number of options, which we will have to fill in later. Right now, the only tab you are interested in is the “Facebook integration” option. You should be able to click on that to obtain both the ‘application secret’ and ‘application key’. Save these as you’ll need them for later steps.

Step 5. Facebook API Libraries

Facebook don’t make things terribly easy for developers, as there’s a fair bit of hunting around before finding the API libraries for PHP. They do however make life much easier for getting the information out of the Graph API.

These are currently housed at Githubs, and are available via this download link.

Download and extract the class (facebook.php). (As this file may change / get updated). I have however included this at time of writing in the main demo download below.

Bear in mind that this is the new Graph API – and not the old Restful API.

Step 6. Setup a directory

You can do this locally, prior to installation. You’ll need a directory for images, and the main code files which I’ve already written for you.

Download the full zip folder here.

These connect through to WordPress etc . Should look something like this.

Facebook.php – The main API class downloaded earlier
incfunctions.php – Any additional PHP functions (I’ve used a trimming function to shorten my posts)
Index.php – The main FBML page used by Facebook
tinthumber.php – A generic image resize PHP script, makes things pretty.

Step 7. Ammend the files

The only file that you will have to deal with is “index.php” everything else should be fine as is. The following are the sections of code that may need tweaked.

Lines 7 & 8:

$appapikey = ‘YOUR API KEY HERE”;
$appsecret = ‘YOUR APP SECRET HERE’;

refer to Step 4 if you can’t remember what these are.

Line 9:

$main_app_location_http = ‘http://www.yourdomain.com/facebook/’;

Change this to whatever server domain you’ve installed on. Will be the same as the domain for your WordPress install, inside a sub directory.

Line 48:

$number_of_posts = 5;

Change this to determine the number of WordPress posts that will be shown / cycled through inside your FBML application.

Line 54: IMPORTANT

AND $wpdb->term_taxonomy.term_id IN(1127)

Change 1127 to be the same category ID that you determined in Step 2.

Line 110:

Determines what image / HTML to show to visitors who aren’t currently fans of your page..

Save the file with your settings, and upload it. At this point viewing the URL in the browser (http://www.yourdomain.com/facebook/) should show you the content shown at line 110.

Step 8. Change Facebook settings

Now that your application has been created, and uploaded, all that is left to do is to perform a few tweaks to the application page to set it all up. Log back into Facebook and follow these steps:

To set the app settings

1) Visit the following Developer Apps URL
2) Select the application name that you set in step 4 and click edit settings.
3) Click Facebook Integration
4) Set the canvas page name to anything you want
5) Set the canvas URL to the HTTP location you uploaded everything to. (Will be the same as the variable $main_app_location_http used earlier.
6) Set canvas type to FBML
7) Set tab name to ‘Extra content’
8) Set tab URL to ‘index.php’

Save changes and click ‘Back to My Apps’ at the top of the page.

To add the application to your fan page

1) Click Application Profile Page
2) Click ‘Add to my Page’ – if you an admin of several fan page, select the appropriate one.
3) Visit your fan page
4) Click the + icon beside your tabs, and select ‘Extra Content’

Voila! That should be you up and running now, having created your first Facebook FBML application. Simples!

You should be able to expand upon the code that I’ve provided, and I’ll be adding to my own offering as I now have a fair idea how things work. Next stage will be to perhaps syndicate some RSS, or integrate my Twitter account.

Articles which proved to be useful:

Facebook JS slider – I’ve used a large proportion of this code to give the sliding left and right effect.

How to detect fan of a Facebook page. – Hooray for the REQUEST object giving additional information from Facebook. var_dump to the rescue.

Some things developers need to know when developing for Facebook

JQuery isn’t supported, Facebook don’t allow you to link to external scripts when creating a canvas application. Instead a JS library called FBJS is used. That said – an open source project to mirror JQuery functionality inside Facebook looks promising.

Body tag’s are not allowed inside FBML canvas.

When creating an application for a tab, some functionality will be restricted, particularly user auth calls as tabs can’t redirect.

$is_fan = $_REQUEST['fb_sig_is_fan']; this code works out if the current user session is a fan of the page or not without needing to find the user ID. The above paragraph explains why userId can’t be fetched normally.

Facebook tab widths for designs are 520px.

Finally..

You can of course change the images which are used, and the surrounding HTML to create your own custom FBML app. Standard WordPress programming can be used because of the inclusion of the core libraries at the top of the script, so those of you familiar with writing plugins or custom code should be right at home. Let me know your thoughts in the comments.

How to (fully) integrate WordPress with Facebook is a post from: Webdistortion