Thursday, September 22, 2011

How to Easily Add an iFrame Reveal Tab to Your Facebook Page

As of March 2011, Facebook is discontinuing support of the Static FBML application, which allowed users to create custom content on their Facebook page tabs. Instead, Facebook is switching to iFrame tabs on Facebook fan pages. Although your old FBML tabs will not break, you won’t be able to create any new ones, so you’ll need to make the switch to iFrames at some point.
I started researching how to create a reveal tab with this new iFrame functionality, and on top of needing to know iFrames, it’s a pain. It requires the knowledge of coding and PHP, and I’m assuming most marketers don’t know PHP, and many of those that don’t also don’t have the resources to hire someone to do it for them. Heck, I don’t know PHP (at least, no more than how to copy and paste snippets of it for my WordPress theme).
Fortunately, there are smart people in the world who create things like Facebook applications for the rest of us to use. Thanks to applications like Static HTML and MyTab, it’s easy to create a reveal tab. See this reveal tab in action at the Hacking in Seconds Facebook fan page. Here’s how to EASILY add an iFrame reveal tab to your Facebook page, without knowing code.

Option #1 – Static HTML – 4 Steps

1. Add the Static HTML Application to your Facebook Page

Go to the Static HTML Application, and scroll down the page to click on the link “Add to My Page.” These simple instructions are also shown on the application page.
image

2. Edit the “Welcome” Tab

Head over to your Facebook fan page, and find the “Welcome” link in the left-hand sidebar under the page image. You can create a regular custom tab by only filling in the top text box. Or, you can create a reveal tab by placing the pre-fan content in the top text box, and the fan-only content in the bottom text box.
image
Your default content should be something that encourages users to like your Facebook page, possibly by using something like an incentive, discount, or exclusive content
image
Your reveal content should provide your new fans with whatever you were offering, such as something to download, a discount code, or a link to the exclusive content. You might also want to thank people for liking your page.
image

3. Edit the Tab Title

Go to your Facebook page and click the “Edit Page” button on the top-right corner.
02-facebook-edit-page
Then click “Apps” on the sidebar.
03-facebook-page-apps
Then scroll down the page until you see the Static HTML application.
image
Clicking “Edit Settings” will bring up a lightbox on which you can edit the name of your tab. Type in your tab’s name, click “Save,” and then click “Okay”.

image

4. Make your Reveal Tab the Default Tab

You’ll want to make sure that your new reveal tab is the first thing that visitors see when they have not yet liked your Facebook page. To do this, go back to Edit Page, then click “Manage Permissions.” In the Default Landing Tab dropdown, select your new reveal tab.
image

Option #2 – MyTab – 5 Steps (includes Google Analytics integration)

1. Add the MyTab Application to your Facebook Page

Go to http://facebook.com/revealtab, and scroll down the page to click on the link “Add to My Page.” You’ll then see a lightbox appear listing all of the Facebook pages you manage; click “Add to Page” next to the one you’d like to create this iFrame reveal tab for.
01-facebook-iframe-mytab

2. Edit the Name of your Reveal Tab

Go to your Facebook page and click the “Edit Page” button on the top-right corner. Then click “Apps” in the left-hand sidebar, and scroll down until you see the MyTab application.
04-edit-mytab-app
Clicking “Edit Settings” will bring up a lightbox on which you can edit the name of your tab. Type in your tab’s name, click “Save,” and then click “Okay”.
05-reveal-tab-name

3. Edit the Reveal Tab Content

Back on the Edit Page screen, click “Go to App” under MyTab.
06-mytab-go-to-app
Here, you can edit your Default Content (the content that appears BEFORE a Facebook user has liked your page), and the Reveal Content (the content that appears AFTER a Facebook user has liked your page).
07-edit-custom-tab

4. Enter Google Analytics Tracking Code

The new iFrame capabilities allow you to do things you weren’t able to do with FBML, like track your tab stats with Google Analytics. MyTab gives you a place to enter your Google Analytics account ID so that it will track your tab. This is awesome.
08-reveal-tab-google-analytics

5. Make your Reveal Tab the Default Tab

You’ll want to make sure that your new reveal tab is the first thing that visitors see when they have not yet liked your Facebook page. To do this, go back to Edit Page, then click “Manage Permissions.” In the Default Landing Tab dropdown, select your new reveal tab.
image
That’s it! You don’t need to know PHP to set up an awesome marketing tab on your Facebook page that encourages people to like your page.
What do you think of Facebook’s switch to iFrames for custom page tabs? Let me know in the comments below!

No comments:

Post a Comment

back to top