For Musicians: How to Make a Custom IFrame Tab for Your Facebook Page [FREE TEMPLATE]

screenshot custom facebook page welcome tab using iframes

A couple weeks ago, Facebook announced some really big changes to their Facebook pages. In my previous article, however, I neglected to mention one major change.

On March 11, 2011, the Static FBML application will no longer be available for Facebook pages, and no new FBML applications can be created after that date. Existing Static FBML and FBML tab applications will continue to function for now, but if you want to create any new custom tabs for your page, Facebook strongly encourages everyone start using iframe-based applications instead.

Basically, this renders my old tutorial and template (and most popular article) completely useless. A bummer, I know, but we shall overcome. Onward with the new hotness!

What the hell is an iframe?

iframe html

For the newbs…basically, an iframe is an HTML element that lets you display content from page A on page B. Iframes are typically used to display stuff from one website on another website (e.g. YouTube video embeds). The code for the iframe simply tells the browser to request content from a specified URL (or server), and display it within the constraints of the iframe.

On Facebook, please note that the maximum iframe size that they currently allow is 520 pixels wide by 800 pixels high. If the iframe on your custom tab exceeds either of these boundaries, then ugly scrollbars will appear to help users see the content hidden behind the boundaries of your iframe.

What’s so great about iframes?

Before we start the tutorial, I’d like to take a second to outline the advantages and disadvantages of using iframes for custom Facebook tabs, so we’re all on the same page (see what I did there?).

Advantages

The beauty of iframes is that now you can include virtually anything on your custom Facebook tabs, using all the common web development languages like HTML, javascript, php, etc. Mailing list sign-up forms, your latest YouTube videos, your latest photos from Flickr, whatever else your brain can come up with. You could even pull in your entire online store if you want!

Also, using iframes, you are in control of everything you display on your custom tab. You create your own Facebook applications, and display your own content that is uploaded to your own web server, by you.

Disadvantages

The downside of this method is that you need to be comfortable working with code, which I know is a lot to ask sometimes. And, you will need a place where you can upload the necessary files for your application page via FTP. Basically, you need a website with a hosting plan somewhere, so you can upload your files to the web and display the content using iframes.

Also, you have to create a separate Facebook application for each custom tab that you create, so be sure to name and describe them in detail so you don’t get mixed up down the road.

Let’s get started, shall we?

It’s time to get our hands dirty. In this tutorial, I will show you how to create your own custom Facebook page tab using the new, preferred iframe method.

Click here to view a working demo.

Setting up your web server

First, using your preferred FTP client, you must create a new directory in your web server. You can call it whatever you want, but for the purposes of this tutorial, I made a folder called “facebook”, and a sub-folder called “welcometab,” which is where I will be uploading my files for my custom tab later on.

This way, if I ever wanted to more custom tabs, I can just keep creating sub-folders for each one, and everything stay organized in the parent “facebook” folder in my web server. Your folder path should look something like this:

/public_html/facebook/welcometab

If you don’t know how to upload files via an FTP client, then refer to this tutorial and come on back.

Creating a basic tab with HTML and CSS

If you have the coding knowledge (or a nerdy friend), here is where can do some really cool and complicated things with your Facebook tab. For the purpose of this exercise, though, we’re going to keep it fairly lightweight.

If you downloaded my old template, it won’t work anymore. Here’s a new template which you can download for free and use however you see fit:

Download it’s free!

After you crack open the .zip file, place all of the contents into the “welcometab” subfolder that you created before on your web server. You can edit the CSS (style.css) and HTML (index.html) to your own tastes, using whatever content and styling you want. The choice is yours, I am just providing you with the framework to do so. If you have no idea what HTML and CSS are, then Google is now your best friend, and I wish you luck.

Installing the Facebook Developer Application

After you’ve got your tab content modified to taste and uploaded to your web server, you have to install the Facebook Developer application that will enable you to start creating your own Facebook applications.

