Create a Facebook Landing Page Using iFrames

April 13th 2011 / 2 minutes to read

blog-wp

Facebook decided to up and change just about EVERYTHING when it came to fan pages so here is a NEW hardcore awesome tutorial on how to create a fabulous landing page, like I have on OSN’s FB fan page!

I am going to assume you already have a facebook fan page (and you really should go and make a vanity URL, just make sure 25 people are “liking” you first!).

How to add the Static HTML: iFrame Tabs application to your page

  • Make sure you are logged into facebook.
  • Go to the Static HTML: iFrame Tabs page.
  • Click “Add to my Page”
  • A lovely window should pop up with all the pages you are an Admin of. Click “Add to Page” next to the page you want to make awesome.

Customize the New Welcome Tab

  • Now go back to your fan page and click the Welcome “tab” on the left sidebar.
  • The great thing is that you can now use javascript, link to an outside page, and more by using the iFrames protocol.
  • Put your glorious XHTML or whatever you want into the top box and leave the bottom box blank.
  • Now we want this to be our landing page for non-fans. So go back to your fan page and click “Edit Page”.

I know it looks like a lot of steps but really, it’s quite easy! The hard part is figuring out what you WANT on your landing page!

To help, here’s mine up for grabs! Download my FB Landing Page!

Now, in the comments, share YOUR Facebook Fan Page! Landing page or not, I want to become YOUR fan as well!

If you have any questions, need help, whatever it may be, feel free to ask!

This post is over a year old which means the content may be outdated or no longer accurate.

Notes

Likes I doubled-down on RSS by Eric Bailey.

View All Notes

Subscribe

Reading

Jams

Album Art for Shiver

Shawn Desman

Shiver

Album Art for Lay Your Hands

Simon Webbe

Lay Your Hands

Thank You!! I just created a fan page for my photography, and I’m working on getting more “Likes.” Can I do ANY of this without at least 25 likes?

OHH link me to your fan page. You only need the 25 “likes” for the vanity URL.

http://www.facebook.com/pages/Sunset-Winds-Photography/156261001103901

It’s literally JUST getting off the ground, but I hope my little baby will grow!

Oops, you lost me at “the great things is that you can now use javascript….” LOL. Those words are “scary”!

LOL I know more PHP than I do java-ANYTHING however at the core of it, before FB didn’t allow it, now they do. Which is neat. If you ever wanted to learn more about it / use it anyway LOL!

Jenny

woo! I was wondering what you had to do to make a FB Landing Page… now I know! Off to make mah own! :D

Reply to Jenny

Link back here so we can like it!

Lynda

Great tutorial, Sarah! I still have yet to create a landing page. As you said, the figuring out what should go there is the hardest part and is stumping me. Maybe I’ll use your template. :)

Reply to Lynda

Love your landing page!

Marie-Anne

Thanks for the tutorial!

I wanted to make a landing page for my blog on Facebook but I’m afraid I wouldn’t have enough followers. (Still working on the following thing though.)

Either way, this might come in handy. :)

Reply to Marie-Anne

thanks for this! This is probably step 2, but I can’t seem to get the “home” page to be the landing page for existing groupies. Is there a secret to this?

Explain? Are you wanting the landing page to be the first page EVERYONE sees or just non-fans?

I want two separate ones – and I’m just having a hard time seeing the one I did for Fans – not sure if I didn’t do it right or I can’t see it because I’m an admin.

Try a different browser while logged out of FB? That’s what I do or use private browsing feature on Firefox to see what “non-fans” would see. If you mean you created a FAN landing page, then when you save it, it should show you an option to “see” what fans would see.

PSHH even one follower is a good start!

Sharon

Thanks for such an awesome tutorial. I just might have to finally follow it make myself a landing page.

Reply to Sharon

YAY when you do, link it back here so we can like it!

nimil

thank you for this tutorial (and for the old one!) i’m trying to figure out what the heck to put on my landing page but since you said to share, here’s mine: http://www.facebook.com/pages/System-Overload/171149539600552 no vanity url yet :( i don’t have enough fans…

Reply to nimil

I suggest a bit about yourself, what you use your FB fan page for, and links to your twitter/website.

Angela

Question? What if you only want your landing page to be visible to non-fans and you want your “wall” to be visible to existing fans (versus another landing page). How do I do that? Thanks!

Reply to Angela

Doing the last step DOES that. It will only show the Welcome tab to non-fans and by default, show the wall to existing fans.

Angela

Thank you so much Sarah. I guess I need to pay better attention to what I’m reading-DOH!

Reply to Angela
Balanced Melting Pot

Okay, the hardest part for me is the HTML that goes in there. I tried copying code from my blog (you customized it for me) and it doesn’t seem to work. Do you have to create it from scratch?

Reply to Balanced Melting Pot

No, you can copy and paste from other sources.

What do you mean though about it not working, does it give an error, not look right, give a blank page?

Balanced Melting Pot

Never mind :-) I played around with it some more and got it to work. Thanks a bunch. My page is here http://www.facebook.com/BalancedMeltingPot?sk=app_190322544333196

Reply to Balanced Melting Pot
arvee

I finally had decided to make a landing page for my blog! ♥ Yayy… Thanks to you! ;) I downloaded your code and edited it.. ;) Thanks Sarah~

Reply to arvee

AWESOME!

Amanda Jillian

Check out my fan page, it’s kind of a thrown together landing page for now, just trying to figure out the coding.

Reply to Amanda Jillian

Leave a Comment

Thank you for your comment!
Please Read the Comment Policy.


This site uses Akismet to reduce spam. Learn how your comment data is processed.

To respond via your own website, enter the URL of your response which should contain a link to this post's permalink URL.
Your response will then appear on this post.