Connect with us

Social Media

How to Create a Facebook Reveal Tab – Facebook for Business

There has been many a debate for the use of Facebook Page Reveal Tabs for business with pros and cons being listed beyond the normal “Top 10”. For those of you who do not know what a Facebook Reveal Tab is let me enlighten you with this post.

Last updated by

on

Facebook

There has been many a debate for the use of Facebook Page Reveal Tabs for business with pros and cons being listed beyond the normal “Top 10”. For those of you who do not know what a Facebook Reveal Tab is let me enlighten you with this post.

A Facebook Reveal Tab is a custom tab you can add to your Facebook Page that presents different images/content to a person who is NOT currently a fan of your Page versus a visitor who is a fan of your Page. “Fan” meaning they clicked the associated “Like” button for the Page.

Why is this exciting for business?

Well the use of a Facebook Reveal Tab is exciting because you can “encourage” people to “Like” your Page in order to receive something in return. For example, when a visitor reaches your Facebook Page who is not a fan they can be presented with an enticing message to “Like” your page in order to receive some free goodies such as an eBook. When the visitor “Likes” your Page the content changes to a download button so they can get the freebie. So the end goal is you have clocked up another fan.

Personally I think its worthless to “force” someone to be a fan of your Page in order to receive a freebie. “Fans” of Facebook Pages generally are placed in two camps:

1) I Love You Fans – Fans who love what you do and will interact with you within Facebook such as leaving comments on your Page’s wall. They will also visit your “home base” and ultimately a good percentage end up being your customer.

2) Fake Fans – They fan your Facebook Page to get something then never return or engage with you. The only benefit for attracting Fake Fans is they give your Page a perception of being important due to the large fan count.

If you force someone to become a fan of your Facebook Page I believe a good percentage of the fans will fall in the “Fake Fans” camp.

We do not use Reveal Tabs with our CampaignHub clients because we use, in our opinion, far better strategies to attract the right prospects.

However! I would never say that there aren’t any good uses for Reveal Tabs so below I have provided a step-by-step guide to creating a Facebook Reveal Tab.

The guide is from our Facebook for Business eBook which was created for small businesses who wanted to use Facebook as a business tool. The Facebook for Business eBook is packed with over 130 pages of step-by-step guides to help you get benefit out of Facebook and starts at the very beginning with creating your Facebook account correctly. The eBook is for newbies NOT seasoned Facebook pros. You can buy the eBook here=> Facebook for Business eBook (its only $17.00 USD). We just updated the eBook as of 1 day ago as Facebook did some major upgrades to some of the functionality so the guide below is up-to-date from yesterday (28 December 2010).

How to Create a Facebook Page Custom Tab

Tabs are used to provide a nice visual appearance to your Facebook Page.
The good news is that you can add your own custom tabs to your Page. The image below shows a custom tab presented on our Facebook for Business Page.

Whats really cool is that you can set the custom tab to be the first tab non-fans see when they reach your Page!

Custom tabs can support very simple HTML such as the example above or even support complex applications that offer games and all kinds of interaction.

For the purposes of this book we will look at creating a custom tab and displaying an image only. This may sound boring and simple but we use this approach on all our Pages including our clients. Its simple but it works. With Facebook, the more complex stuff is, the more its prone to break when Facebook makes changes to their features. They do this a lot!

Follow the steps below to create a custom tab for your Facebook Page:

    1. Click the “Edit” link underneath your Page’s logo.
    1. Click on the “Apps” link within the Admin menu to get to the applications section.
    1. The Apps management page will be displayed listing all the applications currently running within your Page.
    2. At the bottom of the Page there should be a section of recommended applications that you can add to your Page. Locate the “Static FBML” application and click the associated “Add App” button. FBML means “Facebook Markup Language”.
    1. The “Static FBML” application is now added to your Page.
    2. Locate the application again and click the “Go to App” link. The application settings will be displayed.
    1. To recap we have added the “Static FBML” application to your Facebook Page. This will be the custom tab that we want to have on our Page.
    2. Now add a title for your tab in the “Box Title” text box. This title will appear on the tab so be careful you don’t make it too long. If you are enticing people to download a free eBook you have or subscribe to your newsletter have a title such as “Free eBook!” or “Free Newsletter!”.
    3. If you do not know HTML you will need to get someone who does to do the next bit which is add the HTML for the image to the FBML text box. Below is the HTML I have and you can use that if you want. All you need to do is change the bits I have bolded.

