This article will tell you how to create a Facebook welcome page that is hosted on your own server, including all the technical coding stuff.
This article will teach you how to create a Facebook welcome page, or at least a basic one. In order to do this properly, you have two basic options.
Option one is using a free Facebook welcome page building software like Pagemodo or Wix, but when I say free, they only let you build one for free, that has an ad for their site on it, and if you want to build more, or remove the ads, it costs a pretty hefty monthly fee.
I say hefty, because all they're really doing is providing you with a template, and hosting the welcome page on their server. It would cost you a lot less, and could look even better if you designed your own Facebook welcome page, and hosted it on your own server.
If you don't know, Facebook now require that you have an SSL certificate on your server, which means that you can provide a https as well as http address. I just upgraded to the business plan on Host Gator, and that worked fine.
The idea is to make an html file that you can upload to a folder in the public html of your server, which is then going to have a URL you can give Facebook in the Developer section, when they ask for the canvas URL for your app.
Sound complicated? Well I'll spell it out step by step what I do to make a Facebook welcome page.
How To Make A Self-Hosted Facebook Welcome Page
To start with, you decide what basic elements you want on the page. Let's say you want a You Tube video up the top. You get the embed code for the video, and paste it into an html editor like Aptana.
This will let you edit the source code directly. I can't really go into too much detail about coding, cause I'm not an expert, but you probably need some basic codes that will help you move things into the right position like the code.
Here, I'll demonstrate what I mean here. If you look at the source code for that, you will see that I entered the code a few times, which is like pressing the space bar, and in order for you to see it when I'm writing it, it has an extra & beside it.
Now I'm not sure if you will even be able to read that on all browsers, but you should be able to read the source code that I wrote.
You get the You Tube embed code, paste that into the html editor, and you might want to type out some text using <h1> or <h2> tags. Don't forget to include the </h1> on the other end of the text, or it won't work.
Now, if you want a photo on your Facebook welcome page, you first need to have the photo hosted on your server. If you are familiar with Wordpress, then it should be easy enough to find the actual URL of the photo, provided you have uploaded it to your media files.
You write image html like this: <img src="YOUR PHOTO URL" width="400" height="200"> and if you want to be tricky, you can put a link in your image.
To do that, you write the code like this: <a href="YOUR URL"><img src="YOUR PHOTO URL"></a> and you can add the width and height and alt text bits if you want as well, but they're not always necessary.
You can add a PayPal button to your Facebook welcome page by getting the code from the merchant services section of your PayPal account, (provided you have the right type of account), and pasting it into your html editor.
I had some trouble moving this one around, because you can't just do the at the start of the whole code, you have to do it for each individual part that you want to move into position.
You could make the whole thing in a table, using a more professional html editor, and just add <center> tags, but I found it helpful to know the actual way to move the bits around.
It depends on what sort of Pay Pal button you have, but I had one with three bits, and I had to enter the after the <td> on the lines that had the text on them, and at the start of the line that had the photo on it.
By doing this, I could move the Pay Pal button around without making a table to put it in. I sometimes use Open Office to do that, although I don't really like it as an html editor, I may end up paying for a better one like Dreamweaver or something.
The point is, you can do almost anything you want on a Facebook welcome page by knowing how to write html properly, and then you have to upload it to your server, and then Facebook.
Uploading a Facebook Welcome Page To Your Server
Ok, so you've saved the html file you were just working on in your html editor as a document on your computer. Now what you need to do is create a folder in the public html of your site.
I usually use Filezilla for this, cause someone showed me how to do it using that. You right click to create a directory in the public html, name it something that is easy to remember, if you call it welcome, it will be yoursite.com/welcome.
You find the html file you created in your documents, double click on it, and it should go into the folder. Now, you need to delete the name of it, and replace it with index.html. This will make it appear on the address of the directory.
If you did everything correctly, you should now be able to navigate to yoursite.com/welcome, and see the html file you created.
Using iFrame and the Developers Section of Facebook
In order to get your public URL onto the iFrame of your Facebook welcome page, you first have to create an app in the Developers section of Facebook.
You can find the link to that at the bottom of every screen. If you are new to making apps, you have to fill out a form, and then you can make your app.
They will ask you for the name of the app, the namespace of the app, (username), and then you have to choose to make two things, an app, and a Facebook page tab, and give them the URL and safe URL of the page you created earlier on both of those.
That means the http and https addresses for your welcome page are put in the fields for canvas URL and safe canvas URL on both the make an app, and make a Facebook page tab sections.
Now, you have to use a special add-to-page dialog to add the app to your page, which looks like this: facebook(dot)com/dialog/pagetab?app_id=(yourappID)&display=popup&next=(yoururl)
In this example, you obviously have to replace (yourappID) with your app ID< and (yoururl) with your URL. This will bring up the page dialog that asks you if you want to add the app to your page, and lets you choose which one, (or ones) you want to add it to.
So you add the Facebook welcome page to your page, and then you can edit the page, and in the general information settings, choose to set the welcome page as your default landing page, which people see when they first arrive at it.
Now I hope this article has told you how to create a Facebook welcome page, but if you're having any trouble with it, it's very easy to hire someone else to do it all for you, for around fifty dollars or so.