Facebook Fan page – custom Tab development

Facebook has introduced a lot of changes in 2011 to how Facebook applications are being developed. I’m sure similar changes will be coming to the Fan Pages since they still use FBML instead of iFrame approach like in Facebook Apps.

Here is a a set of code snippets which have helped me with customizing my Fan Page (http://www.facebook.com/TheRoadtoSiliconValley/) and building my own Facebook App with “Page Tab” capability.

The following assumes you are the “administrator” of a Fan Page.

Welcome Tab using Static FBML

You don’t need to be a programmer to do this quick hack.

1. Install Static FBML: http://www.facebook.com/apps/application.php?id=4949752878
This application will add a box to your Page in which you can render HTML or FBML (Facebook Markup Language) for enhanced Page customization.

2. Check out the previous post on how to customize this page as a Welcome page with any content you require. This will give you an idea of the power this simple free app provides.

Show Content to Fans – Hide from Non-Fans

So you’ve added the Static FBML and now want to add some dynamic content based on whether the user is a fan or not. i.e. has hit the “Like” button or not. One place you can use this is to control incentives based on user behavior.

Code to achieve this

Click here to View FMBL Code

Put that code into your Static FBML container to test.

Note: You cannot be logged in as an admin for the Fan Page you’re adding this to, or you’ll see both the content for fans and for non-fans. Use a test account (or friends) which is not an admin of this Fan Page.

Get Facebook UserID on Fan Page

There may be time when you developed your own Fan Page “Tab” and want to retrieve the User’s FacebookID. By default you can only retrieve the Fan Page ID.

There is a nice write-up here how to retrieve the users FacebookID using Facebook Ajax call: http://forum.developers.facebook.net/viewtopic.php?pid=296303

To make this piece of code work, replace this:

var url = “YOUR_CALLBACK_URL/tab.php?ajax=1”;
ajax.post(url);

With:

var queryParams = { “ajax” : 1 };
ajax.post(‘YOUR_CALLBACK_URL/tab.php’, queryParams);

The code is modified to pass the URL variables as array parameters.

Have you got any cool Facebook snippets to help with new Facebook implementations in 2011? Share below.

~ Ernest