<div align="center">
<a href="Link here" target="_blank" title="Click here to download 2 FREE chapters!">
<img src="link to image here" width="500" height="730" border="0" alt="Click here to download 2 FREE chapters!" /></a>
</div>

    1. The form should look like the example below.
    1. Click the “Save Changes” button.
    2. To see the new custom tab look at the top left-hand corner and locate the name of your Page and click it. This will take you to the public view of your Page.
    1. Cool! Now what we want to do is make sure that all the visitors to your Page that are not currently fans see that tab first. Why? Because we want capture their details in your own database (refer to Chapter 2 – Defining a Facebook Strategy).
    2. Click the “edit” link again underneath your Page’s logo and then click on the “Manage Permissions” link.
    1. Look for the “Default Landing Tab:” option and from the list of tabs select your new custom tab. Once done click the “save Changes” button.
  1. That’s it! You have now added a custom tab to your Page and it will appear first to any visitors who are currently not a fan instead of the default view which is the Page’s Wall.

Creating a Reveal Tab

Now that you know how to create a basic custom tab for your Facebook Page we can now look at creating a reveal tab.

Review the HTML code below and paste the code into the FBML textbox for the Static FBML application and save the changes (or create a new custom tab for this test). This gives you a working example of a reveal tab working. I recommend you use this code as a foundation to build your own basic Facebook Page reveal tab. If you do not know any HTML or CSS I throughly recommend you seek help.

<div style="width:520px;height:832px;margin:0 auto; border:0; padding:0;position:relative;">
<fb:visible-to-connection>
<div style="width:202px;height:114px;position:absolute;top:0;left:0;">
<img src='https://BusinessBlogs.co.nz/bb_images/fan.jpg' /> <!-- This image will be displayed to fans -->
<!-- You can also add any HTML that you want displayed to fans -->
</div>
<fb:else>
<img src='https://BusinessBlogs.co.nz/bb_images/not_fan.jpg' id='not-fans' /><!-- This image will be displayed to people who aren't fans -->
</fb:else>
</fb:visible-to-connection>

</div>

What the code is doing above is providing two sections for the custom tab.

One section is to be displayed to the people who are currently fans of the Page. This section is controlled by the Facebook tag “<fb:visible-to-connection>” and if the person is a fan of the Page they will see the image at http://BusinessBlogs.co.nz/bb_images/fan.jpg. If they are not a fan currently then the “<fb:else>” tag will display the image http://BusinessBlogs.co.nz/bb_images/not_fan.jpg

This can get very technical so I recommend you hire a professional to create the HTML and Inline CSS for you.

To test this however just past the code I have provided above into the custom tab you created and access the Page as another person who is NOT an admin of the Page. A current admin of the Page could see both images at the same time so its important that you always test your custom tab with a Facebook user who is not an admin.

So the person accessing your Page who is not a fan currently will see below.

When the person clicks the “Like” button to become a fan of the Page they will see below.

Thats it! Its not too hard when you have the foundation code above but you will need help with creating the images that fans and non-fans will see and some HTML CSS help. I have found that you need to use Inline CSS with this code when viewing the custom tab in IE 7.

Facebook for Business eBook

If you are looking at Facebook in 2011 and don’t really have any idea on how to use Facebook as a business tool then I recommend you buy the Facebook for Business eBook. It took the CampaignHub team 2 months part-time to write the book and the Facebook strategy we defined in the eBook is exactly what we use with our own clients so this information alone is worth the small cost of $17.00 USD.

HubSpot