How To Create Facebook Landing Page In One Simple Step

Creating a Facebook landing/welcome page is no more difficult. Since then FBML was called off by Facebook, iFrame came to the rescue to create custom landing page for Facebook fan page. Normally to create an iFrame tab, you are required to create an app and follow certain instructions. To me, its quite hard for the beginners to catch up with it. For all those users, who look for quick setup of iframe tab, here is Static HTML: iFrame tabs a Facebook app developed to easily add custom html codes to create welcome page or landing page in minutes.

Add Static HTML Facebook app

Facebook iFrame tabs

After installing the app, assign the app to anyone of your Facebook Fan page and click Add. Now you can see welcome tab on your Facebook fan page on which we have to add the respective codes.

Example script (just to try)

<html>
  <head>
    <title>My Facebook Welcome Page</title>
  </head>
  <body>
    <h1>Welcome to my Facebook Page</h1>
    <p>Place a text that has to be displayed for Facebook visitors</p>
  </body>
</html>

Facebook fan page iframe tabs

If you have a close look at the app, you can see another box which is for displaying content for
‘fans only”. This option is quite useful if your running a contest for fans, you can make use of this box to enter fans only content on your Facebook fan page.

After saving the sample HTML code or the custom code create for your landing page hit save. Now view the landing page as non-fan visitor to check out the output. Finally edit your Facebook fan page and set the default landing page as welcome or whatever name you used for the Static HTML Facebook app.

Here is the output

Facebook welcome page

Update: Check out my latest post on Create Custom Facebook Page using No Coding Skills. Surely a must read post for non-programmers and designers.

Note: We also offer custom Facebook welcome page at an affordable price. Contact us to get started with it.

July 31, 2011. This entry was posted in Facebook, Tutorials and tagged , . Bookmark the permalink.

We Recommend HostGator Hosting

Bloggermint strongly recommends Hostgator Hosting for all of your web hosting needs. Sign up today for WordPress Hosting at just $4.95/month.

Use coupon code "bloggermint" to get 25% discount on any hosting packages. Get an account with Hostgator now!

42 Responses so far!

  1. Been searching for this kind of simple for long time.. Thanks for this great facebook app suggestion.

    Robin.

  2. nice post.. this is very helpful for my facebook page customization..

  3. wat an awesome tutorial

  4. Great tutorial!!! Thanks.

  5. Dead simple. Thanks for share :)

  6. I wonder if you might have an idea for me? If you click on the Calendar link (in left sidebar) you see that the iFrame is too narrow, forcing the user to use the horizontal scroll bar, regardless of how wide their browser window is set to.

    Thank you for the article. And thank you for any suggestions anyone may have for Austin Deaf Events.

  7. Thank you for sharing this but I have a question, how to set the Welcome page as default page (instead of Wall)? Thanks again :)

    • You find an answer for making it the default page yet?

      • Andy Williams

        You can’t — Facebook pushes all access first to the Timeline unless you send people a specific Page/Tab link (which you could also shorten using a URL shortener — Bit.ly would actually even let you customise the short link to look more meaningful)

  8. How do I insert an image to be used with the Welcome page?

  9. Hi, I followed your instructions and created a great landing page. However, when I set the permission to set my welcome as my default page, it is not working. I sign out and log on and I come back to the wall. Any suggestions?

  10. Really Thanxx For The Awesome Article ……….

  11. thanks Man For This tutorial

  12. I did exactly the same thing and got the welcome tab on the left panel. However, when I clicked on “welcome”, nothing shows up. I don’t see any space for me to paste my HTML. I only see a blank page. I tried to remove the application, and add in again but I still get the same blank page. What is your advice?
    THanks in advance!

  13. thanks boss!!!u helped me…!!…simply aesome…:)

  14. The landing page works on my desktop but it takes a while to load when I use a non-admin account. When I look at the full Facebook site on my smartphone the landing page never loads. Is this due to where I have my images saved?

  15. Hi Franklin,

    Creating custom Facebook landing page is really this easy? Thanks for this amazing tutorial Dude…

    Keep them coming… :)

    Regards,
    Fred

  16. I’m not sure if I’m encountering a FB glitch or a browser glitch, but no matter how valiant my efforts, the dialogue boxes are not accepting ANY type, never mind code. Any help would be greatly appreciated.

    Thanks

  17. Thanks for this, I have FB with almost 6000 fans without welcome page. I will try it now, i read that it should attract more fans. Thanks!

  18. Easy and simple………….thank

  19. Hey that’s great. Brilliant suggestion. Now we can have something nice in the landing page at last. Links out perfectly to an image hosted on my website.

    Thanks once again
    fb/brierleyvillage

  20. Great tutorial!!! Thanks.

  21. hay brother. how can i add a custom image to there. i mean to the welcome page ?

  22. I went through so many tutorials before I finally found this awesome one. Thanks so much for sharing this. This is so much easier than all the other ideas out there for iframes and FBML and whatnot. Thanks again!

  23. Awesome! Thanks a lot for the tutorial.

  24. I never knew creating facebook landing page design is simple this much. Thanks for sharing this great informative blog

  25. Charles Blair

    Hi,

    Here is an alternate to add Static HTML iframe Tab on Facebook. Checkout this app

    Source(s): https://www.facebook.com/apps/application.php?id=296389397052299&sk=app_296389397052299

  26. Hi!
    I did set the Welcome tab as my default landing page, but the “Wall” tab is still the default page….what should I do to fix this problem? I also tried to change to other tabs as default page, but the Wall tab is still there when you first click into the page…I really don’t know what to do now…thank you!

  27. Hi,

    Thanks a lot for this tutorial. Although I did create my own app at the end, I really appreciate your work with this. It helped me a lot to understand how to create a landing page!

    Let me know what you think about the page I created:

    http://www.facebook.com/Krisztaline

    Thanks a lot, and keep up the good work!!!

    Peace!

  28. Thank you very much! Great! :)

  29. I just followed this guide seems that is not valid with recently changed policies.. I am not able to create a welcome page tab for fan pages.. please help me in this regard…

  30. The default landing page feature is going to the wall for non-fans and fans. How can I get the set tab as Default landing page to work correctly?

  31. Hello and thanks for this great post, I really mean it :D. I just got my landing page sorted, awesome! I found other guides about using a WordPress plugin and all sorts of complicated junk. This was very simple!! May I suggest adding this to your post? Seems a lot of people are having trouble doing this.

    TO SET THE DEFAULT LANDING PAGE

    Got to: Edit page > Manage permissions > Default Landing Tab

    Hope this helps some one else :)

  32. Is there a way to set up a sales video on your facebook landing page design?

  33. I recommend

    Static HTML Iframe Tabs

    Not require HTML Knowledge Makes it Easy and Flexible to create powerful custom Static HTML Iframe Tabs with WYSIWYG.

    App URL : http://apps.facebook.com/html_iframe_tabs/

    Help & Support : http://www.facebook.com/pages/FaceApps/222746251163653?sk=app_377208688986227

  34. Hie.
    Would you be kind enough to share the code.
    l have been trying to make users add my a application to pages using graph api without success

  35. awesome………..
    thanxxxx 4 putting this code…. :)

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>