How to Activate a Facebook Custom Landing Page

Social Media
1

I’m a developer trying to make a basic custom landing page. I designed it, converted to HTML, hosted on my server, and filled in the required fields for the App canvas. After the “few minutes required to propagate servers” I still don’t see anything. FB documentation really sucks especially when they change the Admin and Developer UI’s on a whim. How do I activate this App which is nothing more than a static HTML page?

2

Hey,

if you have your HTML already set, then you’re about ready to get that custom landing page up and running.

Now you need to do the following steps:

STEP 1: configure the app

  1. Edit the existing app you created using the developer app
  2. In the “Select how your app integrates with Facebook” section enter the desired tab name, the URL to the HTML content in HTTP and the URL in HTTPS (required from the 1st of october on https://developers.facebook.com/roadmap/)
    EDIT: I forgot to clarifiy that for Custom Tabs, you need to select the “Page Tab” section. If you select the “App on Facebook” section, this will show your content in a Facebook app canvas page like you maybe know it from games.
  3. Once you’ve done this click on “Save changes”.

STEP 2: Add it to your page

  1. In the left part on this screen, you’ll see a link called “View App Profile Page”, click on it.
  2. On your application profile page, click on “Add to My Page” in the left part of the screen.
  3. Select the page which you want to add the application to.

STEP 3: Enjoy!
Visit your page and voilà! You’ll see the landing page you just added in the navigation (under the Tab name you gave to your application)

STEP 4: Make your tab a landing page

  1. Click on “edit” on your page
  2. Click on “Manage Permissions”
  3. In “Default Landing Tab”, select the name of the tab where your application resides.

I hope that this solves your problem, if not don’t hesitate to ask. This reminds me that I should probably write a blog post about this with some images and maybe some better English. :wink:

Take care.

3

Excellent reply… I eventually figure it out but I think the issue was I was impatient and not seeing the app (they do say it can take several minutes.)

That said, FB changes their procedures so often and the help section is not kept up to date so… your Steps are helpful. Even if you google this topic, there are few How-to articles …that are current!! The one on HubSpot was my reference.

4

Thanks for the kind words. I’m happy that you finally got everything working as expected.

You’re absolutely right about Facebook changing things very often, it’s difficult to always keep up to date. I read a handful of blogs which write exclusively about Facebook, but it’s still very easy to miss a change.

5

Until late last week this was the way to add your app to a page (of your choosing). For all new HTML apps such as the above the “View App Profile Page” link is now missing and I believe FB are going to remove it completely on Feb 1, 2012. I can find no easy way of adding an html iframe to a specific page. Please can you help with this. Thank you

6

I finally solved it and this is how I did it:

Missing “View App Profile Page” Link.

This link is now missing from the left hand side when a new app such as a “Welcome” page is created and with it goes a direct way of installing the app on to the page of your choice.

To get around this I did the following:

  1. Created my “Welcome Page” in the normal manner such as an iframe on a Web site.

  2. Created a new app in Facebook Developers.

  3. Entered required URLs into the Page Tab section and saved.

  4. Go to https://developers.facebook.com/docs/reference/dialogs/add_to_page/
    and scroll down to the “Direct URL Example”

5.Copy the given URL and paste it onto a note pad. It looks something like this:

&display=popup&next=YOUR_URL
6. Go to the Facebook developers page. Locate and copy the APP_ID.
7. Enter the App_Id into the given URL where it says =YOUR_APP_ID
8. Go to your iframe page on your website and copy the full page URL. (I didn’t use the SSL URL, just the non secure one)
9. Enter this URL into the given URL where it says =YOUR_URL
10. Insert the completed URL into your browser, and this will take you to the FB “Add Page Tab” dialog box.
11. Select the page you wish to add the iframe to and Click on "Add Page Tab Button"
12. Check your Face book page and it should be there.

It worked for me. Good luck. :smiley:

7

Hi John,

I see you found out how to add your App to your Page.

I’ve written a new blog post explaining the new procedure in more detail, including a small PHP script that can make adding Apps to your Pages a lot more hassle free: http://www.fklein.info/blog/2011/12/updated-tutorial-how-to-add-your-application-to-your-facebook-page/

Take care,
Fränk

8

I’ve heard that fbml is obsolete these days. . . Any idea?