[Tip] How to Create a Simple Facebook Landing Page Application

This tutorial assumes that you have your own hosting, you know at least a little HTML and CSS, and that you are somewhat technically capable.

Note that a Facebook landing page application is essentially a web page displayed from within the Facebook framework. You can do virtually anything like a contact form, opt-in form, or just a simple web page. In this tutorial we?ll just be talking about the technical steps and not how to write all the code for the page.

Step 1: Create your landing page
Open a code editor or basic text editor and start building a new web page. Save it as an HTML document. You should have some basic CSS to make this show up right in Facebook. The code below will make it so unsightly scroll bars to not appear in your application and also that it will fit in the dimensions currently outlined by Facebook.

Here is code that should either be placed within <script></script> tags on your HTML page or included in an external CSS document.


If you are unfamiliar with HTML, the link below provides some information on how to make a basic HTML page. Once you have your page finished, upload it to your server and then go the URL where it resides. You will need this URL in later steps.

http://www.wikihow.com/Create-a-Simple-Web-Page-With-HTML

Step 2: Make Your Facebook Application
Once you have your page built, you can begin the process of setting up your Facebook application. Note that you must have a Facebook account to build an application. Log in and go to https://developers.facebook.com/

Once there, follow these steps:

1. Click the apps tab at the top of the screen
2. Click create new app in top right hand corner of the screen
3. Provide the app name and namespace (these can be whatever you want and don?t worry if you screw it up, you can always make another one).
4. Leave web hosting unchecked (note that if you aren?t using your own server, you can use Facebook?s servers however that is beyond the scope of this tutorial).
5. Oh and choose a category too.
6. Click continue and fill out the captcha that appears
7. On the next screen, click the ?app on Facebook? bar and more fields will appear.
8. For the canvas URL, enter the URL for the web page you created earlier
9. For the secure canvas URL, just add an s to the http
10. Add a question mark to the end of both URLs
11. Select the canvas width as fixed and the height as fluid (unless you have a specific height).
12. The other settings you don?t really have to mess with to get this to work however the page tab one you will have to. The page tab will show up as a box on your fan page that visitors can click on to get to the app.
13. Click on the ?Page tab? bar and fill in the fields with the same URLs and also name your tab. Note that whatever name you put in is the one that will show up for users. Don?t worry about it too much as you can change it later if you want.
14. Upload an image for the page tab (100px by 100px).
15. Click save changes (leave the settings page open in your browser because you will still need it for the next steps).

Adding your application to your page
This is the tricky part. You have to add the application to your page and to do this, there is a little work around that you have to do.
Create another HTML document that looks like this:


Note that you must take the app id from your new application (found in the application settings that you just configured) and the URL (not the secure one) from the first HTML page you created.

Upload the page to your server and then visit it. You should see your link. Click on it (note: make sure you are still logged into facebook). A popup will appear with a dropdown asking which application you would like to add to your page. Choose the name of the one you just created and BAM!

Now go to your fan page and see your new landing page.

will give it a try thanks for the tip

What can this be useful for?

durakadin said:

What can this be useful for?

Click to expand...

Good question durakadin,

For what I have outlined in the tutorial, pretty much the only thing you can use the landing page for is a "welcome" type page that you can link to from other places. So say for example you have a link to your presence on Facebook from your home page. You could use the link to the app for that.

Ideally, if someone is a little more experienced with code they can put some kind of lead generation form on Facebook or even a fangated application to grow their network. You can pretty much do whatever you want with the basic concept of building the application but the level of coding knowledge a person has might mean they can do more.

best,

Shawn

Great share. Glad there is so much detail and spoon feeding. I need it!