You may recall my previous post about creating a Facebook landing page using the Static FBML app. Well, starting March 11, 2011 Facebook is phasing FBML out and will use iframes instead.
If you used the Static FBML app previously to create a landing page, don't worry. It will still be supported for the time being (I'm not sure if and when that might change though). I still recommend you watch the video below, though if you are interested in creating a reveal page quickly and easily (LOTS of possibilities here!). You can see what I mean if you aren't already a fan on my Facebook page.
Anyway, for many of you, that's a lot of confusing jargon. Suffice it to say, if you create a Facebook landing page after March 11, 2011 here's how you can do it. Be sure to read the Notes below for extra tips, image measurements and resources.
Can't see the video? Watch How to Create a Facebook Landing Page Using iFrames here.
Notes:
- The app I used is the Static HTML: iFrame Tabs app.
- I created my landing page images in Gimp. You could also use Photoshop or even Picnik using the technique I describe in How to Make a Blog Button. NOTE: Your image width for Facebook landing pages should be 520px. The height can be whatever you'd like. Mine are somewhat square.
- There are all kinds of creative things you can do with your landing page(s) and the images you use. I highly recommend making a clear call to action, whether it's providing the opportunity to sign up for your newsletter, offering a free download, linking to popular posts on your blog, etc.
- If you need to know how to upload an image to your server, check out my post, How to Use FTP.
- Now, how 'bout becoming a fan of Blogging with Amy on Facebook to have access to extra blogging and business tips! And see landing pages using iframes in action.
I am having my blog designed right now (well first of April), and I actually might take off the cost of her designing my Facebook landing page now. We'll see, I need to play around with it a bit. I really appreciate your instructions!
Blegh iFrames. Do. Not. Like. Ha!
Oh I don't doubt it, it's always been pretty painless. iFrames just seems kind of a dated way to go. Either way, good to know, I'd been hearing something was going to change and have had my ear to the ground because Facebook customizations seem to be a pretty popular service for us as of late.
One nice upside of an iframe is that you can track the stats (since it's stored on your own server). An extra little bonus!
Amy, you rock!! I love your tips and have used several of them. Thank you for sharing.
Shannon
{aka}|design
You're very welcome, Shannon.
Thanks so much! I use Blogger, so it was a little tricky to figure out PhotoBucket and the html code, but I got it! Thanks!
Yay!
Amy – will it go to the landing page by default when a new person stops by the page? Or do I need to specify it somewhere? Thanks!
I guess I should clarify – I don't see the area to choose to make the Welcome page my default landing page, although it's there in the sidebar. It's not in the Manage Permissions area for me…
It's not in the manage permissions area? Hmmm….are you sure you are editing your page and not your personal profile?
Yes, I just went in and double-checked. I wonder if it's a glitch for me? I wonder if I can uninstall the app and do it over again? Hmmmm….
This is an issue that pops up every few days. Here is what facebook has to say – http://on.fb.me/g6e5L5 .
Try changing your category under basic info, if this doesn't work (for example pages set to the category community don't have this option), it appears this is a glitch that'll go away – I've had similar problems, but the option eventually appears.
The facebook forum conversation on this topic is here: http://on.fb.me/fbERwN
Hit reply back if I can be of more help.
- Tim
P.S. I fanned your page Abby! Good stuff
Thank you so much for this information! I just went and created my new Welcome page on Facebook!
I use blogger, and I found it was easiest to add the welcome page using Photobucket and then copying the "HTML code" straight into the app. You can find the "html code" just below the picture that you upload.
Thanks for the Photobucket tip Lynette!
Amy – this is an unrelated comment but I couldn't figure out how to e-mail you?? I'd love to post an advertising link for your e-book (it was great by the way) on my new website. Can I do that? And can I be an affiliate for you? Thanks for any info. Elaine
Hi Elaine,
Yep, you can find out how to become an affiliate here.
Hey great article, I'm the co-developer of the app used and would be happy to answer any questions that come up!
If anyone's wondering, we're keeping it free and white label forever. You can find the app here… http://on.fb.me/fgMjh6
Btw, it was awesome seeing someone using the app, really motivating!
Thanks for jumping in Timothy! Loving the app so far.
Thank you for posting this here, my FB page would not allow browsing for apps, so I was able to access it through your link here! Thank you for saving my having to go to discussion boards!
Amy! Thanks for the great tips! Question though: I made sure the default landing page was set to Welcome, but for some reason fans of the page don't see it…any advice? ( People who aren't fans see it fine)
The non-fan landing page which switches to the fan landing page once they click the Like button, happens only on the first visit. Once a fan returns for a second visit and thereafter, they will be taken to your Wall. So, the non-fan/fan landing pages I described in the video are mainly for the benefit of a first-time visitor. Hope that makes sense.
Great info!! Thanks so much!!
I liked your Facebook page. You can like mine too, if you want.
Amy – this is a great tutorial and I "liked" you on FB!
Thanks!
(love getting your tips in my email too!)
Stacey
Thanks, Stacey.
I hope to make a landing page on facebook soon. I think they look very professional. Thank you for the info. It gives me a new goal for the week.
After several tries I finally figured it all out! It's nothing fancy, but it works for now until I can learn a little more and spruce it up a little.
Thanks, Amy!
Thank you Amy!
This was wonderful information!!!
Awesome. Thank you so much for this. I've wondered for a while how people did this.
Is it bad that I didn't even know you could add applications? Ha! Not as savvy as I thought! 
I guess we all have to learn at some point. Seems I am constantly learning something new about blogging and social media.
Thanks Amy for showing this . This is what I really need
Fb really changes lots of things…
Amy,
Do you ever have any problems with the app taking forever to save or being too busy to be useful?
Best,
Russ
Hmmm…no, Russ, that hasn't happened to me. Not sure why that would happen…maybe your image is too large? Otherwise, you might try posting on their wall and asking.
Must have been a brief network issue or my connection at work. It works perfectly. Thank you so much so sharing this knowledge! I'm now an Amy fan and have subscribed to your future posts.
Have a great night!
Russ
Glad you figured it out!
Awesome. Thanks for the info.
Also I came across this cool plugin for wordpress that allows you to control your pages through wordpress. You still need to do the above steps but from then on you edit your page through wordpress.
Plugin: http://wordpress.org/extend/plugins/facebook-tab-manager/
Thanks for the resource, Carlos!
Amy,
I am so confused, I started the app, but it looks like it is starting a brand new page for me, which I don't want… is there anywere else that shows your video since the youtube version is not working?
Thanks!
The video is working again, so see if that helps.
I apologize for the inconvenience.
Got a problem. I get to the point where I've searched for the static html iframe app, but on the left side of my page, unlike your illustration, I don't have the item "Add to my page" listed. What is there is
"Add to my page's favorite"
"Contact Developer"
"Report App"
"Share"
But not "Add to my page"
Thanks… This is the only tip that worked for me… I've been searching about how to create a landing page for five hours… Thank you very much…
Glad it helped!
Hi Amy. Thanks for this great tutorial!
One question…My like landing page shows up for non-fans, but after setting the Welcome page as my default landing page, my fan landing page does not show up. FB just takes them straight to the Wall. Wat did i do wrong?
Help!
It doesn't sound like you did anything wrong. The landing page is only for new visitors. Once they Like your page, each time they return they will be taken to your Wall (not your landing page). It's more user-friendly to be taken straight to your Wall where your new information is posted than it is to be taken to the same static landing page each time they visit. So, the landing page (fan and non-fan) is for first-time visitors only, giving them a good introduction to your page. I hope that makes sense.
Nice job Amy. I was looking for a simpler approach for iFrames for a class I'm teaching at Louisiana State University. The majority of students will not be "coders" and even using the developers.facebook.com side of FB might be intimidating. I expect I'll show them the apps side of Facebook but demo the Static HTML – iFrame Tab app as the more practical way for them to apply the knowledge right away. I'll be sure to give you a mention in class.
BTW, my wife's name is Amy – she is @ArtseyC on Twitter. I think she'll say you're representing the name well.
Thanks so much Victor. And I just followed your wife.
Amy… great tutorial. Thanks. About to jump in and do it. But I have a question about how to make clickthroughs on the landing page. I want visitors to go my blog after viewing the landing page. Thanks
Darlene, just create a link in HTML just as you would on your blog. Check out this post to see what a link in HTML looks like.
Thanks for the quick reply Amy. My next question is where/when I create that link? I've created a jpg for a fan landing page that I want to have a link to an external blog. I've uploaded the page to Photobucket. I'm about to set up the landing page on FB. But where does the link go? On the jpg, or once I've loaded onto FB?
To make an image clickable, you would replace the anchor text with the img tag as demonstrated on this page.
Sorry Amy. I guess I'm not making myself clear. I created two landing pages (non fan and fan) on Photoshop. On the fan landing page, I've included a URL for a blog I'm hoping will attract readers. But how do I make that URL hot? Should I have done it when I created the page on Photoshop? And if so, I'm not sure how to do that. I've put up the two landing pages on FB, and if you have the chance I'd appreciate you looking at them and let me what I need to do. It's called afterthoughts. I've set the default to welcome, so you should get the nonfan page. Thanks for your continued help.
It's not possible to link within an image unless you image map it. Image mapping is like cutting up your image into parts and so you would isolate the link and make that part of the image linkable. Here's an image mapping tool if you're interested in giving it a shot. Otherwise, you might try making your landing page a combination of images and HTML, making the link to your site linked.
The other option is just to make the entire image clickable.
This is going to sound like stupid question, I'm sure, but when I go to one of my Facebook business pages, and then "edit page" and then click on "apps", nothing shows up. I just have a blank grey box where all the apps should be listed. I checked on other pages that I am an admin of and when I do the same thing, the apps show up like they should. Do you have any idea why on this one FB Biz page, the apps would not show? How am I supposed to go in and edit settings if they aren't listed there? I am so puzzled by all of this.
Looks like others have had this problem. Check out this thread for any fixes. Hope it helps!
Hey Amy! I love your site – I am a new blogger myself and could not do all of this without you! You rock! I am building everything myself from SCRATCH and learning along the way. I have a VERY basic question. I do not know exactly how to get the HTML link correct to my image I've stored on the server. I did everything as you described in your "how to blog" series and have Bluehost setup for my blog. I have saved the image using FTP in the wp_admin folder, that's where I found an image folder to save it. Can you help me? I don't know what to type after the <img src comments. How do I properly point to my image? Thanks!
Your image tag should look something like this:
< img src = " http:// your domain.com/wp-admin/images/name-of-image.jpg " / >
Of course, take out the spaces, replace your domain name with your domain
and I'm assuming the images folder you're referring to in the wp-admin folder is right at the top. I'm also assuming your image is a jpg but if it's something else like a png or gif, just replace the "jpg" with the appropriate extension.
I hope that helps!
Alright, so I'm three minutes into your video and already having an issue. I just looked over the other comments and it looks like I'm the only one experiencing this. I click on "Apps" then scroll down to the bottom of the page, but I don't see a link that says "Browse More Applications" so I'm unable to add the iFrames one. Weird, right?
I am having the same problem. Did you figure it out?
Nope. I kinda stopped trying after awhile, ha!
ok.. i worked on this.. go here http://www.facebook.com/apps/application.php?id=190322544333196
and then click got to app and follow direcitons … i goolged static html iframe apps and this came up.. does it work for you?
thank you for the most helpful video for landing pages! this may have been answered already (i checked), but i am wondering if there is a way to make the landing page a permanent fixture on the fan page instead of just a one-time first view? i have my page set to default already, but wish for my readers to see it every time they visit my page.
Not sure you can make it a permanent page there unless you recreate it an stick it on another tab.
Thank you so much for this! I know it's old, but it helped me put together a landing page for a business I'm helping. I appreciate it!
Way to go!
Ok, it is me again
I got the app done. Got my landing page designed. Got my file uploaded to my server in my public_html folder. Easy Peasy. Problem…how do I reference my file so I can make it work? How do you find/enter the url? I can't seem to make it work and I know it is there ?!?!
You mean how do you reference the image? (The HTML you'll write directly in the app.) Use the image tag img src="URLofIMage" / (of course close in ). Hope that helps!
Ok, that isn't exactly what I was asking, though it helps as well. How do I know the correct URL of the actual image. Meaning, once I save it on my server, how do I know how to reference where I saved it on my server?
It depends on where you saved it. If it's in your root directly it'll be http://yourwebsite.com/imagename.jpg
If it's in another folder, it'll be http://yourwebsite.com/folder/imagename.jpg
Thank you Amy! I was putting spaces in the file name which were throwing me off. Fixed it and found it. And my landing page looks great! Thanks so much!
I have been able to put my Welcome page up using iframes. But I'm having issues with what people view before they like my page. I created an image (blurred it and everything, like you suggested in your "tweak" post) and uploaded it in my file manager at godaddy, then put the html code in the static html box, but it's not working. I've looked at all the spaces, re-typed the ". I'm not sure what to do. I tried both of these (because I uploaded the image in the root and admin images folder):
of course, with the carrots on either end…
img src="http://romanceonadime.com/welcomepage.jpg" /
img src="http://romanceonadime.com/wp-admin/images/welcomepage.jpg" /
Copying and pasting those URLs in my browser doesn't pull an image up, so I'm thinking you have the wrong image location. When you uploaded via your Dashboard, did you go to Media –> Add New and then upload it and grab the "File URL" from the window that pops up? (I ask because usually there's an "uploads" folder in that URL and I'm not seeing one)? That's how I would approach it, by uploading via my Dashboard again.
Thanks!!! It worked. I wasn't uploading the picture to my wordpress.org. I thought I had to go to the file manager on my Go Daddy account. I'm still figuring all this out. I did get it to work, but now I want to edit it again, so it's not up right now.
Thanks!
Ok, I have my "before" and "after" pages created. The "before" liking page invites new visitors to like so that they can receive a coupon. I don't know how to embed the the link to actually bring them to the coupon after they "like". Help?
You can just embed the link in HTML and stick it in your after-liking page.
Amy,
This is an amazing blog. I have been working on it all weekend and I think I got it. I can't tell if it is working though being that I have to have a non fan try it! Also, there were not any options for the static html app on face book so I found it here http://www.facebook.com/apps/application.php?id=190322544333196.. this may help if you didn't already post it above and I missed it. You rock!
I have been wondering why my fb likes have been so stagnant, now I think I know why. Without a landing page anyone can just view my wall posts with no need to "like" the page! Question for you, when I see someone's landing page, then below there's a secondary section perhaps directing visitors to sign up for an RSS or email subscription, (like "enter your email address to subscribe") – how is that done? Is that image mapping like in your previous comment above?
Thank you!
No, you can input HTML directly into this app. So, you can enter anything you want to show up just like you would in a blog post. In fact, what I did was wrote my list in WordPress then grabbed the HTML and pasted into the app. I hope that makes sense!
I did this today in less than an hour! OMG, thanks for making it so easy – I've been tormented by my inability to accomplish this for MONTHS!
Thank you.
Glad it worked for you!
Hello my long time advisor (lol since oct 2011). Quick side note: I am enjoying your traditional versus self publishing series right now.
So I am still a technical wannabe however your amazing posts and nuggets give me shortcuts or allow me to create my own shortcuts. I take what you provide and try getting a result another way.
HOW YOU HELPED ME DO THE FOLLOWING:
1. I followed your instructions in the tutorial about getting the Static HTML: iFrame Tabs app.
2. Then I used WORDPRESS to type up a post that I want to see in the WELCOME page.
(This is because I want something NOW lol (patience not a virtue these days) and I can
create a pretty image (just like yours) later)
3. I switched to HTML in WORDPRESS and grabbed all of the code
(I am such a try-er…thought I would give it a go…It's all code right?)
4. Pasted it into those fan and non fan boxes in facebook.
5. Edited the code for the size of my image like I was a code expert (wannabe)
6. And I have fulfilled the intention of your post…WOOOOHOOOO
https://www.facebook.com/pages/UNTAP/249552201764614?sk=app_190322544333196
7. Do a jig and celebrate another result.
Albeit not as beautifully designed but I will get there. You are uber awesome Amy so I have liked you on facebook haha
I still have lots to do and learn but whenever my head goes all fuzzy from research and writing,
your little nuggets give me something practical to tackle.
Thank you….again…and also for the future
Maureen
Way to go!!
I am having problems with this tutorial. It works in Firefox but not Explorer. I have it linked to Photobucket. What should I do?
Amy I have a facebook fan page but how does this work when wanting to create a landing page? Do I have to start over? I have been trying to link my blog to my facebook but I'm not sure if that is the best way? Do you have a series on this?
Hi Amy,
I love your blog and you've been such a great help to me since I've started blogging! I'm trying to get my blog to automatically post to my Facebook page but everywhere I look I'm running into a dead end. I've read that you can do it under the Apps, Notes section if you edit the Notes but I don't see an edit option. When I looked on the FB help page it says you no longer can import your blog. Please help!?!