Many of you may or may not have heard about the recent change Facebook has made to Pages; ending the use of FBML for custom tabs and replacing them with iFrames. If you have existing tabs using FBML they will continue to work, but you will not be able to add new tabs that use FBML. Moving forward every new custom tab you add will use iFrames. iFrames are type of html programming that in its simplest form imports and displays a website or web page inside a frame, in this case the frame is the custom tab in Facebook. Don’t panic if this sounds complicated or confusing. I just spent the weekend looking for the simplest way to create new Facebook iFrame tabs and think I have a drop dead simple way that anyone can do. If you are running your website on WordPress and can install a new plugin, even better!
I am going to try and walk you through doing this without any heavy geek speak or programming. If I cross the line please slap me, lol.
Step 1: Visit this Page in Facebook, Static HTML: iframe tabs. Click Add this application to your Page in the left column. Goto your page and click the Welcome tab in the left column.
Step 2: Creating your new iFrame tab is as simple as either pasting in some html copy or just typing some copy into one of the two available fields in the new tab. The top field (Enter Your Content Here) is what everyone would see, including users who have not Liked your page. The bottom field (Optional Fans Only Content) is what would be seen by only the users who have Liked your page. Now you can easily provide exclusive content to fans who have Liked your page. Example, Like your page and see a exclusive video, exclusive photo, free download. Great incentive. If you are going to provide something for only your fans that Like your page, be sure to also add something in the field for everyone that says something along the lines of Click Like to see a exclusive video.
Static HTML: iFrame Tabs
After inserting either text or html into the field click Save and View Tab. Now you can click a link to see what your tab would look like if you are not fan and click a link to see what your tab would look like if you are fan.
Save and View Static HTML: iFrame Tab
Done, you now have a new custom iFrame tab. Take a minute to read FAQ in the app, it provides helpful information on how to add more tabs, change the name of the tab, how to change what tab is displayed when someone visits your Page and how to import a web page from your website into the tab.
This is important, the content displayed in the tab shouldn’t be any wider than 520 pixels otherwise you will have scroll bars left and right and it will ruin the clean look of the tab.
Create and Manage a Facebook iFrame Tab with WordPress
Now comes the cool stuff for those of you with a WordPress website. Go out and find the plugin Facebook Tab Manager, and install and activate it. If you start reading the documentation about what you have to do to setup a tab, don’t panic! I am going to make this so simple for you. Facebook Tab Manager basically helps you create WordPress pages that fit in the 520 pixel width for a tab, but the page does not appear in your real website. You can insert media, audio, video, links, forms anything you might normally add to a page and it will appear in the tab.
Let me show you a example. On my site I have a page for 2000 Things to Generate 20,000 Fans. I opened that page in my WordPress admin and copied the html code. Next in Facebook Tab Manager I created a new page… the admin looks very familiar. Make sure you are in html edit mode, paste in the html code. Add a title to the page. Click Publish. In the settings below the edit window make sure you check Open Links/Post Forms to New Window, this is so new pages do not open inside the small tab in Facebook.
Now scroll down to the section labeled To Install This As A Facebook Tab. Find the line that begins with Tab URL and copy that url. This is URL to this new Page in your website. Ignore all the rest of the directions for setting up the tab, I am going to show you how this is so easy when used with the Facebook app you just installed, Static HTML: iframe tabs.
Facebook Tab Manager
Switch back over to your Page in Facebook. Either add a new Static HTML tab or edit a existing one. In one of the content fields paste in this code:
<html><head>
<meta http-equiv=’Refresh’
content=’0; url=http://example.com?page=42′ />
</head>
</html>
Replace http://example.com?page=42 with the URL you just copied out of Facebook Tab Manager, the Tab URL. What this is doing is telling the iFrame tab to load the new WordPress Facebook tab page you created into the tab. Now save and preview the tab. You should be looking at your WordPress page being served up inside Facebook. Pretty cool! And very easy!
Now if you ever want to change the content of that tab in Facebook just edit the Page in WordPress Facebook Tab Manager and the changes automatically get pushed to Facebook.
Here is the link to my 2000 Things to Generate 20,000 in Facebook. Compare that to the real page in my site.
How To Embed SoundCloud in Your Facebook iFrame Tab
Now start experimenting with what content you can serve up in a Facebook iFrame. You can embed SoundCloud files and have them play inside your tab. Here is another example, I created a Facebook tab for The Music Biz Weekly Podcast using WordPress Facebook Tab Manager. This time I added three SoundCloud files to the page. Just copy the embed code from SoundCloud and paste the code into the html editor of your Page in WordPress. Important note about media: Facebook does not want you to have autoplay media in a tab, if you do you risk having Facebook shut down your Page. So feel free to add audio or video, just don’t set it to autoplay.
How To Embed a Contact Form in Your Facebook iFrame Tab
You can also add contact forms. Here is a tab I created for Speaking Engagements that uses the Contact Form 7 plugin. Just setup the Page with Contact From 7 as you would normally in WordPress. The Contact Form 7 shortcode works just fine. On this Facebook Tab I did not select Open in a New Window since I wanted the page returned after submitting the form to reload in the tab.
How To Deliver Content To Only Fans Who Like Your Facebook iFrame Tab
Here is a tab I created to show you how it would work if you are not a Fan, but then deliver a exclusive video once you click LIKE, If you are not a fan you see some copy telling you to click LIKE and what you will get when you do, of course you can make this look however you want. Click LIKE and then this page automatically reloads and displays the video. Give it a try. Think about how you can use something like this to give fans a incentive to click LIKE. This is as easy as inserting something into both fields in Static HTML. The top field is what is seen by those who have not clicked Like. Enter something that explains what they will get when they click LIKE. In the bottom field you will enter the content to display once they click LIKE.
If you created something interesting using these tips please let me know, I would love to see your tabs. If you need help setting up costum tabs on your Facebook Page feel free to contact me.
FYI looks like the iFrames don’t work on iPhone… Pages came up blank in my browser.
I will look into that. Facebook just can’t make things easy. Obviously they don’t work in the Facebook app.
Here is the scoop, known buy http://bugs.developers.facebook.net/show_bug.cgi?id=15566 only works on iPad. Other mobile devices do not work.
Too bad… It’s a deal breaker for me. Especially living in Japan where *everyone* accesses everything via mobile devices. Should be upgraded to a severity 1 defect.
Damn; I’m still working on the ThingLink post!
If you’re sharing this kind of stuff for free on your blog, I can only wonder what kind of Bad Assedness awaits your paying customers. Thanks again, my friend.
LOL. I think the reality is that even sharing this sort of info MANY are not going to be able to do it themselves or don’t have the time to do it. Let alone designing the content to insert into the tabs. That is the sort of assistance I can provide. Building it is one thing, actually doing something with it is completely different.
Wow – thanks for that. That’s the best news I’ve heard since, “I’m an exhibitionist, too!”
I’m pretty sure that I’m working hard enough, and I think I’m working smart enough, but still felt like I was uniquely inept in the time management area (although I refuse to give up coffee with you and Lefsetz).
I’ve had offers of help with different aspects of the “business” side of the Music Business, but I have two requirements that seem to cancel each other out:
1. I have to be able to afford them.
2. They have to be better than me at doing the work.
I have recently begun my search for an Intern, but so far have only found “Street Team”-level folks with more enthusiasm than skills, and it’s invariably faster to do stuff than it is to teach, correct, and THEN do it.
Empirical evidence suggests that my on-stage product has enough Entertainment Value to merit my continuing absence from Joe’s Bait Shop, Deli and Condom Rental, so I’ll keep plugging along until I’m an “overnight success”. Thanks for bringing that day nearer.
Let me know if Billy and The Boingers get back together and need an opener.
Interesting technique for using Facebook Tab Manager. What’s the advantage of doing the redirection this way rather than following the instructions provided by the plugin? Do you think it’s faster to set the tabs up this way?
If anyone wants more documentation on FB Tab Manager, see http://bit.ly/f7c5iF
I know from my own experience having to create apps in FB is a bit confusing, and having to create a app for each tab seems like more work. I am also looking for the most drop dead simple way for a band or musician to do it on their own.
How do i add a youtube video or a bright cove video? I knew how to with FBML but now i have not clue? Help?
Are you doing this using WordPress and the Tab Manager plugin? Or by just pasting the html into Static Html?
I didnt know you could do that with word press? ya just pasting the code into an iframes app..
Yes, if you install the plugin Facebook Tab Manager, then you can build a page in WP and insert it into your FB page. The article talks about how to do that. If are just using the FB app Static HTML then you should be able to just past the YouTube embed code into the field.
Ugh! haha so im having issues on understanding hot to install wordpress to my computer.. Can you use plugins for the wordpress wedsite? Help? y did they have to change FMBL i have so much work to do
WordPress is something you install on your web server, at your hosting company. Many companies have one click installs. If you don’t have WordPress you can easily just paste html code into the Static HTML app. If you are still having problems contact me, I can assist setting up a couple custom tabs for you for $149.95. That includes a one hour consultation phone call.
Well even if i figure this out i would want to talk to u about having u build tabs. Im with a website that does film stuff but we were offering fbml tabs… Can u play video in Static HTML tab?
Sure, a iFrame is nothing more than a web page framed inside Facebook.
This is simply awesome. Great Post. Made my life easier. I was struggling with the FBML and I am not even a coding guy. Just an avid Social Media Enthusiast and ofcourse a comic blogger. I hope Facebook Shuts down one day though!
Great Post. Was struggling with FBML and I am not even a coding guy. Just a social media enthusiast and a comic blogger. I hope Facebook shuts down one day!
With your instructions + the FB ap static htlm:iframe tab + Carr Communications Tab Manager support, I was able–in a straightforward way- do something unique for our new FB page. Thanks, you gave me the courage to try something new–best part is I know I can easily change it!
Thanks for making this so simple!!! Greta job! I do have one question, how do I rename the tab on FB? I need the tab for a google map, so need to to say something other than “Welcome”
Thanks much!
Rob
I found the FAQ at the top! ignore my post! Thanks.
I’m stuck in a loop with this. I appreciate your instructions. They’re the best I’ve found, but I got the option to simply insert a url in my iFrame tab. I did that and now I don’t get my webpage within FB. I get linked out to the webpage and FB disappears. Then I’m stuck in a loop unable to even get to the app settings page. It flashes up for an instant then I’m back out to the webpage.
Then the only thing I can do is uninstall the app, but when I reinstall, no matter which static html app I use, the same thing happens. I’ve tried different browsers and emptying cache and cookies all to no avail.
I don’t suppose you have any suggestions for me? Any direction would be appreciated.