How to Hide a Tab’s Content Until One Likes your Facebook Fan Page

This is a guest post by Zain who blogs at TipsoTricks. If you would like to write forShoutMeloud, read our guest posting guidelines.

Facebook fan page is great way to interact with your readers, fans and followers. You can quickly send updates to all of your fans at once. You can have instant chat with them and observe how your fans are doing. But did you know that you can create sub pages or tabs in your Facebook fan page, just like you create in your blog? If No, then don’t worry because I’m going to explain how to do this in the easiest way possible.

With separate sub pages or tabs you can put important announcements, banners, ads, giveaways info, promotions, interactive feedback or subscriptions forms or a simple welcome message for your fans. Optionally, you can set that tab as the startup tab, so that new visitors entering your fan page would see the content of that tab without seeing the wall first.

The interesting thing that I’m going to share in this post is, hiding a tab’s content until a curious visitor who want’s to see the content in the tab, likes your page.

If a real interesting content (like giveaway info or link) is hidden in a tab, the visitor would never mind to click the LIKE button the see the content — a clever way to increase your likes.

This all can be done within few minutes. All you need is an app called, “Static FBML” installed in your fan page. To save the steps of searching and adding the app, I’m giving the link that directly installs Static FBML to your page.

Just follow the steps carefully:

1. Copy the link below, paste in the address bar of your browser, replace the XXX part with your page ID and press enter:

http://www.facebook.com/staticfbml/edit.php?owner_id=XXXXXXXXXXXXXXX&app_id=4949752878

To know your page’s ID, open your fan page and press CTRL+U. You’ll see all the source code. From there look for ‘<link rel=”alternate“…’ (it sould be at line # 23-26) and note the ID.

2. If you’ve multiple fan pages under your account, choose the one in which you want to install and click “Add Static FBML” button.

3. From your fan page, click ‘Edit Info‘

4. From the settings page, click ‘Apps‘

5. From the list of installed apps see Static FBML down the page, and click ‘Go to App‘

You’ll see an editing screen, where you’ll enter the title of the tab and it’s content.

6. Give any name to your tab in “Box title” field.

7. In FBML field, you are going paste this piece of code:

<style type="text/css">

.content_box{
width: 100%;
float: left;
position: relative;
overflow: hidden;
}

.content_for_fans{
width: 520px;
height: 500px;
float: center;
position: relative;
background: #fff;
z-index: 9;
}

8. Replace the code in red with your content, images or any custom HTML code. This will be visible to your fans.

Replace the code in green with your content, images or any custom HTML code. This will be visible only to those who do not like your page.

Note: the tags contains all the styling (positioning of the content, layout, background color etc) of the content box. Do not alter it unless you know what you’re doing!

9. Click ‘Save Changes‘ when you’re done editing.

10. See your fan page and click the newly created tab to see how it looks. You may logout and visit your fan page to see the content set for non fans.

Setting up the custom tab as default landing tab

1. Click ‘Edit Info‘ on your page (step 3) and click ‘Manage Permissions‘

2. From right page, see ‘Default Landing Tab‘ and select the one you wish to set as default.

Once someone standing on the custom tab hit the like button, the page will auto refresh and the content will change automatically, intended for those who like your page.

I’ve done it successfully on my own fan page, you can view that as working demo here, to get the idea how it actually works.

Hope you liked the efforts and learned from this step by step tutorial of creating custom tabs. Your comments are valuable, so feel free to ask anything regarding setting up custom tabs.

Article by Zain

Zain has written 4 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.

Follow @ShoutMeLoud