Tutorial on how to add HTML to facebook


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.

Entertainment

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.

About Section

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 »

Later.

If you liked this post, share it with your friends!

29 Comments

  1. Josh says:

    awesome! I actually just made a facebook page earlier this week and I was wondering how to do this! Although this works, there are some facebook apps available which allow you to make custom tabs, such as “FBML Tab Maker”. But this is the better solution is you host your own site.

  2. valiik says:

    Yes there are a few good Facebook Page apps out there. One is actually a tool I co-built called FanPageEngine. It lets you build custom fan pages using the iFrame route. Facebook no longer allows you to use FBML on new pages, only on the older ones that already have FBML App installed on them. iFrames is the way to go, so much more stuff can be done this way. Thanks for your comment Josh!

  3. Vladimir says:

    This is an awesome Tutorial :)

    Thank You for putting it together.

  4. ecka says:

    A little confusing, but If we never try.. we’ll never know, I looking for tutorial like this, but here I found the most complette tutorial about facebook page.. Thanks

  5. Sara says:

    Excellent article,i tried so much about facebook html migration, now i finally got excellent result. thanks !!

  6. dal says:

    Hi, is it possible to make the tab default for users who DO already like the page? cheers

  7. valiik says:

    Thank you for the comment Sara, I am glad it helped you out.

  8. valiik says:

    Dal, no, actually Facebook defaults to the Wall for anyone that already likes the page. The only way to reach them then besides the wall is through a paid facebook ad that can be tuned to only show to people that like your page.

  9. malcolm says:

    Valiik.
    That is some tutorial!
    I have been trying to figure out the FBML – Html page thing for a little while now, with no real sucsses.

    I’ll have to go any try this out.

    Many thanks. Malcolm.

  10. valiik says:

    Awesome! I hope this helps you out.

  11. Mike Coon says:

    Thank you very much for this tutorial, I am having trouble and wanted to see if anyone could help?

    I am getting this error when I try to view the page I created:

    You do not have permission to preview drafts.

    I am not sure what I did wrong or what I missed. Thanks for the help

  12. valiik says:

    This looks like a WordPress error and not a facebook one… Do a search on Google on this error and you shall find a solution there.

  13. Marie says:

    Thank you sooooo much, finally a tutorial that actually works. I am so very pleased to have a solution – cheers xx

  14. Tiffan says:

    Hi:

    This was a great tutorial. I have designed pages in the past, and was shocked that FB changed the whole process (well, not really shocked considering how fast they change things). My question is does the page have to be PHP or will another file type/extension work? My client has a hosting service that does not support PHP, and I need to host the page on their server. Any thoughts?

    Thanks again.

  15. valiik says:

    Hi Tiffan, any programming language can be used, from PHP to ASP and just plain HTML would work too.

  16. Jules says:

    Thanks Heaps for this tute – very very helpful! Cheers

  17. Susan says:

    Just added an email widget using this method – you rock! Thank you so much for sharing this information.

  18. J.Wind says:

    This is just what i was looking for. I hope there’ll be more like this (about facebook page && apps integration).

    i have tried to browse thru, read and force myself to digest the infos at facebook developer’s page but to no avail. this is more simple and those images and examples really saves few more strands of my hair from falling. ^^

    Thank you valiik!

  19. Joseph says:

    Great article and very helpful. Facebook changes so often it is hard to keep up at times. Thanks again.

  20. Ajit Nayak says:

    Great Information… Thanks a lot for sharing with us….

    But One question, Can I use it in .html website??

  21. David says:

    Hi Valiik,

    I was wondering how you add a custom image to the tab on the sidebar. I’ve seen several companies do this.

    For instance http://www.facebook.com/zappos

    You can see under info they have their logo, and the VIP one too. If you can help me with info on how this was accomplished that would be great.

  22. valiik says:

    Ajit, yes you can have a .html page.

  23. valiik says:

    Hi David, yes, to add a logo for your tab.. you actually have to add the logo image to the Facebook App when you are creating it (or you can go and edit it and add it). Go edit your facebook app (http://www.facebook.com/developers/apps.php) and right on the edit page at the top you will find where you can add an image and logo for the app.

  24. Robi Cuenco says:

    Hi! I just started a local business in facebook. I want to add features like the order form. MY page is in timeline mode. I’m having a hard time where to paste the HTML Code of the form I created. Please, can you respond to this number and e-mail it to me? Thank you! It will be very helpful in my business! :)

  25. Nikki says:

    What if I want html just because as appose to using it for a business or cause ??

  26. Nikki says:

    Where do I go for that ?

  27. valiik says:

    Nikki, with Facebook changing things on the daily bases, today, for you to have HTML on your facebook, you still have to create a page and then you need to create a FB app that you would install onto the page. It is a very technical process but if you take a look at http://FanPageEngine.com, they let you do exactly that with ease.

    When creating a page that is not for a business think if it’s about a place, choose Place, if it is about and organization, choose Organization, if it is about some product, choose Product, if it’s about you or some person, choose Public figure, is about TV, books or some kind of entertainment, choose Entertainment and if about some cause, choose Cause. Your purpose for this page should fit in somewhere within these choices.

  28. valiik says:

    Hi Robi, sorry for such a delayed response. Please check out http://FanPageEngine.com for this.

Please Leave Your Comment

Please make sure to enter the required information where indicated. We moderate all comments so please no link dropping; do not spam, and do not advertise!
 

Name (required):

Email (will not be published) (required):

Website:

Comment: