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
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
Is there a way to add a video with an opt-in box to the section once they’ve clicked ‘Like’?
@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
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
Your example doesn’t work Erik
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!
Glad it worked for you Shani.
I give up on putting the code in a comment.
I will email it to you
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!
I tried to put the code I used. but it won’t show it here 🙁
Ya getting code to show in the comments isn’t working .. sorry.
But I see that it works and I “liked” you page.
Don’t forget to also get you custom URL for your page.
Mine is -> http://facebook.com/yourlocaltech‘
You could get -> http://facebook.com/ribbongarden
Go here to set it up:
http://facebook.com/username
have a great weekend
Etsy rules!
@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.