With the launch of Facebook’s iframe tabs, some marketing folks are uncertain how to create a reveal tab or fan-gate without using FBML’s visible-to-connection construct. I’ve quickly pulled together a demonstration that walks you through the process to create your own. As described in Facebook’s documentation, the process involves inspecting the values of the signed_request parameter that is sent with each iframe request. Facebook’s PHP SDK make this very simple as the code demonstrates and then a simple check will let you switch the content!
As a bonus, you can also now add the like button within the body of your tab and have it work!
Update: AF-Design has launched My Tab an application that allows page administrators to build custom fan pages without the need for programming in PHP.
Hello Eric,
Thanks for sharing your experience – it’s very useful!
One thing that I am wondering now is to create an form to allow web site users to invite their FB friends to a page of the web site.
May I ask you forsome suggestions?
Thanks in advance!
Nick, I used the new FB.ui apprequest code to create the share with friends. You can see an example of implementing that here: http://af-design.com/blog/2011/02/17/using-facebook-requests-to-promote-a-website/
I just coded up a simple app that lets you build a reveal tab without any backend coding, or making your own application: http://on.fb.me/gFHdQV
I hope it’s helpful. Let me know if you have any questions or feedback!
- Jason
Hi Erik.
I have been following along with your reveal demo and have managed to create and upload most everything. I am stuck since I am not sure where I am supposed to load the tab.php. Or, are you saying that the reveal content has to be in the tab.php file format (just with the tab name?)
Perhaps I am way off here. Looking forward to your response.
You would upload the PHP code to your application server. Alternately, you could use this: http://apps.facebook.com/reveal_tab/
Thanks for sharing Jason
Other than using the reveal_tab app is there a way to implement a fangated iframe without using PHP? Any help is appreciated.
Sean, you can use My Tab http://www.facebook.com/revealtab which allows you to cut and paste your code and generate a page without needing to know PHP.
Erik, does your application support javascript? can i use like jquery and stuff?
Jonathan, the hosted application My Tab does not support any scripting at this time. However, it does support the legacy FBML attributes clicktoshow and clicktohide which at least provide a facility for hiding and showing divs. For example
<ul class="tabs">
<li id="tab_1" clicktoshow="tab_1_content" clicktohide="tab_2_content,tab_3_content">Tab 1</li>
<li id="tab_2" clicktoshow="tab_2_content" clicktohide="tab_1_content,tab_3_content">Tab 2</li>
<li id="tab_3" clicktoshow="tab_3_content" clicktohide="tab_1_content,tab_2_content">Tab 3</li>
</ul>
<div id="tab_1_content">
I'm Tab 1 Content</div>
<div id="tab_2_content" style="display:none;">
I'm Tab 2 Content</div>
<div id="tab_3_content" style="display:none;">
I'm Tab 3 Content</div>
Is it possible to use more than on ‘My Tab’s on my Facebook page?
*more than one
Yes, there are five installs of My Tab currently available.
Hi Erik,
How can I make an app similar to your Reveal Tab app or the Static HTML app so that I can have people create their own iframe tabs on their pages?
Thank You for this tutorial.
@Geekee Sorry, we’re not providing the code for how to build your own app!
Hi Erik,
I have created a tabbed iframe and also created a form . My issue is that when i submits the form the thankyou page is not displayed in the iframe. Its opened as a different page.Can you please give advice how to make the page displayed in te iframe itself.