Tutorials

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.

(il)(rb)

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:

Sort by:   newest | oldest | most voted
JDF
Guest
JDF
5 years 2 months ago

Cool! It was really helpful, Thanks!

designfollow
Guest
5 years 2 months ago

thank you very much for the creat Article.

Facebook Landing Page is important today

massimo
Guest
5 years 2 months ago

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

Angel
Guest
5 years 2 months ago

I can’t see the video in Firefox 4

Angel
Guest
5 years 2 months ago

The same problem is in IE8.

Matic
Guest
5 years 2 months ago

Same here FF4 and Chrome

ralf
Guest
ralf
5 years 2 months ago

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

Andy
Guest
Andy
5 years 2 months ago

+1

Trafer
Guest
Trafer
5 years 2 months ago

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

griffindy
Guest
5 years 2 months ago

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
Guest
5 years 2 months ago

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

Lisandro
Guest
5 years 2 months ago

The same, Mac OS Lion and Safari and Chrome.

Charlie Jensen
Guest
4 years 10 months ago

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

rostron71
Guest
rostron71
5 years 2 months ago

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

Dangergirl
Guest
5 years 2 months ago

Yup didn’t work for me either.

Johnathan
Guest
Johnathan
5 years 2 months ago

I see the video fine, Mac OS Chrome

MJ Walsh
Guest
5 years 2 months ago

Hey, It works in SeaMonkey right out of the gate

Robert Bowen
Guest
Robert Bowen
5 years 2 months ago

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
Guest
Robert Bowen
5 years 2 months ago

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
Guest
5 years 2 months ago

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?

honlapkeszites
Guest
5 years 2 months ago

Thank you! Very useful article!

Andrew
Guest
Andrew
5 years 2 months ago

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?

DigitalZu
Guest
5 years 2 months ago

Nice post. Very thorough.

filippo
Guest
5 years 2 months ago

Cool!

Barbara
Guest
5 years 2 months ago

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
Guest
leog
5 years 2 months ago

that is a tuto!!
thanks a lot!

Gene Miller
Guest
5 years 2 months ago

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

Will
Guest
5 years 2 months ago

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

Ramsey Stoneburner
Guest
5 years 2 months ago

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

Kristin
Guest
5 years 2 months ago
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… Read more »
Jasper
Guest
Jasper
5 years 2 months ago

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.

Christa
Guest
5 years 2 months ago

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
Guest
Brad
5 years 2 months ago

Bookmarked! Thanks a tonne, amazing video.

Michael
Guest
5 years 2 months ago

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

Rob
Guest
5 years 2 months ago

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
Guest
5 years 2 months ago

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

Chresten
Guest
5 years 2 months ago

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

Bala
Guest
5 years 2 months ago

Really kewl…

Quick&Quality
Guest
5 years 2 months ago

Great! its what im looking for

Satyajeet Shaligram
Guest
Satyajeet Shaligram
5 years 2 months ago
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… Read more »
Count Ocram
Guest
5 years 2 months ago

awesome, thank you for this tutorial!

Arturo
Guest
Arturo
5 years 2 months ago

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

Ferdinand
Guest
5 years 2 months ago

Thank you :)
The tutorial is very thorough

Banana Kick
Guest
5 years 1 month ago

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
Guest
Daniel Wood
5 years 1 month ago

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
Guest
5 years 1 month ago

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

Mick Davies
Guest
5 years 1 month ago

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
Guest
ntone
5 years 1 month ago

looking for tutorial like long time ago.

thnx for sharing the info

Lasith
Guest
5 years 1 month ago

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

Victor
Guest
Victor
5 years 1 month ago

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
Guest
ayelet
5 years 1 month ago

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

chris
Guest
5 years 1 month ago

loved it… thanks for posting this…

jcarlitos
Guest
jcarlitos
5 years 1 month ago

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
Guest
5 years 1 month ago

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
Guest
5 years 1 month ago
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… Read more »
Baloot
Guest
5 years 30 days ago

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
Guest
5 years 26 days ago

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

Janet
Guest
5 years 26 days ago

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
Guest
5 years 25 days ago

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
Guest
Jasper
4 years 11 months ago

Thanks so much for this tutorial!!!

Ravenna
Guest
4 years 11 months ago

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
Guest
4 years 10 months ago

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
Guest
4 years 10 months ago

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
Guest
cna
4 years 9 months ago

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

philip
Guest
4 years 9 months ago

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
Guest
waheed
4 years 9 months ago

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
Guest
4 years 6 months ago

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

taher
Guest
4 years 5 months ago

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

Wally
Guest
4 years 5 months ago

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

wpDiscuz