I wrote about this before but we all know that facebook changes things on daily basis so the previous article has become obsolete, this is why I decided to update it and actually create a whole new tutorial as mostly everything in the old one no longer applies.
To add some custom HTML to facebook you have to create a facebook page, (not to confuse with a personal facebook profile) and then add HTML to it via a custom iFrame Application. Now don’t get scared off by this, I will walk you through every step in this tutorial.
I’ll show you how to create a facebook page first and then we’ll get our hands dirty with the iFrame goodness.
Creating A Facebook Page
After logging into your facebook account, go to http://www.facebook.com/pages/create.php and follow me as we create a facebook page.
Choosing The Right Page Category
On this page you can choose to create one of six different types of pages, depending on what category your page topic falls under. Choosing the correct category for your page will ensure that your potential customers are able to find your company easier. You also get to have special information that you can add for each category that might not be available in other categories. So make sure to choose the correct category. Let’s take a look at each one and what kind of businesses they apply to.
Local Business or Place
If you have a physical retail location that customers would come and visit you at, your choice should be “Local Business or Place”. With this category you will be able to specify the address and hours of operation of the business as in other categories you would not necessarily have that option.
Company, Organization, or Institution
This category is for companies or organizations, ones that might have multiple locations or other bigger establishments like banks, factories or something like that. Other companies that might want to setup a page in this category are ones that might not necessarily have a local branch, even small businesses that are run from home. But before you choose this category, take a look at the next one, it might apply better for you… or it might not. Let’s see.
Brand or Product
If you offer a specific product or are a brand that you want to market, this category would be the best choice. Here, as you can imagine, you would be getting very specific about what the topic of a page would be. A product like a specific kind of shoes or a shoe brand, a type of furniture like a special chair design or a furniture brand. I think you get the picture what I’m talking about.
Artist, Band or Public Figure
This difference between this category and the next one might be a bit blurry but they are both for the entertainment industry except the first one here, the “Artist, Band or Public Figure” is for a specific artist, band or a public figure as upposed to the next one which is for a broader type of business, like an agency, sports league or a TV channel. So if you are a band or an actor, this “Artist, Band, etc…” category is for you.
As I mentioned above, this “Entertainment” category is for a wide variety of entertainment industry type business. If you are not an individual or a group like a band but a business that is in the entertainment industry you should choose this category.
Cause or Community
This category is for some sort of a cause, like a cure for a disease or a support campaign, also a community or a group of people that have like interests. If you are looking to add custom HTML to your page, this is not a good category to go with as a page in this category is not allowed to have iFrame tabs and another reason you should not pick this category is after it gets 10,000 fans, facebook will throw the page into a communities pile and you will no longer own it but will just be a member. So stay away from this one, find a reason why you qualify for any of the other ones.
I am going to create a page for a fictitious toy called Wobble Mobble, so I will choose the Brand or Product category and then will choose Games/Toys subcategory from the drop down menu and enter the name of the toy into the text box. Check the “I agree to Facebook Pages Terms” and click Get Started.
Your New Page
Now you have your brand new facebook page. It’s still super empty so you can, if you like, go through the steps they recommend to setup your page a bit more. Add a profile image and invite some friends… but on the other hand you might want to wait till you get your custom page up before you invite anybody here, so let’s get to that now.
Adding Custom HTML Using An iFrame Application
To add custom HTML to your page you need to create an application ‘Tab” within your page. This “Tab” will be what will hold the iFrame that will display your HTML. Yes I know sounds confusing, just follow me along, I’ll show you how this works.
Let me tell you how a facebook page works so you have a bigger picture and understand better what all these tabs pages and apps are all about.
A facebook page is not really a one, single page, it is more of a bunch of pages in one, we will call them tabs… more like a mini-website. It has a Wall tab, where you and the fans talk and add announcements, pictures, videos and what have you. Then there is the Info tab which holds the information about the page. A photos tab is where you will display all the photos that you upload to the page. These three tabs come included by default with your facebook page and you can add mode additional tabs. The only way to add these extra tabs is to add facebook apps to your page, each app you install will show up as a new tab. So what we need to do is create a custom app ourselves that we can add to our page as a new tab. This app that we create will pull an external web page via the iFrame, from somewhere online that will hold your custom HTML.
This was a quick crash course on adding custom HTML to your page, but now let’s dig in and see how it’s all actually done. We have the fan page so now we need to create an external page which will hold our custom HTML. This will require that we have some sort of web hosting already setup. I am going to assume that you already have a website online somewhere, so if you do not have one yet, you will need to find another tutorial about setting up a website first and then come back to this and continue from this point.
Creating A Custom HTML Web Page
Here all we really need to do is create a .php page that will hold the custom HTML code that we want displayed on the facebook page. You can build it as any standard html page, the only thing is you need to make sure your page is 520 px wide and make the page have a .php extension.
I built a simple HTML page and uploaded it to this website. It is accessible by simply going to the URL: http://www.webdesignideas.org/fb.php The iFrame in the new Facebook App that we create will call this page and display it right inside facebook. Now let’s create an app.
Creating A Facebook App
To get started creating an Facebook application, go to https://www.facebook.com/developers/createapp.php and enter the App name in the text box, then click Agree and Create App. You will get a Security Check box that will ask you to enter some text into a text box, do that and click Submit.
Now we get into setting up the app. On the first page (above) you will see that we have six sections on the left and we are on the About section right now. Here the only thing you need to set up is the Application Name, which we already entered on the previous page and it’s been automatically populated for us. You have a choice to upload an Icon and a Logo images for the App if you like. The next thing we need to enter is the User Support Address, which we have marked as email and entered my email into the text box. For the Contact Email I entered my email also. That will do it for this section. Do not click Save Changes until we are done with all the sections. Click on the Web Site section in the left sidebar.
Web Site Section
In the Web Site section I entered the website URL where the custom HTML page is residing, which is “http://www.webdesignideas.org”. Remember, this is not the actual URL of the page but the URL of the website where the page resides. Then I entered the domain of the site, which is just “webdesignideas.org” without the “http://www”. Click the Facebook Integration section in the left sidebar to continue.
Facebook Integration Section
This is the section where we tell facebook where to look for our custom HTML page. I gave the Canvas Page a url of http://apps.facebook.com/”wobblemobble”. This is the URL of where this App we just created will reside, so it is good to give it a url that represents your page name with no spaces between the words.
The Canvas URL is the URL of where our custom HTML page lives again, don’t forget the trailing slash, they really want that one. iFrame Size should be Auto-resize, and Social Discovery should be enabled.
The Tab Name we can make whatever we want, plus we’ll be able to change this later on so it really doesn’t matter at this point what you call it. I like my primary page to be called Welcome so that is what I entered. Then I entered the actual URL of the custom HTML page.
At this point you can click Save Changes button at the bottom.
New App Information
Congratulations, you’ve just built your first facebook app! Now let’s add it to our facebook page. Click the Application Profile Page button (see image above).
Your App Page On Facebook
This is your app’s page on facebook. Since this is not a public app but just a placeholder for our custom HTML, we will not need to personalize this area. Just ignore everything on this page except for the Add to My Page link in the left sidebar (see image above).
Find your page that you created earlier and click Add to Page next to it and click Close.
Now that you’ve added the app to your page, let’s go see what it looks like and set it up as the default tab. Click the Facebook logo at the top left to go to the your facebook profile page.
Setting Up The Page With The New App
On your facebook profile page click the Pages link in the left sidebar (see image above). Find your page in the list and click on it.
Now you should see the app that we’ve created in the left sidebar showing up as a one of the tabs. Ours is the Welcome one in the image above. Let’s click on it and see what it looks like.
The New Welcome Tab
As you can see we have our custom page showing right inside facebook. Now we can set this page to be the default tab that opens up to any one visiting the page that has not liked it yet. This is great to create offers and capture emails if you build a custom page that does something like that. Let’s make this tab default.
Click the Wall tab first in the left sidebar and then the Edit Page button on the top right.
Here pick your tab, in our case it is named Welcome, from the Default Landing Page menu and click Save Changes. Now anytime someone visits your page, the Welcome tab will be the first thing they see.
Whew, that was a long tutorial.. It’s almost 2 am already and I am ready to pass out. I’ll come back in the morning and go through the tutorial to make sure I didn’t make any mistakes as I’m half asleep. lol joking… zzzzz…….zzzz… oh, that’s right… where was I?
Anyway, I hope this tutorial helps you out. Please leave your comments and questions below and I will be all over them as flies on.. um… a picnic fruit tray.
Read the Facebook page alignment and removing the scroll bars next »