How To Create A Facebook Landing Page (Static HTML / iFrame Tabs)


This is a basic tutorial showing you how to build a Facebook landing page using a application called Static HTML iFrame Tabs (by Jason Padvorac its easy to use and allows you to add 2 landing pages: 1 for non-fans, and 1 for fans.

There are other Static HTML / iFrame type applications available now too, read post The Best Facebook iFrames Apps

You need to have your Fan page setup first – read this tutorial

You Need SSL Web Hosting

The Static HTML app has had https functionality since its release, but it only hosts code/text — if you’re hosting content from a different server (for content besides text, like images, video, sound) you’ll want to have a server that has https enabled.

Files that MUST Be HTTPS Within Static Html App

  • Images — <img /> tag;

    Example:
    <img src=”https://www.yourwebpage.com/image.jpg”>

  • Embedded files, such as Flash and Video. YouTube is served over SSL, so you can simply change its embed-video URLs from “http” to “https” and they work fine.

    Example:

    <iframe title="YouTube video player" width="480" height="390" src="https://www.youtube.com/embed/A7F2X3rSSCU" frameborder="0" allowfullscreen></iframe>

If you want to get https (SSL) web hosting I recommend HostGator Business Plan, to get $9.94 off on any order, enter the promo code on the order page DISCOUNTCODE994OFF ,you will also need a domain, we recommend you get domain hosting at Name Cheap

1. Create a call to action image

A really cool trick you can use for the “html” part of this method is that you can create a .jpg file and store it on a server somewhere and then simply link it on the static html iframe tabs application area using just one line of code:
<img src=”https://www.yourwebpage.com/image.jpg”>

You can hire someone to create a graphic image 810px wide (previous tab size was 520px by 800px.

Example of call to action landing page Take a Sheet fanpage

Takeasheet page

2. Add the static HTML: iframe tabs App

The app you need for your custom page is called “static HTML iframe tabs” located here. If you’re logged into Facebook, you can add it to your Page. It is essentially a blank canvas where you can add whatever content you want, including custom images and links via standard HTML.

3. Setup your tab

Once you’ve added the static HTML iframe tabs app, click “Welcome” in the tab menu below your company’s profile image. This will bring up the apps settings.

In the Fan box – just put a link to your image or html code

Below is the sample HTML code to use to embed the image into the application:

<img src=”https://www.yourwebpage.com/image.jpg”>

(optional Non fans – only content) – this is where your content goes for fans that have not liked your page yet. So you could put something to entice fans to like the page, like my page and I reveal more information to you..something like that

You can add standard HTML to the page as you would any website, including images, text, links, and other formatting.

4. Change Tab name
If you want to change the tab name, to something more appropriate, like “Special deals,” or latest news,” depending on how you plan to use your Page. Click on “edit info

then click on “apps”

Select static HTML iframe tabs app – edit settings

You should see a pop up window – Change tab name

5. How To Add More Tabs
You can add up to 12 welcome tabs. When you are in the static html app, click on “FAQ & Help Center

Click on entry for “How do I add more than one tab?“ click on the second tab

You will be taken to the static app page, click add to your page on the left side of navigation

Select your fan page to add a second welcome tab

The Final Fan Page landing tab – Visit http://www.facebook.com/fanpagetemplates

Any problems leave a message on the developers Facebook pagehelp

Thats it! let me know what you think of this tutorial, by leaving a comment below


free Facebook page

Subscribe today and recieve free Facebook page templates and tips on promoting your fan page

129 Responses

  1. I’m not seeing the default landing tab. Did Facebook recently remove this option?

  2. Great tutorial, really clear and gets around a lot of the time-consuming parts of setting up a ‘new version’ Fan Page.

    Thanks for the tools to create lots of great pages.

  3. I agree great tutorial – very clear. I designed an iframe page and when I use the app look at fan view and non fan view everything is perfect. save and close set landing page and nothing is there, it’s driving me crazy lol. just wondered if anyone had a direction I could look for answer. ty

  4. I’m with Bruce…it works great in test mode…but does not work when viewing the page – always brings me to my wall…if I click on tab on wall it works…bringing me to the html code entered for those who have already clicked the like button…but not when opening the page…already clicked like button so have no idea if that part works…driving me crazy also…anyone with ideas…please contact…thanks!

    • Ron, if a person Liked the business page, the the default page for this person is the Wall. Only the person, who did not Like the page yet, see the Welcome tab as default landing page.
      Because you already liked the page, therefor you end up on the wall and not the Welcome page.
      That is the way FB works right now. :-(

  5. I cant see the default landing tab

    • You need to go to edit info, than select manage permissions, change the default tab, to the name you called your static html tab

  6. Is there a way to add a second page? or can we only have one?

    • You can add up to 12 welcome tabs. When you are in the static html app, click on “FAQ & Help Center “, and then the entry for “How do I add more than one tab?“ click on the second tab, then add to your page

  7. Great advise thank you, I am just wondering how you add more than one welcome page, I have seen it on a few other facebook pages but I’m not exactly sure how you add them.

    Thanks

    • You can add up to 12 welcome tabs. When you are in the static html app, click on “FAQ & Help Center “, and then the entry for “How do I add more than one tab?“ click on the second tab, then add to your page

  8. Can i make many tabs with static html iframe, like fbml ? :(

  9. Thanks for the post been looking for an alternative for static FBML might get around know to building a fan page.

  10. Hi there! Tim and I are always looking for feedback about the app, and to answer questions — so let us know if you have any! You can reply to this comment, or write on our wall. We’re pretty quick about responding. :)

    Cheers!

    - Jason

  11. I created the call to action graphic for non-fans, but how to I set it up so that fans go straight to the wall?

    • Fans will go to the wall as default, unless you have changed the permissions, as stated in point 5.

      • I have recently been reading through forums addressing Default Landing Tab issues over the last 2 years, and it is apparent that this functionality has been through a few iterations. It also appears that sometime early this year it became impossible to direct fans to land anywhere but the Wall. Please correct me if I’m wrong. I am only able to direct non-fans to land on the non-fan content of my iframe tab by selecting the iframe as my Default Landing Tab. Fans continue to land on the Wall but do see the Fans-only content when they select the iframe tab.

        Thanks

  12. This is really cool, just wondering about the privacy of the data that we add to the pages – who stores it, yourselves or is it facebook?

    • This information is from Facebook’s Privacy Policy

      Information we receive from third parties:
      Facebook Platform. We do not own or operate the applications or websites that you use through Facebook Platform (such as games and utilities). Whenever you connect with a Platform application or website, we will receive information from them, including information about actions you take. In some cases, in order to personalize the process of connecting, we may receive a limited amount of information even before you connect with the application or website.

      http://www.facebook.com/policy.php

  13. This is the first tutorial on the subject that was complete, step by step, with visuals (whoo hoo). I am so impressed that I am subscribing to your newsletter.

    Really thanks a bunch.

  14. anybody else use flickr to upload they’r picture to? i followed the instuctions above and entered into the i frame and nothings showing up when i go to view it??

  15. great thanks for this… good help!

  16. Hello,

    In your tutorial you show that you can order tabs loading by changing options in Manage permissions, Default landing tab. But I don’t see this one in my FB page settings :(.

  17. Great article, however when I go to your fb page the image is all the way down the bottom and you can’t even see it. Can you explain how to not have that happen? It might be my laptop, but when i go to your fb page it’s a blank white wall below the like button and you image is way down.

  18. OK, so I have it all the way I want and deleted my old tab versions. I can view in Firefox and Opera, but IE9 doesn’t display ANY of the new tabs at all. I’ve tried setting IE to accept anything and let down its guard as much as possible, still nothing. Anyone have any suggestions? IE is still (unfortunately) the factory browser for PCs and I’m doing this page for a company that will NOT take kindly to the “plug-and-play” users being shut out of viewing their page. HELP!

  19. It’s a good help – big thanks! :)
    Regards from Poland!

  20. Great intro tutorial,

    Now i need to work out how to make a button and show a youtube video :p

    Jack

  21. Hi there, I am really looking forward to using this app but I can’t get the landing page to work for fans, it just goes straight to the wall. I have set the default landing page to Welcome, with no luck. Help?

  22. If I have a form in my HTML or welcome page, will the data filled in be used by the app or by facebook?

  23. this works like a charm but i think with the recent changes of facebook, a FAN could not land on the landing page. Only works for user that is not a fan. Please verify this? thanks

  24. Here’s mine http://www.facebook.com/financial.planning.phils?sk=app_205398432811238

    It’s a community page and I don’t have the option in the Permissions in setting the landing page.

    I wonder if there’s any programming remedy to that.

    • See if you can change your page to a business page, by clicking on edit info on your page and try changing the category. If it does not work, create another page, but make sure its a business page and invite your fans from the community page to your new page.

  25. Amazing post! Thanks so much for making one.

    I keep trying to set this up but when clicking on the Static HTML icon on my fan page, I am not being prompted with anything, but am rather seeing all white instead of the developers box to enter HTML. Any idea why this could be happening? I tried a few times from different computers.

  26. The fan page I’m working on doesn’t have an option for Default Landing Tab under Manage Permissions. Why is that? What can I do about it?

    • Is your fan page a community page? You can’t have a default landing tab, if it is. Try and change your fan page to a business page, by selecting a different Category within your fan page.

  27. I know I didn’t set it up as a community page, but my co-administrator (and the author of the book we’re promoting) said something about thinking he might have changed it to a community page without really understanding what he did (he’s new to FB). Is there any way to change it back to a business page?

    • See if you can change it back to a business page, by clicking on edit info on your page and try changing the category. If not, the only thing you could do is create another page, but make sure its a business page and invite your fans from the community page to your new page.

  28. That’s the thing that’s confusing to me – I don’t see where it says it’s a community page. Right now the category is Books & Magazines, but I already changed it to Companies & Organizations successfully but the default landing tab still doesn’t show as an option.

    • Hi

      I changed one of my pages to category books & magazine and the default landing tab option was their. and it was a community page. I can’t tell what the problem is, You may have to get in contact with Facebook

  29. Is it possible to have your own logo rather than a star as the app button, I have seen it on some other pages. Any advise would be great

  30. When using photobucket to host the images, users who click on the facebook image are taken to my photobucket album and can see all other photos. Is there a way to disable the link buit still show the image in the facebook iframe?

  31. I can’t seem to make the (optional non-fans only content) appear. I’ve only got the (optional fans only content)

  32. None of the images I link in the static HTML box will load… All have added “http://s3.amazonaws.com/statichtmlplus/page/%E2%80%9D” before the link, which may be problem. Any help, please?

  33. Hello,

    I’ve changed the default landing tab to my page tab (called Welcome) but if I look up my page via the search bar, I still land on my Wall instead of the page itself.
    Any comments on this please?

    • If you are log in Facebook and your the admin or have liked a page, your only going to see the fan page wall. Thats how it is in Facebook.

      Only the person, who did not Like the page yet, sees the Welcome tab as default landing page.

      Copy the url of your fan page and log out of Facebook and paste your url in the browser, you should see your welcome page now.

  34. My question is that when I add the html to the app, save and view tab, and then come back to it there is no “finished product” but the screen goes back to the editing frames. Is this something I will only see? Will my fans see the edit part or what I’ve saved?

  35. is any chance how move tabs from right column to above as horizontal menu?
    Thanks

  36. I want to add an email list sign up to my page; what is the best way to accomplish this?

  37. Hi Can you tell me why my 500×960 image on the welcome page would appear cropped. Is there a fix for this ? I have tried putting width and height in the code with same result.
    Thanks

  38. Please disregard my previous question – I had checked the FBML option next to scrollbar.
    Unchecked its all good :-)

  39. Thank you very much for all the posts and comments. It’s been very helpful and I’ve finally managed to put the iframe to work. Good job to all!

  40. Hey man — I have been looking for like two hours on how to add the second, third, etc tabs….THANK YOU

  41. agreed with Ryan, thanks for the clear and concise tut on adding multiple tabs :]

  42. So how do you create a landing page only for non-fans? I have changed the “Default Landing Tab” to the landing page I created, but this option directs EVERYONE including fans to land on the landing page instead of the wall. So I left the setting as “Wall”, and now everyone including non-fans land on the wall.

  43. Incredible tutorial!!! everybody just said so many times… but is just great.

  44. I managed to build the landing page after the example given by you,
    chek it out http://www.facebook.com/zynkcompany

  45. Thanks for clearing how to add a second tab

  46. Hi! Thanks for this, very useful!
    I have a question: once the fan clicks on the “like” button, how can I make them go automatically to another tab of my page. I THINK that right now once they click “like” it goes to the page wall, but I’d rather lead them to another tab… Is this possible? Thank you!!

    • Go to step – 5. Make it the default landing page

      You could also do a reveal tab similar to my fan page – http://www.facebook.com/Ilikethisfanpage

      I offer an incentive such as a free gift to get visitors to like my page. Once visitors like my page they are sent to my landing page tab.

      1. create an image, to entice visitors to like the page, enter html in content, make it your default landing page.

      2. add the content that you want fans to see in the [optional] fans- only content

      I am going to do a tutorial on it.

      • Ok, thanks! I think I get it – I don’t think it’s actually possible to lead to ANOTHER link just by clicking “like”. So like you said, I’ll just have to create a content that I want them to see in the second (optional) box. I’ll be waiting for the tutorial!

  47. Wow. Clear, concise, step-by-step.

    Thank you so much!

  48. Thank You Very Much You Saved Me! :)

  49. hi jason and tim. love the app. I used both the fan and non-fan code to show some of my clients a demo of how your app works. one issue I noticed is that when a non-fan click LIKE, they land on the Wall, instead of the fan Welcome page? is there any way around that? so that it works like a Reveal Tab?? here it is the sample I was playing with:
    http://www.facebook.com/pages/Netdotstuff/137333506356761

    thanks!

  50. I’m having the same issue as Karen and many others. I have created non-fan and fan content and set the default landing page (step 5) to “Skinfinite Store”.

    When a non-fan visits the page, they see the correct content (non-fan content). When they click “like” they are brought to the Wall instead of seeing the fan content I created.

    Here is a link to the page: http://www.facebook.com/skinfinite

    Any help on this would be appreciated. We are offering a free shipping code to anyone who clicks “like”, so i would like the new fan to be able to copy and paste the free shipping code without having to click on the “Skinfinite Store” tab again after they’re brought to the “Wall”.

    Thanks!

  51. Hi! Thanks for this, very useful!
    I have a question: I have created six tabs of Static HTML follow your tutorial but it seem the left menu show only 4 tabs and hide 2 tabs. How do I solve it? or What should I do to show all tabs ?

  52. That’s odd. When i use a Facebook account that has already “liked” the fan page to test by “unliking” and “liking” again …. i am brought to the “wall” after I click “like” for the second time.

    But when i use a Facebook account to test that has never visited the page before and click “like” … I see the reveal info.

    Just thought i would update my previous post in case anyone has this same issue.

    Thanks
    Susan

  53. Hi there,

    Great tutorial! Is it possible to Change the Star from the tab in something Else. If you have more than One tap it doesn’t Look very nice, to have a Star with every Tab.

    Regards, Bernd

  54. Is there a way to *stop* editing the tab?

    If I’m the admin of the page, then I can only see the editor, not the page. Is this expected behaviour?

  55. I have been trying to figure my FB landing page. And I cant seem to make it work. I have already designed my image file as my landing page. image file is hosted on mediafire with this link: http://www.mediafire.com/imageview.php?quickkey=uw3ov4tr2uh0fvg&thumb=6
    loaded and saved this on my welcome tab. but it does not seem to work. Maybe I am missing something. Any help is greatly appreciated.

  56. Good day,

    1st great tutorial!
    2nd: The page I am creating has a subscription box. Am I correct in thinking that all of the page’s HTML will have to be entered? (not only a pic of the final page saved as an image with http://freevps.us/img/ )

    Thanks

    Chris

  57. LikeTHisFanPage, you are a patient person, thanks for responding.
    When I click on the “Welcome” icon the display boxes for the HTML do not show up, there is just blank space there. Also, when I clicked on a link above to someones landing page THEIR page was blank. Does anyone know of a setting that I am missing? Everything worked fine until three days ago, suddenly none of my static html apps display for editing on any of my business pages? I click on the tab and the editing page stays blank? Thank you all, and Thank you for a Killer APP!

  58. I need to add another tab under the welcome tab – When I get to step 6 in your tutorial I cant see the FAQ Help Centre – in fact it wont let me access the welcome page either now is this changed or obsolete or what??? HELP

  59. I am sorry to post this late but I am having an issue and you seem to know your stuff hehe.
    I do not know whether a user is directed towards my wall once he or she has liked my page.
    My default landing page is set to the HTML / Iframe tab, but once users have liked the page I want them to be directed to my wall to view my content. Does this happen automatically ?

    Many thanks in advance.
    Thank you in advance

  60. i am added
    but after saving the page, still the ediging option coming, even after refreshing the page.

    pls guide me,
    thanking you in advance

    shinu

  61. I’ve searched all over for this information.

  62. can we remove application installed cause i want use other application?

  63. There is no default landing page option for my page.
    Is there any way to have a welcome screen?

  64. I’m paul…it works in preview mode…but does not work when viewing the fan page – always brings me to my wall…any solution? i alrdy change the the default tab to my tab..

    • Are you log into Facebook, while viewing the page? If you are your viewing your page as a fan, so will need to log out to view the page as a non fan.

  65. Hi there..Alhamdulillah…you are helping me..tanz goodness !!!

  66. Hi! I tried to use the service you recommended http://freevps.us/img/ but it displays this message

    Image hosting disabled due to copyright complaints

    do you recommend another? thanks !

  67. @ Britt, Saab, and others who have asked about the “[Optional] Fans-only content” not showing up/appearing when using this Static HTML iframes tab app:

    I found a workaround the other night. Rather than using html, plug in your content using the old FBML code. Note: do NOT enable FBML mode in the app — all you have to do is enter FBML code where the HTML code goes.

    Example: for using an HTML image on a landing page:

    Note 1: I used this code for BOTH the fans and fans-only content. I’m not sure it works if you use for just the fans-only content — you can play with that.

    Note 2: I have only tested this using html – not CSS or Java script.

    Note 3: if this does not work, try removing your company address from your profile and remove the page from being a “place”. (see: https://developers.facebook.com/bugs/234791919911268)

    You can see this working on my page: http://www.facebook.com/tony.buys.houses

    If this has been helpful for anyone, please feel free to Like my page :)

  68. Hi, I cannot get the img to center using the static html app.

    Can you help?
    Thanks.

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

Leave a Reply

Your email address will not be published.