How to Create a Reveal Tab for Facebook Pages

This is a follow up for the members (and anyone else) of the Facebook Marketing Mastermind meetup. I showed a few pages but the code I will show below is for The Pixel Mom (custom photo art mugs)

 

[text]
<div style="height: 650px;">
<div style="margin-top:0px; position: absolute;
top:0px;left:0px; height: 500px;; width:100%;">
<img src=’PASTE IMAGE SOURCE FOR FIRST IMAGE HERE’ />
</div>
<fb:fbml version="1.1">
<fb:visible-to-connection>
<div style="margin-top:0px;margin-bottom:40px; position: absolute;
height: 500px; top:0px;left:0px; width:100%; background-color: #FFFFFF">
<img src=’PASTE IMAGE SOURCE FOR SECOND IMAGE HERE’ />
</div>
</fb:visible-to-connection>
[/text]

Instructions. Copy the above code into your FBML tab/box. Replace the parts for the images with the link to your images A link to an image looks like so http://thepixelmom.com/fb-tab/fb-tab-b4-2.jpg My code for The Pixel Mom FB Page looks like so:

 

[text]
<div style="height: 650px;">
<div style="margin-top:0px; position: absolute;top:0px;left:0px; height: 500px;; width:100%;">
<img src=’http://thepixelmom.com/fb-tab/fb-tab-b4-2.jpg’ />
</div>
<fb:fbml version="1.1">
<fb:visible-to-connection><div style="margin-top:0px;margin-bottom:40px; position: absolute;height: 500px; top:0px;left:0px; width:100%; background-color: #FFFFFF">
<img src=’http://thepixelmom.com/fb-tab/fb-tab-after-2.jpg’ />
</div>
</fb:visible-to-connection>
[/text]

 

Thats it

12 Comments

  1. candy on November 19, 2010 at 6:58 pm

    in theory yes, but in reality is does not work, or facebook is buggy again ..
    I had a s”else” kind of code that worked earlier today, now it’s all dead !

    I tried your code, same result – either showing BOTH versions – for connection and non connection – overlapped (if I use else) or a white page (if I use your version)
    I hate FB

  2. Amy Starr Allen on December 8, 2010 at 12:28 pm

    Is there a way to add a video with an opt-in box to the section once they’ve clicked ‘Like’?

  3. Loren Nason on January 3, 2011 at 4:37 pm

    @candy … did not see your comment .. yes FB is buggy

    @amy .. not to sure on the video w/ opt-in box… i would say anything is possible but finding to the code to make it work is the hard part

  4. Erik Giberti on February 16, 2011 at 1:51 pm

    Facebook has launched IFrame tabs and is phasing out FBML. Starting in March 2011, the only way to add a new tab will be by creating an application and installing a tab. This explains how to do that:
    http://www.facebook.com/application.development.design?sk=app_198954953450233

    • Loren Nason on February 16, 2011 at 5:42 pm

      Your example doesn’t work Erik

  5. Shani on February 25, 2011 at 11:06 pm

    It worked!!! thank you! I tried numerous codes, but none of them worked. Yours WORKED!!! I’m so excited! Thank you!!!! I just have a one question though. How can I add a link to the after picture? so when they click on the page it goes to my website. Thank you again!

  6. Loren Nason on February 25, 2011 at 11:29 pm

    Glad it worked for you Shani.

    I give up on putting the code in a comment.
    I will email it to you

  7. Shani on February 25, 2011 at 11:53 pm

    I couldn’t get that to work. So I tried this one and it worked –

    checkout my page – http://www.facebook.com/pages/Ribbon-Garden/134507049900308

    Thank you for your time!

  8. Shani on February 26, 2011 at 12:01 am
  9. Shani on February 26, 2011 at 12:03 am

    I tried to put the code I used. but it won’t show it here 🙁

  10. Erik Giberti on March 9, 2011 at 2:31 pm

    @Loren, Sorry you had issues working with the code. With only a few days left until Static FBML is no longer usable, there are a number of alternatives to hosting your own application, including this one http://www.facebook.com/revealtab/ which accepts the most common FBML tags.

Leave a Comment