Note: This blog post is borrowed from KGBTexas Interactive Site. I am happily employed by KGBTexas, please view the blog to view all of our articles.

Facebook recently rolled out it’s latest round of changes which are geared specifically at revamping the Pages area. With these changes come many new additions; page administrators may now interact with other pages; pages can “like” other pages; pages can no longer use the FBML app that allowed for custom tabs. Wait, what?!

This was a notable change for many developers who had previously relied on FBML tabs to create custom content for clients, showcasing unique content that was out-of-the-box compared to other Facebook tabs. With this option eliminated, we are now presented the ability to use iFrame content on custom Facebook tabs. After much thought, I am very happy with this (as are most other developers it seems). The benefits of this are as follows:

• Add all your content from a single location
• Clients have the user-friendly WordPress admin area to work with
• With WordPress 3.1, Internal Linking to pages and posts is easier than ever

See how it all comes together now…

What we are going to do here, in a nutshell, is create a WordPress page with a custom WordPress template and have a custom Facebook App pull this data into a custom Facebook Tab.

1. Creating the Page

This is the simple part. Simply create a typical WordPress page in your admin area. It does not matter where this page is located.

2. Create the Custom Template

I will not divulge into the specifics of creating a custom template. If your company needs this service, KGBTexas is highly proficient in this practice and would happy to accommodate you. Keep in mind this template should adhere to Facebook’s tab dimension restrictions which is currently 520 pixel width. Height does not matter. I will link some template resources if you would like to learn about coding them on your own.

• http://codex.wordpress.org/Theme_Development
• Chris Coyier’s Lynda Guide on Template Building (awesome tutorial, well worth it)

3. Create the Facebook Application

Creating the Facebook custom tab requires us to pull content from a Facebook Application. Setting this up is very straightforward. Please follow this link for a very thorough walkthrough. Essentially, you want to create a new Facebook application and point this at our WordPress page’s URL and select the option within the application to use an iFrame.

4. Add the App to your Tabs

You must now connect the application to your fan page.

• Open your application and choose the option on the very bottom left to “Add to My Page”
• This will give a pop up box where you may select which page to add this to
• Now that the application is added to your page, head over to your page and click the option at the top right to edit it
• You will be directed to the admin area for your page
• From here, select the applications option at the bottom of your left navigation
• A list of all your current applications comes up in the page content area.
• Select the Custom Application options you created and make sure it is set to show on your tabs.

You should now be able to view your page normally and witness the custom tab on the left side navigation. Clicking the tab icon (customizable in the app settings!) will open the iFrame on your page! Keep in mind, if users are on a secure Facebook connection, you need to make sure your secure callback URL is set properly in the application settings. Good luck!