To install the application, log in to Facebook and then visit this URL: http://facebook.com/developers

If this is your first time visiting the developers section of Facebook, you will see this “Request for Permission” dialog box:

facebook developers request permission

As you may have guessed, you have to click “Allow” to proceed and install the app.

Creating your Facebook Application

Now, it’s time to create a Facebook application of your own, that will act as the link between your Facebook page and the tab content that you uploaded to your web server moments ago.

Facebook setup app button

Locate and click the “Set Up New App” button on the top left of the page to start the process.

On the following page, give your application a detailed name (especially if you plan on making more) so you can quickly identify what this app does. Agree to Facebook’s terms, and click the create app button to proceed.

Facebook Application Name

facebook security captcha

You’ll be presented with a security check, which is one of those silly captcha things to make sure you’re a human. Play the game, hit submit, and move on.

Configure your Facebook Application

After passing security, you’ll be presented with the meat and potatoes of your new Facebook app. You will notice several tabs off to the left, which are the different sections of your application. Let’s start with the “About” tab.

The “About” tab

Facebook app about

Do yourself a favor, and immediately enter a brief description of your app. If you ever need to go back and make changes, it will be so much easier to identify which app you are looking for.

Also, upload an icon and a logo to represent your app graphically. On your Facebook page, the small icon you upload will appear in the navigation list underneath your default picture. Make sure your icon is something that is simple and easy to read, yet attracts attention. Maybe a simplified version of your logo?

The “Facebook Integration” tab

facebook application tabs

Don’t save your changes yet. Let’s skip the “Website” tab and head on over to the one labeled “Facebook Integration.” There is a lot to fill out on this tab, so bear with me for a second.

In the “Canvas” section of this page, make sure to fill in the following fields:

facebook app canvas

  • Canvas Page: this is the base URL of your app on Facebook.
  • Canvas URL: this is the absolute URL to the tab content that you uploaded to your web server.
  • Canvas Type: make sure that “IFrame” is selected, because that’s what were using!
  • IFrame Size: make sure that “Auto-resize” is selected (you’ll see why later in the tutorial).

In the “Page Tabs” section of this page, make sure to fill in the following fields:

facebook app page tabs

  • Tab Name: this is the name of your custom tab, that will appear next to your icon in the navigation list underneath the default picture on your Facebook page. It can be up to 16 characters in length.
  • Page Tab Type: again, we are using iframes, so make sure that “IFrame” is selected.
  • Tab URL: this is the name of the HTML file you uploaded (index.html) – Facebook pulls content from this file to display on your custom tab.

Finally, click the “Save Changes” button at the bottom of the page.

Add your iframe application to your Facebook page

facebook add app to page

After hitting save, your Facebook application has been created. On the following screen, click the “Application Profile Page” link, which will take you to the newly created page for your Facebook application. Next, click the “Add to My Page” link in the left sidebar, and select the Facebook page that you want to install this application on. You Facebook tab should now be visible on your Facebook page! But hold your horses, we’ve got one final step.

Make sure your iframe auto-resizes

This last bit is a convenient trick that makes sure your iframe does not overflow the 520px by 800px dimensions allowed by Facebook, causing those hideous vertical and horizontal scrollbars to appear. To make sure this little trick works, there are a few things you have to do.

First, you had to follow my previous directions correctly, making sure to select the “Auto-resize” option for the “IFrame Size” field when we were configuring the application.

Next, we have to re-visit the template code that you uploaded to the web server earlier to make a very minor change. In your index.html file, locate this piece of code right before the </body> tag:

<!-- CALL FACEBOOK'S JAVASCRIPT SDK -->
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR-APP-ID-HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>

Where it says “YOUR-APP-ID-HERE” is where you need to insert the identification number for your Facebook application that you just created. You can find that by going back to the Facebook Developers section, clicking on the name of your app, and locating the section entitled “Application ID.”

Facebook app find id

Copy and paste that number into the proper spot in the code, save your changes, and your tab should be all set up!

