Jun 21 2011

How to Design and Program a Facebook Landing Page

Advertisement

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)

About the Author

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.

Comments and Discussions
  • JDF, 21 June 2011

    Cool! It was really helpful, Thanks!

    • Jonathan Goldford, 21 June 2011

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

      • George Patricio, 26 July 2011

        Hey Jonathan …

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

        alan

  • designfollow, 21 June 2011

    thank you very much for the creat Article.

    Facebook Landing Page is important today

    • Jonathan Goldford, 21 June 2011

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

  • massimo, 21 June 2011

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

    • Angel, 21 June 2011

      I can’t see the video in Firefox 4

      • Angel, 21 June 2011

        The same problem is in IE8.

      • Matic, 21 June 2011

        Same here FF4 and Chrome

  • ralf, 21 June 2011

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

    • Andy, 21 June 2011

      +1

      • Trafer, 21 June 2011

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

  • griffindy, 21 June 2011

    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.

    http://www.highimpactdesigner.com

    • griffindy, 21 June 2011

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

      • Lisandro, 21 June 2011

        The same, Mac OS Lion and Safari and Chrome.

    • Charlie Jensen, 25 October 2011

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

  • rostron71, 21 June 2011

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

  • Dangergirl, 21 June 2011

    Yup didn’t work for me either.

  • Johnathan, 21 June 2011

    I see the video fine, Mac OS Chrome

  • MJ Walsh, 21 June 2011

    Hey, It works in SeaMonkey right out of the gate

  • Robert Bowen, 21 June 2011

    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.

  • Robert Bowen, 21 June 2011

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

    Noupe Editorial Team

  • Paper Dog, 21 June 2011

    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?

  • Jonathan Goldford, 21 June 2011

    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.

  • honlapkeszites, 21 June 2011

    Thank you! Very useful article!

  • Andrew, 21 June 2011

    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, 22 June 2011

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

  • DigitalZu, 21 June 2011

    Nice post. Very thorough.

  • filippo, 21 June 2011

    Cool!

  • Barbara, 21 June 2011

    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!

  • leog, 21 June 2011

    that is a tuto!!
    thanks a lot!

  • Gene Miller, 22 June 2011

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

  • Will, 22 June 2011

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

  • Ramsey Stoneburner, 22 June 2011

    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

    • Jonathan Goldford, 23 June 2011

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

  • Kristin, 22 June 2011

    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, 23 June 2011

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

  • Jasper, 23 June 2011

    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.

    • Jonathan Goldford, 23 June 2011

      @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

  • Christa, 23 June 2011

    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

  • Brad, 23 June 2011

    Bookmarked! Thanks a tonne, amazing video.

  • Michael, 23 June 2011

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

  • Rob, 23 June 2011

    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.

  • Daniel Vartanian, 23 June 2011

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

  • Chresten, 24 June 2011

    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, 27 June 2011

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

  • Bala, 25 June 2011

    Really kewl…

  • Quick&Quality, 26 June 2011

    Great! its what im looking for

  • Satyajeet Shaligram, 26 June 2011

    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.

    • Jonathan Goldford, 27 June 2011

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

  • Count Ocram, 27 June 2011

    awesome, thank you for this tutorial!

  • Arturo, 27 June 2011

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

    • Jonathan Goldford, 27 June 2011

      @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, 27 June 2011

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

  • Ferdinand, 27 June 2011

    Thank you :)
    The tutorial is very thorough

  • Banana Kick, 28 June 2011

    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.

  • Daniel Wood, 28 June 2011

    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.

  • Guillaume, 28 June 2011

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

  • Mick Davies, 30 June 2011

    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

  • ntone, 30 June 2011

    looking for tutorial like long time ago.

    thnx for sharing the info

  • Lasith, 01 July 2011

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

  • Victor, 02 July 2011

    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.

  • ayelet, 10 July 2011

    Thanksssssssssssssssssssssssssssssssssssssssssssssssssssssssss!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • chris, 17 July 2011

    loved it… thanks for posting this…

  • jcarlitos, 18 July 2011

    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

  • Andrew, 22 July 2011

    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?

  • James, 24 July 2011

    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

  • Baloot, 27 July 2011

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

  • Tom, 31 July 2011

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

  • Janet, 01 August 2011

    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

  • Thomas, 01 August 2011

    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

  • Jasper, 09 September 2011

    Thanks so much for this tutorial!!!

  • Ravenna, 23 September 2011

    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?

  • Susan Mouw, 21 October 2011

    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

  • Niki Pike, 24 October 2011

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

  • cna, 13 November 2011

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

  • philip, 19 November 2011

    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

  • waheed, 20 November 2011

    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.

  • Naren, 31 January 2012

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

  • taher, 04 March 2012

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

  • Wally, 21 March 2012

    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

  • Jonathan Goldford, 21 June 2011

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

  • Jon, 29 December 2011

    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.

search form
 
image description image description