OpenClose

Popular

Facebook Cheat Sheet Sizes and Dimensions

Facebook Cheat Sheet: Sizes and Dimensions

social media crisis

Managing Social Media Crisis and Negative Feedback

facebook-home-page

10 Reasons Facebook Isn’t Working for Your Company

f_reading_pattern_eyetracking1

15 Must-Know Facts on How People View Websites

34

How To Set Up a Custom Facebook Landing Page

This post is outdated, please use Shortstack for page creation:


A lot of businesses advertise their Facebook pages — whether it is in-store, on their website, on the business cards, or in an email signature. The goal of this type of promotion is to get people to “Like” their pages — so the next time business posts an update, it has a wider reach and can engage more people in the conversation.

As a Facebook Page, you should have a clear strategy for your communications — just getting “likes” won’t cut it, it simply supports your strategy. Priit Kallas wrote a great post about creating a social media strategy — read it, if you don’t yet have one!

In this post, you’ll learn how you can simply create a custom landing page and serve different messages to people, depending if they’ve “liked” you page or not. Something like the Redbull does (you can see other great examples of Facebook landing pages here):

fb redbull 675x352 How To Set Up a Custom Facebook Landing Page

Redbull’s Facebook page: Difference between landing pages when person doesn’t “Like” it and does.

I order to setup your landing pages, you’ll need:

  • Access to a PHP hosting
  • SSL certificate so your content can be accessed via “https”
  • Design pages for two states (Like and not)
  • Facebook Page Admin rights

Before we get started, let’s get some terminology straight. Before Facebook did several rounds of redesign, it used to have Tabs on top of the Facebook Pages, which served as a primary navigation for pages. Today, these tabs have moved to the side as became links, BUT the naming has stayed the same — Facebook still calls them “Page Tabs” and that’s what’s I’ll use thruout the post.

Here’s a screenshot of what is considered to be “page tabs”:

fb pagetabs How To Set Up a Custom Facebook Landing Page

Now when we have this straight, let’s get started!

1. Grant Access to the Facebook’s Developer App & Do a Basic Setup

Go to https://developers.facebook.com/apps and click on “+ Create New App”.

fb developer 675x351 How To Set Up a Custom Facebook Landing Page

You’ll be asked to give access to the Developer app, click “Allow”:

fb developer access How To Set Up a Custom Facebook Landing Page

Now you can type in your future App’s name (it will have limited visibility for users, but it’s a good idea to put your page’s name in there, e.g. “Amsterdam Printing Welcome”) and a namespace (a unique identifier for your app within Facebook):

fb new app How To Set Up a Custom Facebook Landing Page

When you press “Continue,” it might ask you to verify your Facebook account, which you can do by either adding a phone number or a credit card. Example below shows verification via phone number (it just texted a code which I had to enter):

fb confirm account How To Set Up a Custom Facebook Landing Page

fb confirm code How To Set Up a Custom Facebook Landing Page

With this basic setup, you now have the App Id and a App Secret code you’ll need to use on the pages you’ll show to users:

fb app info 675x497 How To Set Up a Custom Facebook Landing Page

2. Set-up the Pages on Your Own Site.

Now when you have the App Id and App Secret, you can create two pages: first you’ll show to those who don’t “Like” your page and the other one to those who do.

In the code shown below, we are using latest version of Facebook SDK in PHP and a simple index.php file which determines if person likes the page he or she is currently on.

[download link for zip file: includes Facebook SDK]

In the index.php, make sure to change values for App Id and App Secret.

After publishing the page, test if everything works and if you go directly to it, it shows default content (state when don’t “Like” the page).

