For Musicians: How to Make Custom Tabs for Your Facebook Page Using Iframes [FREE TEMPLATE]

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?

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 [You must be registered and logged in to see this link.] 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:

it’s free!
[You must be registered and logged in to see this link.]

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: [You must be registered and logged in to see this link.]

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

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.



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

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:

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:

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

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="https://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.”

Copy and paste that number into the proper spot in the code, save your changes, and your tab should be all set up!
(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.
Click [You must be registered and logged in to see this link.] to view a working demo.
source:/tightmixblog.com