Click here to view a working demo.


(Optional) Add statistics tracking to your custom tab

If you’re interested in tracking hits to your custom tab using Google Analytics or a similar service, you can easily do so by copying and pasting the code your statistics service gives you right before the </body> tag in your index.html file.

  • http://www.quietentertainer.com/free-download/ Quiet Entertainer

    After work I'm going to look into this more thoroughly. I am wanting to recreate my landing page on my facebook.
    http://www.quietentertainer.com/free-download/

  • http://tightmixblog.com Chris B.

    Awesome! Feel free to post any questions/issues/whatever when you decide to read it.

  • http://twitter.com/g_ro Greg Rollett

    Yo Chris – this is the shit! Good work man. I really believe Facebook will be driving a lot of traffic for musicians and artists over the next few months. This template is really fresh and clean.

  • http://tightmixblog.com Chris B.

    Thanks Greg! I just hope some people out there are brave enough to jump into the CSS & HTML and really get their hands dirty.

  • adamhoek

    having a look i cant find the edit button for step 5. all i see is edit my profile

  • http://tightmixblog.com Chris B.

    Are you attempting to do this on your personal facebook profile? This is a tutorial for Facebook Fan pages. If you are the admin to a Facebook Fan page (if you created the page you are automatically the admin), the “Edit Page” link will appear underneath the default photo on that Facebook Fan page. Make sure you are on the “Wall” tab for the Facebook Fan page.

  • adamhoek

    ah ok, got it. thnx

  • Falsifiedidentity

    Hey man. I followed your directions exactly, but I got some pretty major formatting problems.
    Here: http://imgur.com/X5YkS.jpg

  • http://tightmixblog.com Chris B.

    HA! Figures, the day that I release a template for Facebook pages, they decide to change the width from 720px to 520px. wwwweeeeelllll then, looks like I have some work ahead of me tomorrow to fix this!

  • Falsifiedidentity

    Well, the demo you already have seems to be working. :
    Oh, and how did you get all the shit on the left to disappear once the “Welcome” tab is pressed?

  • http://tightmixblog.com Chris B.

    ANNOUNCEMENT: Just so everyone knows, Facebook decided to change the width of its fan page tabs today … yes … on the same day I released this damn template. However, I have spent all night modifying the template, and replacing the download. Feel free to download the updated template, and follow along to the updated tutorial.

    That’s all, folks. Leave any questions or comments!

  • Falsifiedidentity

    Hey, me again. Thanks for the update. Dimensions are good now. How did you get all the detail boxes down the left-hand-side to go away when you clicked on the custom tab?

  • http://tightmixblog.com Chris B.

    Hmm it used to do that automatically, but with the new tab width it appears that Facebook has inserted that content back in, unfortunately.

  • http://www.eatsleepbreathemusic.com Eat Sleep Breathe Music

    This looks really cool, but will the changes Facebook is making to the pages (i.e. removing boxes) affect this?

    Thanks!

  • http://tightmixblog.com Chris B.

    I stayed up all last night and fixed the template, so it will be compatible with the new tab width (520 px) that will be in effect after August 28th. Re-download the template if you downloaded the old one!

  • Falsifiedidentity

    Hey, me again. I’ve got absolutely everything up and working fine except for the invite friend’s part. : For some reason, it works through the whole process until the actual sending, where it just displays: “Sorry, your request could not be processed.” Is this happening to everyone, or just me?
    Please try again”

  • Falsifiedidentity

    Fuuuuu- Dunno how the “Please try again” found its way to the end. O.O

  • http://tightmixblog.com Chris B.

    hmmm strange, copy and paste your code here so i can look at it

  • Christian

    Good tutorial, but I’m having trouble finding a good place to upload my style sheet. The band doesn’t have its own website and I don’t know anyone I can piggy back from. What do you suggest?

  • http://tightmixblog.com Chris B.

    Try hosting the .css files using Google Sites. Check out this article for instructions: http://www.hyperarts.com/blog/hosting-external-css-stylesheet-facebook-google-sites-static-fbml/

  • Pingback: MySpace Finally Re-Designs User & Musician Profiles | Tight Mix Blog

  • Zoza_blue

    hiii thank u for the info>>>>
    i have problem in putting a picture in the tab it dosent sgow part of the picture can u help??

  • http://tightmixblog.com Chris B.

    I cant really be of much help without any code or a link to your page …

  • Jen

    I don’t have the option of my Wall Settings where I can select the Welcome tab to be default, it seems to be missing in my settings? Did Facebook change this?

  • http://tightmixblog.com Chris B.

    Hmm that’s strange … no, they did not change that, it should be towards the top in the “Settings” section…

  • Pingback: Myspsce Re-Design Their Interface | Cyber oniro | Online Solutions For musicians

  • http://Fans4FB.com Mike

    Wow, chris. That’s pretty cool! Thanks for the tips man! I’m going to pass this link on to my clients.

  • http://twitter.com/lifewithamour Emily Lu

    NICE!! Thanks for the tutorial. Hopefully I’ll have some time to work on my fb later at home. I’m still pretty new at this, do you know if I can use Dreamweaver to work on the CSS??

  • http://tightmixblog.com Chris B.

    absolutely! dreamweaver will work just fine since all you are doing is editing the raw code.

  • http://www.ALittleBitWeird.com Nick

    Hey man,

  • http://www.ALittleBitWeird.com Nick

    Type your comment here.

    First off, thanks so much for taking the time to put this together as a tutorial. This is really great stuff. I seem to be having a problem though. I’m relatively skilled with HTML/CSS, but for some reason it doesn’t seem like the css is linking properly. I’m hosting my CSS at http://www.nickcamillo.com/music/facebook/fbtab.css and this is what I have at the top of my fbml tab:

    And here’s the link to my fb page: http://www.facebook.com/pages/Nick-Camillo/316580824084?v=app_4949752878

    Any/all advice would be greatly appreciated.

    Thanks again!

    -Nick

  • http://tightmixblog.com Chris B.

    I tried visiting http://www.nickcamillo.com/music/facebook/fbtab.css and the page returns a 404 error, are you sure you uploaded the .css file to that folder?

  • eviltasteschalky

    ‘Really want to take advantage of this, but your download link is taking me to a page titled “4 Ways to Book Your First Gig”. Help?

  • http://tightmixblog.com Chris B.

    Ahh! Dude, thanks for pointing that out, I was wondering why my download numbers weren’t going up…haha….it should work now.

  • eviltasteschalky

    Thanks! ‘Was able to download this time. ;¬)

  • eviltasteschalky

    Arrrrrrrrrrrrgh! ‘Don’t know what I’m doing incorrectly. (You’d never be able to tell I actually *do* Web work on the side.) I’ve followed your instructions to (in my estimation) the “T”, but rather than calling the stylesheet, my “Welcome” tab shows the code. Help!!!!!!!! (Please.)

  • eviltasteschalky

    ‘Got it! Never mind. It suddenly started working. ‘Must’ve been a glitch on Fb.

  • http://tightmixblog.com Chris B.

    To change the styling and positioning of stuff, you have to edit the CSS code, and change the version number in the stylesheet declaration.

    For example, do you see “?v=40.0″ at the end of the href attribute in the stylesheet declaration below? If you change it to ?v=40.1, then Facebook will update the CSS with whatever changes you have made.

    If you make another change to the CSS, you have to change the version number again, to something higher, like 40.2, 40.3, and so on for every time you make a change to the CSS file.

    I should probably update the tutorial to include this bit of information.

    Let me know if this helps!

  • Urban Legend XD

    Awesome stuff man (Y) Its 4 in the morning, our bassist is still keeping me awake, so i thought id do some work. Easy to follow steps, slowly working out the kinks. Love it mate (Y)

  • http://tightmixblog.com Chris B.

    Glad you liked it!

  • Asharox

    how to you move template on?

  • Pingback: Facebook Upgrades its Fan Pages, Good News for Musicians | Tight Mix Blog | Tight Mix Blog

  • Ninegauge

    Brilliant! Just one problem; users can invite friends but after they do, an error message appears saying the invite was unsuccessful. However, I think the invite is still sent. Do you know if there is a way the request can be sent and the correct confirmation message to appear?

  • http://www.makeitinmusic.com Ian

    Chris

    I was hoping someone would do exactly this. Awesome update of an awesome post.

    Ian

  • Pingback: Facebook iFrame Tutorial – you NEED this « Make It In Music Daily

  • http://tightmixblog.com Chris B.

    i got ur back 8)

  • Pingback: Volume 11 - Music News for Music People™

  • http://lucassoler.myopenid.com/ Loque

    Hi Chris, thank you for the tutorial. I’m having trouble with my tab, I get the FBML error: illegal tag “body” under “fb:tab-position”.
    Do you know what might be wrong? It seems to be trying to load a FBML canvas type instead of an iframe, although it was set as iframe just like you said.

  • http://lucassoler.myopenid.com/ Loque

    Well facebook expected a FBML type canvas because I was still using the old Page style (not shure how it’s called in english). Updated the page and now facebook loads the iframe.

  • Chas

    Set auto resize with js sdk

    FB.init({
    appId : ‘App ID’,
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml : true // parse XFBML
    });

    window.fbAsyncInit = function() {
    FB.Canvas.setAutoResize();
    }

  • http://twitter.com/missyuu Wendy Yu

    How do I get rid of the right sidebar like in the demo? Also, for some reason it does not auto resize, it’s still showing the ugly scrollbars. I’ve added the auto resize function as well, also selected auto resize in the settings but it ain’t working :@!

  • Asdf

    I think you did an excellent job putting this together! Getting rid of the FBML is such a pain I’m glad I found your tutorial. Thanks!

  • http://jesse.la Jesse Wilson

    Great instructions, thanks! How do I make it display one page before my FB Page is liked and another after it’s liked?

  • Ben

    Very helpful tutorial.  I just got my version working and had one glitch to share with your readers.  My html code is hosted on an IIS server, and when I first set things up I was getting a 405 error when FB tried to load the code on the canvas.  After trying a bunch of things, I finally realized that I had to name the page using a default page name, e.g. “index.asp”.  I originally named it “fbindex.htm”.  FB attempts to load a default page from the specified folder and that triggered the 405 error.
    It’s up and working now, thought I still have to fix the “ugly scrollbars”.
    Thanks again for saving us all a LOT of hassles with the great instructions.

  • Ashish

    grrrrrrrrr8 work bro

  • Seb

    Has Facebook moved things since you posted this because I can’t find the “Applications Profiles Page” link anywhere? I’ve got the page set-up and ready to go I just need to add it to my company’s profile page. 

  • Pingback: For Musicians: How to Make a Custom IFrame Tab for Your Facebook Page [FREE TEMPLATE] | Themes & Plugins

  • Ankit

    thnxx dude…!!
    God bless you…!! :)

  • http://www.facebooktabdesigns.com/ facebook tab design

    Great article, I like how you provide a basic template for your visitors. I do not need this myself but it really helps out and stops the confusion a little bit. Keep up the good work.

  • http://www.primrose-valley-caravan.com/ Barry

    This is excellent especially for the users who do not know how to code! This will really help me out as I plan to make a page for my caravan. Thank you very much!!

  • http://www.socialcubix.com/ Facebook App Developer

    Your answer is outstanding, really awesome to me.

  • http://www.socialcubix.com/ Facebook Development

    hmm your are really good at this comment, well done and have a nice day.

  • http://www.socialcubix.com/ Customize Facebook Apps

    Really informative answer.

  • Piyush Gangwani

    i need the latest help options this is not working i cant find app’s page to add it into my own page :(