How To Create A Facebook Landing Page In 3 Easy Steps

on 2010, 2011, BlogMarch 30th

Shared by anthony

Creating a Facebook landing page that “unlocks” the page after a user likes the page is a crucial step toward obtaining facebook likes. These 3 steps easily explain how to use Static HTML iFrame Tabs to quickly and easily create a locked landing page on facebook.

Since Facebook made the switch from FBML to iFrames for custom Facebook page tabs, many have been left wondering how to quickly convert new visitors to fans within the new system. Fortunately, it’s not as complex as you’d think. Here’s how to create a Facebook landing page and quickly boost your fan base in three easy steps.

Step 1: Install Static HTML iFrame Tabs

Since the original static FBML application no longer works on pages, one creative developer came up with an extremely user friendly way of getting a custom tab set up instantly. And the application has reveal functionality built in.

For those who aren’t aware of what this means, here’s a quick explanation: when a new visitor comes to your page you can prompt them to like your page before presenting additional content. An example of the reveal tab which we developed is shown in the next step so scroll down to see it. In order to get the Static HTML application installed, click here and then scroll down to where it says “add to my page,” as pictured below.

Install Static HTML Screenshot

Next, select your page from the list which pops up and select “add to page.”

Add To Page

Step 2: Design Your Landing Page

One of the most time consuming parts of creating a reveal tab is the design of the tab. There are a number of companies that are currently offer such services, but it’s somewhat difficult to automate the creation of a nice design. Ultimately, you could use any design service to create your custom tab as long as they know the restrictions of tabs. The main limitation to know is that custom tabs must be 520 pixels wide. I used Photoshop to create the reveal tab pictured below.

The key thing here was that I had something to give to visitors who came to our Facebook page. If you offer a visitor something for becoming a fan, you’ll dramatically the number of new visitors who become fans. This has helped dramatically boost the number of fans that we get when they visit our page. Combined with Facebook ad campaigns, reveal tabs can be priceless.

In addition to designing the reveal tab, you’ll need to design how the tab will look once the reveal image is gone. Below is a screenshot of what we display once the person clicks like.

Step 3: Create The Facebook Landing Page

Now that you’ve come up with a template for your Facebook landing page, head on over to the page that you want to configure and click on the tab which says “welcome.”.All you need to do is enter the HTML for the content which you want all visitors to your page to see. This should be teaser content which convinces the user to click like on your page. In the second box, you’ll want to enter the HTML which will display fans-only content.

Welcome Tab Screenshot

Here’s some extremely basic code which you can enter into the first box:

id="wrapper">
   style='width:520px;'>
      src='[Insert Image URL Here]' />
     
 

And here’s the code you can enter into the second box:

id="wrapper">
   style='width:520px;'>
      src='[Insert Image URL Here]' />
     
 
view raw
gistfile1.phtml
This Gist brought to you by GitHub.

Notice anything unique about the code? The two are basically identical. All you need to do is create two images that you want displayed: before and after. If you want your tab to work with Internet Explorer 6 (something which most developers hate doing), you can save your CSS in another file somewhere and link to it with the following code:

view raw
gistfile1.txt
This Gist brought to you by GitHub.

It’s as easy as that! If you want to learn more about customizing your Facebook Page, go download our comprehensive Facebook pages guide.

    

See the article here:
How To Create A Facebook Landing Page In 3 Easy Steps

Tags: , , , , , , , , , , , ,