Jonathan Goldford June 21st, 2011

How to Design and Program a Facebook Landing Page

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. (il)(rb)

Jonathan Goldford

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.

Tags:

85 comments

      1. Hey Jonathan …

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

        alan

  10. 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.

    Reply

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

    Noupe Editorial Team

    Reply

  13. 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.

    Reply

  15. 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?

    Reply

    1. @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.

      Reply

  18. 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!

    Reply

  22. 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!

    Ramsey
    Cowgirl Expressions

    Reply

    1. @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.

      Reply

  23. 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!!!

    Reply

    1. @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.

      Reply

  24. 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.

    Thanks,
    Jasper.

    Reply

  25. 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

    Christa

    Reply

  28. 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.

    Reply

  30. 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

    Reply

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

      Reply

  33. 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!
    Regards,
    Satyajeet,
    Pune, India.

    Reply

    1. @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.

      Reply

  35. 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 :(

    Thanks!!

    A.-

    Reply

    1. @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.

      Reply

  37. 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.

    Reply

  38. 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.

    Reply

  40. 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

    Reply

  43. 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.

    Reply

  46. 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.
    Chau

    Reply

  47. Jon,

    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?

    Reply

  48. 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.

    Thanks,

    James

    Reply

  49. 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. :)

    Reply

  52. 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…

    Cheers
    Thomas

    Reply

  54. 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?

    Reply

  55. 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

    Reply

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

    Reply

  58. 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

    Reply

  59. Hi,

    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.

    Reply

  62. 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

    Reply

Leave a Reply

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