How to Design and Program a Facebook Landing Page

June 21st, 2011

We all know that Facebook provides a great opportunity for organizations to connect with their target audience and interact with their clients. To do this more effectively, organizations are creating custom Facebook pages to differentiate themselves and represent their brands on Facebook.

But how does one go about creating one? How exactly should one be designed and what are these iFrames that are used? If you’ve been looking for answers, take a look at this screencast. We’ll be going through an introduction to designing and programming a Facebook landing page using iFrames. Enjoy!

How to Design and Program a Facebook Landing Page from NoupeMag on Vimeo.

Please feel free to share your comments with us in the comment section below.


Jonathan Goldford is a partner at Wired Impact, a web design company that builds websites for nonprofits. Jonathan spends the majority of his time focused on web development and usability, and gets what may be considered a bit overly excited about a few milliseconds of load time.


85 comments for „How to Design and Program a Facebook Landing Page
  1. JDF on June 21st, 2011 at 12:51 pm

    Cool! It was really helpful, Thanks!

    • Jonathan Goldford on June 21st, 2011 at 8:03 pm

      @JDF, it’s great to hear it was helpful. Thanks for watching.

      • George Patricio on July 26th, 2011 at 5:02 am

        Hey Jonathan …

        What are your prices for an one time set up ( a cool page for face book?)


  2. designfollow on June 21st, 2011 at 12:55 pm

    thank you very much for the creat Article.

    Facebook Landing Page is important today

    • Jonathan Goldford on June 21st, 2011 at 8:07 pm

      @designfollow, you’re very welcome. Let me know if you have any questions.

  3. massimo on June 21st, 2011 at 12:56 pm

    I tried in firefox and Chrome but I can’t see the video, just a black box

    • Angel on June 21st, 2011 at 1:08 pm

      I can’t see the video in Firefox 4

      • Angel on June 21st, 2011 at 1:10 pm

        The same problem is in IE8.

      • Matic on June 21st, 2011 at 1:12 pm

        Same here FF4 and Chrome

  4. ralf on June 21st, 2011 at 1:14 pm

    Doesn’t work for me either. Safari, FF4, Chrome… nothing.

    • Andy on June 21st, 2011 at 1:20 pm


      • Trafer on June 21st, 2011 at 1:24 pm

        +1 no FF4,IE8,Chrome,Safari,Opera

  5. griffindy on June 21st, 2011 at 1:47 pm

    not to sound spammy, but you guys should all check out High Impact Designer, by TemplateZone. It’s a fantastic tool for creating Facebook pages and is really easy to learn.


    • griffindy on June 21st, 2011 at 1:49 pm

      also, +1 to the video issue in Chrome on Mac os x

      • Lisandro on June 21st, 2011 at 1:58 pm

        The same, Mac OS Lion and Safari and Chrome.

    • Charlie Jensen on October 25th, 2011 at 5:29 pm

      Thanks for the tip. I want to follow up on it.

  6. rostron71 on June 21st, 2011 at 1:55 pm

    Nothing happening in Safari, Firefox, Google, Explorer browsers on OS X and Windows 7

  7. Dangergirl on June 21st, 2011 at 1:56 pm

    Yup didn’t work for me either.

  8. Johnathan on June 21st, 2011 at 2:16 pm

    I see the video fine, Mac OS Chrome

  9. MJ Walsh on June 21st, 2011 at 4:24 pm

    Hey, It works in SeaMonkey right out of the gate

  10. Robert Bowen on June 21st, 2011 at 4:41 pm

    Sorry for the issues with the video. There is a bandwidth problem with the host that is being sorted out right now. Everything should be fine shortly! Please stay tuned.

    Noupe Editorial Team.

  11. Robert Bowen on June 21st, 2011 at 5:29 pm

    Video should be fine now! Let us know if any problems persist. As always, thanks for your patience and understanding.

    Noupe Editorial Team

  12. Paper Dog on June 21st, 2011 at 6:20 pm

    Thanks for the tips – we’ve just finished our new Facebook landing page: http://www.facebook.com/PaperDogLtd?sk=app_197936773558886 what do you think?

  13. Jonathan Goldford on June 21st, 2011 at 8:01 pm

    The Facebook landing page looks good. Great work. Let us know if you have any tips for design and development you’d like to share.

  14. honlapkeszites on June 21st, 2011 at 8:16 pm

    Thank you! Very useful article!

  15. Andrew on June 21st, 2011 at 8:29 pm

    Great video. Do you happen to have the code files (of at least the facebook parts) that we could download to reference and use as a starting point?

    • Jonathan Goldford on June 22nd, 2011 at 3:13 pm

      @Andrew, sorry, I won’t be able to share the code files. After watching the video let me know if you have any specific questions about the code and I’d be happy to take a look.

  16. DigitalZu on June 21st, 2011 at 8:50 pm

    Nice post. Very thorough.

  17. filippo on June 21st, 2011 at 11:27 pm


  18. Barbara on June 21st, 2011 at 11:42 pm

    This was a really great and thorough tutorial! I feel like I have exactly what I need to customize my facebook page now. Thank you so much for sharing this!

  19. leog on June 21st, 2011 at 11:57 pm

    that is a tuto!!
    thanks a lot!

  20. Gene Miller on June 22nd, 2011 at 1:11 am

    Jonathan, wonderful tutorial! Thank you so much for taking them time to do it! What’s next? ;-)

  21. Will on June 22nd, 2011 at 1:13 pm

    This is a great tutorial, thanks! I’ll be bookmarking this for future reference.

  22. Ramsey Stoneburner on June 22nd, 2011 at 6:06 pm

    AWESOME tutorial! Thanks for posting! I’m gonna go off and see what I can whip up! :) Really easy to follow and excellent explanation of everything.

    Quick note: wouldn’t you need to switch off the Sandbox mode if you want non-admins (basically everybody else) to view your tab? I figured so but just wanted to make sure! :)

    Thanks again and I’ll let you know what I come up with!

    Cowgirl Expressions

    • Jonathan Goldford on June 23rd, 2011 at 3:28 pm

      @Ramsey Stoneburner, you are definitely right. Sorry if I didn’t make that clear. In Sandbox mode only the admins will be able to see the custom landing page. Once you’ve tested everything and are ready for launch, just turn off Sandbox mode and everyone will be able to view the custom landing page.

      Thanks for bringing it up.

  23. Kristin on June 22nd, 2011 at 11:12 pm

    Aren’t there apps that do this as well? I work for a company that is just starting out with developing its FB identity and we want more flexibility to showcase certain products. Our marketing team is already using free apps to get some of the functionality they want. They are leaning on my design dept. to come up with landing pages, and they are pointing us in the direction of free apps.

    What are the differences, pros and cons to doing it either way? I think I know what you’ll answer, but since I’m so new to FB development, it would be good to hear it. Thanks, and great tut!!!

    • Jonathan Goldford on June 23rd, 2011 at 4:00 pm

      @Kristin, definitely a good question. Working with a free application for something like this is always a compelling option. I haven’t looked in to any of the apps for Facebook landing pages, but I’m sure the pros and cons are similar to using any application to build a website or web app.

      The biggest pro is most likely the speed with which you can complete the landing page. Those applications are usually fairly quick with a simple user interface and some easy templates. If you’re looking to get something up fast, I think it’s a great way to go.

      I see the biggest con being flexibility. Typically, the reason these applications are able to build so quickly is because they try to fit everything to one template and a limited set of functionality. As I mentioned, I haven’t tested any of these before, but I imagine once you try to stretch the application, especially a free one, you’re going to run into some roadblocks.

      I hope that’s helpful. Let us know if you find any apps that work particularly well.

  24. Jasper on June 23rd, 2011 at 12:26 am

    Hi Jonathan,
    fantastic guide.

    I’m somewhat of a coding newbie and I’m stuck on a very annoying piece of code. It is when adding the “require ‘facebook.php’; snippet I get this.
    Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in xxx/fb/facebook.php on line 35

    Tried alot of things and it seems it is only the php functions who doesn’t work.

    Hope you can help based on this, if not feel free to ask.


    • Jonathan Goldford on June 23rd, 2011 at 4:05 pm

      @Jasper, this is most likely an error caused by the version of PHP you are running on your server. The Facebook code requires you are running PHP5, and if you try to run the code on a PHP4 server you are going to run into some errors. Check out this post on the Facebook forum and let me know if that helps: http://forum.developers.facebook.net/viewtopic.php?id=7340

  25. Christa on June 23rd, 2011 at 2:01 am

    Thank you so much for this great video tutorial. Your teaching is awesom. I will try to create a landing page and see if I will get there.

    Great work. Thanks again.
    Love from Switzerland


  26. Brad on June 23rd, 2011 at 2:35 am

    Bookmarked! Thanks a tonne, amazing video.

  27. Michael on June 23rd, 2011 at 2:17 pm

    Awesome tutorial. Just what I was looking for. Thanks a million.

  28. Rob on June 23rd, 2011 at 3:00 pm

    Jonathan my team found your link and said we should check it out. Nice tutorial on using iframe for fan pages. Thanks for putting the video together. It was helpful.

  29. Daniel Vartanian on June 23rd, 2011 at 8:13 pm

    Awesome Tutorial! Thanks for taking the time to do it! Very helpful.

  30. Chresten on June 24th, 2011 at 11:31 pm

    hey thanks – that was helpful and easy to understand.
    (how come your last reply is dated 21 june, as the comment your are replying is dated the 23rd?)
    best regards from Chresten – DK

    • Jonathan Goldford on June 27th, 2011 at 2:07 am

      @Chresten, haha. I have no idea. For some reason that comment is stuck at the bottom of the list.

  31. Bala on June 25th, 2011 at 1:40 pm

    Really kewl…

  32. Quick&Quality on June 26th, 2011 at 6:59 pm

    Great! its what im looking for

  33. Satyajeet Shaligram on June 26th, 2011 at 8:18 pm

    Hi Jonathan,
    Tutorial worked right out of the box! Have rarely seen facebook tutorials that are so elegantly constructed and kudos for such a clean and simple video! However I had a question for you. I am a developer and have had plenty of experience with APIs (Google, Twitter) as well as PHP, however I find it really hard to work with the Facebook PHP API primarily due to the lack of documentation and the fact that there are no good books around (most are outdated). So Can you suggest a way to master the PHP API so that we’re able to do more with it and really power smarter landing pages/apps..?

    Thanks again for taking the time to reply!
    Pune, India.

    • Jonathan Goldford on June 27th, 2011 at 2:14 am

      @Satyajeet Shaligram, unfortunately, this is a tough question. I totally agree that Facebook doesn’t provide the best documentation on how to program using their API. I’m sure people have written up some pretty great stuff, it’s just a question of finding it.

      As far as Facebook landing pages go, I’ve found a company called HyperArts to have great tutorials that are pretty up to date. You can check out the tutorials on iFrame landing pages at http://www.hyperarts.com/blog/category/facebook-iframe-applications/.

      Good luck and let us know if you find any resources that are especially helpful.

  34. Count Ocram on June 27th, 2011 at 3:07 am

    awesome, thank you for this tutorial!

  35. Arturo on June 27th, 2011 at 4:56 am

    First thing, thanks so much Jon for such a great tutorial, really thanks!! however, I think I’m doing something wrong, if you go here, http://www.facebook.com/pages/The-NewMediaStudio/46982561063, you can see there’s a tab called Welcome! when you click that tab then the new page appears, but how to make that as the landing page? I mean, when I click on the URL above I want to see what I see when I click on Welcome!, any idea on what I did wrong :(



    • Jonathan Goldford on June 27th, 2011 at 3:45 pm

      @Arturo, don’t worry, you didn’t do anything wrong. When I go to the page the welcome tab shows up as the landing page. For Facebook pages, when you have either liked the page, or are an admin, you are immediately taken to the wall and not the landing page you chose.

      Facebook actually doesn’t allow you to change that which, whether good or bad, is the way it is.

      If you want to make sure you chose the landing page settings correctly just make sure you log out before visiting your company’s page. You should then see the new landing page immediately when you get to Facebook.

      • Arturo on June 27th, 2011 at 5:20 pm

        Thanks a lot Jon!!, keep up that great job posting great tuts!!

  36. Ferdinand on June 27th, 2011 at 5:23 am

    Thank you :)
    The tutorial is very thorough

  37. Banana Kick on June 28th, 2011 at 1:03 am

    Great post. Thanks for the resource. We are looking to develop our Facebook page at the moment and this is a great place to start.

  38. Daniel Wood on June 28th, 2011 at 2:34 pm

    Hey, thanks for this useful post. i am just going to check out the video. These days facebook is getting so much value for business promotion.

  39. Guillaume on June 28th, 2011 at 3:41 pm

    Thank you so much, that is just a perfect tutorial.

  40. Mick Davies on June 30th, 2011 at 9:51 am

    Hey Jon great videocast! It’s a really good foundation for Facebook page apps, what is the best resource to look at for all the variables available such as user variables and page variables?

    Cheers Mick

  41. ntone on June 30th, 2011 at 4:26 pm

    looking for tutorial like long time ago.

    thnx for sharing the info

  42. Lasith on July 1st, 2011 at 12:31 pm

    codes are little bit complicate, but this tutorial realy usefull.. thanks buddy.. :)

  43. Victor on July 2nd, 2011 at 3:33 pm

    Great tutorial! Extremely helpful.
    If you add the code to show the landing page followed by the Facebook Wall would be great. (Some people don’t like to land on a welcome page and then go to the Wall.)
    Anyway, good job.

  44. ayelet on July 10th, 2011 at 5:18 pm


  45. chris on July 17th, 2011 at 3:50 pm

    loved it… thanks for posting this…

  46. jcarlitos on July 18th, 2011 at 2:18 am

    Hej Jonathan, thank you so much for this great tutorial. I just wanted to say that it worked fine with SDK version 2.1.2
    With the newer version 3.0.1 i got an error message.

    Hope you will make other tutorials.

  47. Andrew on July 22nd, 2011 at 10:27 pm


    First off, great tutorial. So helpful!

    Second, I created a page using your tutorial as a base and it worked great. The only issue is that some people have the page cut off half-way down the page. I think it may be a bug from the Facebook file used to extend the page. Have you heard of this before and do you have any ideas on how to correct the problem?

  48. James on July 24th, 2011 at 9:13 pm

    Hi Jonathan,

    If i’ve understood it correctly, from your reply above to Mick, ( You can read more about it at http://developers.facebook.com/docs/authentication/signed_request/. ), it is possible to get someone’s name, but the big company’s don’t bother (and therefore everyone else shouldn’t?) because people’s names are hidden by their options – e.g. I put in

    …and the page displayed ‘Privacy Statement’.

    Otherwise, it would be great to be able to say, “Hi Jonathan,” on the page!

    Whilst I was watching your tutorial, which was awesome by the way, and I linked up the page successfully, I was wondering all the while if you would be covering displaying people’s names.



  49. Baloot on July 27th, 2011 at 8:28 pm

    Hi Jon

    Thanks for this useful article for facebook fanpage landing code. Anyway, where is noupe.com facebook like button for this post? I want to post into my FB profile because I found this article very useful for my fellow friends. :)

  50. Tom on July 31st, 2011 at 10:42 am

    Great tutorial – thanks Jonathan! Found it 1000 times more useful than the Facebook developers documentation.

  51. Janet on August 1st, 2011 at 2:55 am

    Great tutorial! It appears FB will not let us redirect “fans” away from landing on the wall. But we are able to send new visitors to the new page. Thanks! http://www.facebook.com/home.php#!/ChildrensMedicalCenter?sk=app_169856103081722

  52. Thomas on August 1st, 2011 at 4:30 pm

    VERY usefull! Thats exactly what I was searching for and a real timesafer too!

    Thank you so much for sharing this with us all! I will try to produce a Tut like this in German. Hope it will be almost as good as this…


  53. Jasper on September 9th, 2011 at 9:11 am

    Thanks so much for this tutorial!!!

  54. Ravenna on September 23rd, 2011 at 9:53 pm

    This is an awesome tutorial. I wondering if doing it this way solves the whole issue of your custom landing tab not being the default once the user has liked your page? Or if that issue came after you did this?

  55. Susan Mouw on October 21st, 2011 at 10:38 pm

    Hi Jonathan
    First – thank you so much for the video. It is great and a huge help. However, I am still having a problem with the sizing on my page. I don’t mind that it is too long and has a vertical scroll bar, but I hate the horizontal scroll bar and nothing I have tried has changed it.

    The div width is 510. the table width is 510, but the whole thing is displaying much wider. Help!

    Thank you

  56. Niki Pike on October 24th, 2011 at 8:17 pm

    Facebook has changed again..surprise surprise. Any chance you guys are working on a new tutorial that refelects the changes in their back end??

  57. cna on November 13th, 2011 at 3:53 pm

    Niki, yeah you now need to upload base_facebook.php as well as facebook.php to work, Jonathan thanks dude for the info.

  58. philip on November 19th, 2011 at 6:46 pm

    Hey Man,

    facebook has changed its developer login page, when i login and crate a new app i dont get any of the screencast settings above, can u update this tutorial for the new fb setup, thanks man

  59. waheed on November 20th, 2011 at 10:48 am


    greate tutorial, thanks

    i have created a landing page. but i am facing problem to shows it,

    i have made application as you suggest when i as an admin go to my page i can see my application tab as well as the application page. but users are not able to see the page but even also not the tab.
    what is going wrong?
    please response as soon as possible.

    thanks ion advance.

  60. Naren on January 31st, 2012 at 9:49 am

    It’s really a nice stuff ! Really going to helpful for my first landing page.
    Thanks for sharing!

  61. taher on March 4th, 2012 at 2:25 pm

    THE best video tutorial.
    Thanks a lot for the knowledge you shared.
    Truly appreciate.

  62. Wally on March 21st, 2012 at 2:50 pm

    Do you plan on updating this to timeline? i found this really handy to create a site but now that timeline has been produced its totally changed and the documentation is lousy on how to add it as an app or time line tab

  63. Jonathan Goldford on June 21st, 2011 at 8:01 pm

    Thanks Tutorial Lounge. I’m glad you found it useful.

  64. Jon on December 29th, 2011 at 7:57 am

    Hi Jon,
    I did follow on your video, the problem is i cant create a new app because of facebook not allowing cause: “You can no longer create apps because our systems indicated that your account may not be authentic. Facebook requires users to provide their real first and last names, and fake accounts are a violation of our Statement of Rights and Responsibilities (SRR 4.1), even when used to host or test apps. Also note that maintaining multiple accounts, even if they are authentic, is also prohibited. If you would like to create a test user to test app functionality, you can do so here: http://developers.facebook.com/docs/test_users/

    I’ve tried so many times, but still not work with me. Is there another way to do like you did on that video??

    Big Thanks, if you can help me to solve it.