Creating Facebook Reveal Pages with FBML

Creating Facebook Reveal Pages with FBML

Filed under News Blog, Tutorials

Written By : Kyle Bahr

Social Media marketing has become an absolute must for every business. Connecting with your target audience is becoming easier and easier online and facebook is one avenue that can produce exceptional results if done correctly.

This article will show you how to create a custom “Welcome Page” for your facebook viewers and display different content depending on whether have have “Liked” your page.

Step 1

Add the FB App to allow you to enter custom code:

  1. Login to your facebook account
  2. Edit the page you wish to add the Welcome Tab
  3. On the left hand column, select Apps

  4. Find and add the Static FBML App to your facebook page

Step 2

Configure the new App to use your custom reveal code:

  1. After you’ve added the Static FBML App, go back to the Apps tab
  2. You’ll now see the FBML App, Select “Go to App”

  3. You’ll now see the area where you can add the Title and Content
  4. Add a title to your Custom Tab (i.e. Welcome)
  5. Insert the code below and modify to suit your needs
<div style="position:relative;height:400px;width:520px;">

<fb:visible-to-connection>

<div style="position:absolute;top:0;left:0;height:360px;width:520px;background:#fff;">
This content is visible to Fans
</div>

<fb:else>

<div style="position:absolute;top:0;left:0;height:360px;width:520px;background:#fff;">
This content is visible to Non-Fans
</div>

</fb:else>
</fb:visible-to-connection>

</div>
</div>

After you’ve modified the code and made your changes, you can paste it into the FBML field and save. Once you save, the new Static FBML tab will be added to your profile.

Note: to keep your reveal code compatible across all browsers, use inline-styles and avoid using <style></style>.  Images should use the full path back to the source (i.e. http://yourwebsite.com/path/to/image)

Step 4

Set your new FBML Tab as the default tab when a user views your profile:

  1. Edit your page and go to Manage Permissions
  2. Select your “Welcome” tab from the dropdown and save

Once you’ve completed the above steps, you’re all ready to go.  The static FBML App can be used for almost any type of HTML content and will give your users a more customized experience.

Written By : Kyle Bahr

With nearly ten years experience in digital media, graphic design, front-end development and creative direction, Kyle Bahr has spent the last several years growing an online presence and portfolio with EnlightenMental Productions with the hope to build continued success online and in life. A strong...

has written 9 articles