How To Easily Add a New Facebook iFrame Tab to Your Facebook Page and Manage with WordPress.

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.

Posted By: Michael Brandvold (Michael is a 20 year music marketing veteran who has worked with unsigned indie bands and international superstars. Michael owns Michael Brandvold Marketing a site dedicated to providing tips and advice for musicians.)

Comments

[Michael]

Oh! cool Boss eyeglasses I understand

[Kevin Heard]

I can confirm that this is a great little app. I use it all the time.

[Mastering Online Guy]

This is a great article used on my website.

[Edward]

Thanks a lot for this marketing research it appeared to be pretty useful in my recent sci work for the casino bonukset partners of our company

[andy]

thanks for the help