If you’re developer, there’s a developer app with some great documentation. If you’re not, there’s a Static HTML: iframe tabs application that provides a friendly way of setting up a custom tab without too much pain. It even has built-in reveal functionality, which is the ability to present additional content to visitors after they press the Like button.

Here’s what you do:

Step 1: Install the Static HTML: iframe tabs Application

Install the Static HTML: iframe tabs application on the Facebook Page. If you administer several, you’ll be presented with a choice of pages to choose from.

Then go to the page and click on the new “Welcome” tab that was added by the application.

This brings up the application’s interface.

Step 2: Create Your Content

As you can see in the screenshot above, your content can consist of HTML, CSS, Javascript or anything that you might have in a web page. You can be as simple or elaborate as you like. For the Kaiscapes page, I simply created a image in Photoshop and uploaded it to this website.

Then I entered some simple code to display the image in the application.

Then I created a second image in Photoshop to reveal to the visitors after they press the Like button.

This time, the code sends them to this website if they click on the image.

Then click on the “Save and view tab…” button at the top.

You’ll get a message saying your tab has been saved, and be able to view it as a fan or non-fan. At this point, I should echo the warning that Facebook forbids autoplaying any media on tabs. Make sure your content doesn’t autoplay anything, or Facebook may shut your page down.

Step 3: Make This Your Landing Tab

The last step is to make this tab the default when visitors come to the page. Click on “Edit Info” at the top of the page.

Click on “Manage Permissions.”

Set the Default Landing Tab to the one you just created.

At this point, you’re pretty much done. If you want to change the name of the tab to something else, click on “Apps” while you’re in Edit Info.

Then click on “Edit Settings” for the application.

A popup will appear where you can change the Custom Tab Name.

Originally published at Kaiscapes by Peter Liu.

Caveat: Facebook, as we all know, changes very rapidly and often without warning. As of this writing, this works fine, but no guarantees the next time they change something.

Step 1: Create an Application on Facebook for Your Site

You’ll need a Facebook Application ID and Secret codes to make this work. Go to http://www.facebook.com/developers/createapp.php:

Enter a name for your app. It can be anything, but I like to use the URL of the site so I remember which app goes with which site. Press the “Create App” button and you will be prompted for a CAPTCHA code to prove you’re human, then you’ll be presented with this:

You don’t need to fill in anything further unless you want to. Simply press the “Save Changes” button. You will then see this:

Step 2: Install the Facebook Comments for WordPress Plugin

Go into the Plugins section of your WordPress site and click on the “Add New” link. Search for the Facebook Comments for WordPress plugin by we8u. Install and activate the plugin.

Step 3: Configure the Facebook Comments for WordPress Plugin

The Facebook Comments for WordPress plugin has a lot of options. Here are the minimal ones I’ve found necessary to set:

In Basic Settings, enter the Application ID and Secret codes from the app you created on Facebook in Step 1. Click the “Include Facebook comments on blog” option.

Set the number of posts and the width of your Facebook Comments box.

Set your language, then under Advanced Settings, check the box that says “Include Facebook JavaScript SDK” unless you’ve already installed the SDK elsewhere.

That’s it! You’re done! Now people can post comments about your blog on their walls.

Issues: As of this writing, I’ve experienced a few issues with this plugin. The biggest issue I face right now is it doesn’t seem to work with Thesis from DIYThemes. The Like box shows up, but the comments box doesn’t. If anyone has found a workaround for this, please post a comment below. I would be in your debt. Thanks in advance.

Originally posted at Kaiscapes by Peter Liu