This URL becomes you “Page Tab URL” which you’ll need in the next step. (For Amsterdam Printing, this URL is http://apps.amsterdamprinting.com/apl-facebook/welcome/).

 3. Complete Setup of Your Facebook App.

Go back to https://developers.facebook.com/apps, click on “Edit App” and scroll down until you see “Select how your app integrates with Facebook”.

Check “Website” and a “Page Tab”, copy-paste direct URLs, decide of the Page Tab Name — this is what users will see on the left side as a link and hit “Save Changes”:

fb pagetab setup 675x436 How To Set Up a Custom Facebook Landing Page

Note that as of October, you’re required to provide a Secure URLs for Page Tabs. Make sure that your hosting has an SSL certificate issued to it, or otherwise, you page tab won’t show up for users who chose to always use encrypted connection with Facebook.

I also highly recommend adding an icon to your app — it adds to the visual appeal!

To add the icon, simply go to your app, click on “Edit” and then or “Edit Icon”. Icons are 16×16 pixels, but if you upload a bigger (square) image — Facebook will scale it down to the right size. Icons will display to the left of your Page Tab Name and can be used to capture users’ attention.

fb icon How To Set Up a Custom Facebook Landing Page

 4. Add “Page Tab” to your Facebook Page.

This is the trickiest step — there’s actually no button to add your new app to the page. Instead, you need to manually populate the following URL:

https://www.facebook.com/dialog/pagetab?app_id=[app_id]&next=[Page_Tab_URL]

For example: https://www.facebook.com/dialog/pagetab?app_id=199092376851759&next=http://apps.amsterdamprinting.com/apl-facebook/newappwelcome/

fb add pagetab How To Set Up a Custom Facebook Landing Page

It will ask you to select a Page you want this to add to, and you’re almost done!

Few final adjustments: reposition newly created Page Tab to the desired spot by going to the Facebook page and clicking “Edit” on the bottom:

fb pagetabs edit How To Set Up a Custom Facebook Landing Page

And then drag the tab and click “Done.”

fb pagetab drag How To Set Up a Custom Facebook Landing Page

In case you want to rename the Page Tab — go back to the developers.facebook.com/apps and click on “Edit App.” Scroll down until you see the “Page Tab” settings and adjust the name:

fb pagetab rename How To Set Up a Custom Facebook Landing Page

The last step it to make your newly created Page Tab to be a default landing page for your Page.

Go to your Page, click on “Edit Page” and select your new Page Tab as “Default Landing Tab”. This will be the first tab users will be shown when going to your page, motivating them to Like it!

fb landing tab 675x400 How To Set Up a Custom Facebook Landing Page

I hope this how-to was easy to follow. Test it out in action on http://www.facebook.com/AmsterdamPrinting  and if you have any questions, leave a comment below or tweet @svolinsky.

This is a guest post by Slavik Volinsky, Online Marketer at promotional products company, Amsterdam Printing. Follow him on twitter: @svolinsky

Posted on: January 3, 2012

Leave a Reply

Your email address will not be published. Required fields are marked *

34 Responses

  1. FromThisSeat.com January 3, 2012 8:08pm

    Thanks for the post. That is one of the most detailed descriptions I have seen for creating a FaceBook fan page. Anyone else get annoyed when someone sends you a message in your inbox asking you to like their page?

    Reply

  2. Slavik January 4, 2012 4:04pm

    Thank you — creating a page tab might get pretty confusing (especially when FB updates the process so frequently), hence so many screenshots.

    Reply

  3. Mahfuzur Rahman January 4, 2012 8:08pm

    This is great dear. keep it up

    Reply

  4. The Dude January 5, 2012 1:01am

    You don’t need a PHP server to create a custom facebook landing page. You can use any type of web server.

    Reply

  5. Jimmy January 7, 2012 11:11pm

    ..Muy buen posst, pero solo unpar de preguntas, no logro añadir la pestaña al facebook.. en la url añadi el id y la ruta de la pagina y nada, porfavor si fueras tan amable de explicar porfavor, gracias

    Reply

  6. Dave Maurice January 8, 2012 11:11pm

    baffled by the recent changes this post clarifies the process. I’m I missing something that you have not provided the page that serves different pages for Liked and Unliked visitors?

    Reply

  7. Mart Prööm January 9, 2012 5:05pm

    The download link for SDK + index file has been added, sorry everyone! You can download the zip at http://www.dreamgrow.com/download/newfbapp.zip

    Reply

  8. Graham January 10, 2012 11:11pm

    very interesting post. Must of been good as I think even I followed it!
    I would like to set up a landing page on FB BUT as a one off offer with maybe an auto responder installed so I can send the “like” person an email with a money off coupon. Is there any way you can help out

    Reply

  9. LizJ January 17, 2012 4:04am

    I have followed all of your instructions, I am a featured admin and page owner, and when I try to run step 4, I continue to get this error:
    API Error Code: 191
    API Error Description: The specified URL is not owned by the application
    Error Message: redirect_uri is not owned by the application.

    Any help would be great! Thank you!

    Reply

    • Slavik January 17, 2012 7:07pm

      LizJ, just to rule out the obvious — does the [Page_Tab_URL] you’re substituting in Step 4 matches the one specified within App (screenshot under Step 3)?

      If this and App ID are correct, please double check App Id / App Secret in index.php:

      ‘appId’ => ‘xxxxxxxxxxxxxxx’, // enter your App’s ID
      ‘secret’ => ‘xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx’, // enter your App’s Secret

      Reply

    • Hammer February 23, 2012 9:09pm

      Hi

      Thanks for the great tutorial. I followed the steps, created the app and installed it. Put ID code and secret code in the index.php. I intalled the app on my facebook page. But When I click on the welcome tab all that shows up is a blank page. No text, no errors. Nothing.

      Obviously I missed a step.

      My thinking is I do not know how the php code knows how to manage the redirect. Where do I tell it what/where the designed pages are?

      Reply

  10. Oliver January 17, 2012 10:10am

    excellent work…

    Reply

  11. Gaetano January 18, 2012 6:06am

    This guide isn’t very noob-friendly and there are errors everywhere.

    “In the index.php, make sure to change values for App Id and App Secret.

    After publishing the page, test if everything works and if you go directly to it, it shows default content (state when don’t “Like” the page).”

    Not even sure what the hell that means.

    I think I’ll look elsewhere for a more accessible guide. Thanks anyway!

    Reply

  12. Jimmy January 19, 2012 1:01am

    THANK YOU for this- I am an advanced ‘noob’ but need a little hand-holding! Questions:
    Like you, I created a subdomain called apps.mydomain.com.
    1- Do you suggest that I upload the entire newfbapp folder- and my edited index.php file- to the root directory of my domain? If not, what files need to be uploaded and WHERE do you suggest they be placed? I did just this and then pointed the App Domain in FB to to this dir on the root of my website and it says that it is not a valid domain….

    Reply

  13. shorty January 21, 2012 5:05pm

    Hi, this is for phone apps? For the “welcome Tab apps” beside the facebook fan page? What’s the end result like? We’ll have a phone apps?

    Reply

  14. MarkJ January 26, 2012 9:09pm

    Great tutorial – think I have nearly cracked it but not quite :(
    App seems to work ok on its individual app page (apps,facebook.com etc…) – but when I add it to the page as a tab it is just coming through as a blank page.

    Any help you can give would be much appreciated

    Reply

    • Hammer February 23, 2012 8:08pm

      Hello Mark,

      Did you find a solution to the blank page? I completed the set up and just like you were experiencing, I am getting a blank page. No errors, no text … nothing.

      I hate to start over as I like this concept and the App seems to be installed properly but I believe like you, I am missing a step?

      Thanks

      Reply

  15. Steve January 28, 2012 6:06pm

    Great, spent a while trying this and looking for tutorials. This worked first time. Cheers

    Reply

    • Slavik January 30, 2012 9:09pm

      Glad to hear that, Steve!

      Reply

  16. Matthew Bumbalough January 30, 2012 6:06pm

    THANK YOU!!! Googled the crap out of this subject and out of the hundreds of tutorials, this was the ONLY one that was up to date and correct. I finally got it working like I wanted to. Now to find the tutorials for everything else I want to do.

    Reply

    • Priit Kallas January 30, 2012 9:09pm

      Great! I’m glad you got it working.

      Reply

    • atomiku February 16, 2012 5:05pm

      This is certainly the best tutorial for creating a facebook canvas/iframe. All the other tutorials I found advised you to use some crappy 3rd party app to do the canvas instead. Thanks to the Slavik for the great article!

      Reply

  17. thedude February 7, 2012 5:05pm

    Hey Slavik,
    thank you for this very detailed and easy to follow guide!
    I still have a problem which you maybe were able to solve?

    Somehow the code only works for my own account, for all other accounts who click the like button the page remains in the “unliked”-state.

    I think it has something to do with app permissions. Do you have any idea?

    cheers

    thedude

    Reply

  18. Zain February 9, 2012 12:12am

    Hi,

    on Step 4, when I try to manually enter the URL with the appID and Page_Tab_URL, I get the following error in Facebook:

    ‘You must be the admin of at least one Facebook Page to perform the requested action.’

    Even though I am listed as an Admin in my app’s ROLES section.

    The appID and Page_Tab_URL are correct.

    Please help!

    Reply

  19. atomiku February 14, 2012 8:08pm

    Thanks for the great article! I’ve written a post about how to get the iframe canvas to auto-size to the height of the content, as well as removing those annoying horizontal/vertical scrollbars. I’ve linked to this post from my blog post here:

    http://atomiku.com/2012/02/remove-scrollbars-and-get-your-facebook-app-canvas-iframe-to-autosize-to-height-fb-canvas-setautogrow/

    body{overflow:hidden;} is the key!

    Reply

  20. Jack Martin February 20, 2012 2:02am

    This is a great guide for setting up a FB landing page. Thanks. Every brand page should have a great landing page. Offering unique info is a great way to entice a like, too.

    Reply

  21. Hammer February 22, 2012 11:11pm

    I think I am missing steps. What do I call the landing page I designed and how does the php code know what the landing page name is?

    I successfully set up the app on facebook, and put the ID code and secret code in the index.php file on my server. I installed the welcome app on my facebook page. But when I click on the Welcome tab I get an error.

    “The page you are looking for cannot be displayed because an invalid method (HTTP verb) was used to attempt access.”

    Given that, I do not think the php program knows what/where the landing pages are? What am I doing wrong? Did I miss a step. Your tutorial just says you need two landing pages. What do I call them, where do they go, and how does the code know what they are?

    Reply

    • Hammer February 22, 2012 11:11pm

      forget the 405 http error. fixed that.

      Everything works, except … and a big except, all I get is a blank welcome page. Obviously I missed a step???

      Reply

  22. nickie March 22, 2012 6:06pm

    Can anyone help me how to create a page tab using page tab url. I encountered error message You must be the admin of at least one Facebook Page to perform the requested action.

    can advise me.

    Reply

  23. lala August 1, 2012 10:10pm

    is this post still relevant. the facebook pages referenced above dont have customized landing pages

    Reply

    • Priit Kallas August 3, 2012 2:02pm

      No they don’t have landing pages, but when pointing people to your Facebook campaigns then use a direct address of the sub-page.

      Reply

  24. atomiku September 21, 2012 4:04pm

    It seems facebook might have updated their options for this. You may want to double check to see if the instructions are still correct.

    Matt

    Reply

  25. Daniel July 7, 2014 10:10am

    Oops. Dated page. The current SDK is radically different than this one, and the process falls apart… :o)

    Reply

x