Please click here for the latest tutorials on the new Facebook Timeline Setup.
**Important Update to Facebook Landing Pages**
Please note that all Facebook Pages will be converted to the new “TIMELINE” version of wordpress, which you may have seen on your friends’ personal profiles lately.
No comment on how they look, but there’s nothing we can do. On March 30th, all pages will be switched over.
PLEASE CLICK HERE TO READ THE NEW FACEBOOK TUTORIAL I’VE CREATED for TIMELINE
p.s. it’s up to you, but I wouldn’t proceed with making a landing page on your site (i.e. read any further) because landing pages will be obsolete after the change.
There is yet another Facebook change around the corner, which is forcing me to create yet another Facebook landing page tutorial.
On March 11th (that’s tomorrow!) Facebook will no longer allow users to add new FBML applications to their Facebook page, which means the old way of creating a landing page (using the Static FBML application) will be extinct.
If you have an existing landing page using any FBML type application, don’t worry. Your existing page will not be affected. This change only affects those who do not have a landing page yet and want to create one after March 11th, 2011.
That said, even if you have a landing page setup for Facebook already, I recommend you check out how it’s done in the video below just in case Facebook changes their mind and decides to get rid of FBML all together, and because this new way of creating a landing page allows you to easily add HTML, so you can get pretty slick as far as what you can do and the things you can add onto your landing page.
I’m thinkin’ videos, opt-in forms, maps, and other dynamic things that were much harder to code in FBML before.
This is a good change, and even though this means a little extra work for me, I don’t mind as long as my work helps a few of you.
As a reminder, a landing page is a page that people who visit your Facebook Page will see first, which is important because you can then direct them to click on the ‘like button’ at the top, which isn’t so obvious if you just send people to your wall. Using a landing page can drastically increase your conversions and explode your Facebook fan count.
Below you’ll see a video explaining how to create an HTML / iFrame type landing page. The new application that I recommend, Static HTML iFrame Tab (by Jason Padvorac), allows you to add 2 landing pages: 1 for non-fans, and 1 for fans. Check out the video below to learn more about how you can utilize this application to increase “like” conversion and get the most bang for your buck.
There are other HTML / iFrame type applications available now too, but I like this one in particular because it’s free, easy to use and doesn’t ask for your email or any permissions like some of the other ones do.
(click here to watch How to Create a Facebook Landing Page – HTML / iFrame Edition on YouTube)
Note: Facebook may be slow to load these new applications as they make the change from FBML to HTML. Please be patient when installing this application. Thanks!
As mentioned in the video, I’ll also be including some resources and HTML code that you can use on your own landing pages. I will continually be adding to the list of stuff below as I learn more and as my VA codes things that I can share with you.
Showing an Image
If you don’t know HTML and/or don’t have the resources to hire or find someone to code HTML or you, you can do what I did in the video and just simply create an image file that is the size of the Page (520 px wide and however tall you want it to be) and add your own copy, calls to action or pictures, etc. to that image.
Below is the sample HTML code I used to embed the image into the application:
1 | <img src="http://www.smartpassiveincome.com/images/facebook/demo/non-fans.jpg"> |
Of course, replace the url in the example with the url of where your image is stored.
A Basic Link with Anchor Text
Here a basic code that you can copy that will create a link within your page:
<a href="http://www.smartpassiveincome.com">The Smart Passive Income Blog</a>
Be sure to replace the url between the quotations with your destination, and replace “The Smart Passive Income Blog” with whatever anchor text you want.
The ‘Like’ Button
You may want to add an image of the Like Button that Facebook uses within the graphics of your page. Simply right click on the like button below and “save as” to copy it onto your computer for your use.
Your Facebook Fan & Twitter Follower Counts
Here is a link (thanks to @adalpo_project for the find) to some html that you can use or tweak to show how many Facebook Fans and Twitter followers you have, which updates automatically for you.
Facebook Fan Count and Twitter Follower Count HTML
An Email Opt-in Form
If you’re using a service like Aweber to collect email addresses, you can simply add in the script that it gives you for your web form into the fields of the Static HTML application.
As I recommend in the video, I would reserve any sort of actions you want your user to take other than clicking the LIKE button for your “Fan” landing page – the page people see after they click the ‘Like’ button. Again, the reasoning is that the primary purpose of the “Non-Fan” landing page is to get people to click on that ‘Like’ button. The more options you have the less likely that will happen. Again, it’s sort of like a squeeze page for Facebook.
More to come…
My own Facebook Page isn’t setup yet with the new HTML application, but I’m working with my VA now to code something cool and I’ll be sure to share that and anything else with you as I figure things out.
If you have something else to add, share or request please let me know and I’ll do my best to add it to the above resources.
And lastly, I’d really love it if you share this with your fans or followers today. All it takes is a simple click on the ‘like’ button below. Thanks!
Update: You can install up to 12 instances of this application so you can have more tabs than just the one for your landing page. Here is the link for that information.
|
Like what you read?
If so, please join over 25,000 people who receive exclusive weekly online business and blogging tips, and get a FREE COPY of my eBook, eBooks the Smart Way! Just enter your name and email below:
|
|
No, I'm not a millionaire, but I am living off of passive income made online. I'm here to show 
Enter your name and email below to get Free Instant Access to the most comprehensive guide available on how to Publish, Market, and automate your own killer eBook.
{ 535 comments (Click Here to Leave a Comment Below) }
← Older Comments
I can’t preview my landing page, please help.
Is it possible to add code to the “[Optional] Fans-only content” that sends them directly to the Wall page?
Hey Pat,
everything is working great – wow! Thanks a lot for the great tips. My FB landing Page and the Customisation are looking awesome
Look at Facebook: http://www.facebook.com/pages/NLP-Akad%C3%A9mia/378472885502140
Take care – Peter
Hi & thanks for this walk through. I’ve done everything accordingly (or I think I did).
I only have code under the ‘non fans’ box since this is strictly a welcome landing page. When I go to ‘Preview’, I see my image/landing page.
Once I leave and go to Wall. The “Welcome” tab is still there but if I click it, it just goes to the edit function again.
I’ve asked several other FB users to look at my fan page, but they say there is no landing page and no ‘Welcome’ tab on the menu to the left.
Help.
My FB page
http://www.facebook.com/pages/Homestilo/130197977053404?sk=app_190322544333196
I clicked on the link and I did see a welcome page. Looks good to me (although the arrow could move to the right a little). Well done!
Will have to take your word for it then- thanks again!
To view your landing page and not the edit page, you will need to sign out of FB to view it.
Thank you so much!
Hey, what programme did you use to create your landing image? I dont know how to just adjust a normal image to certain pixel width, plus I want to add text and stuff..
Hey, what programme did you use to create your landing image? I dont know how to just adjust a normal image to certain pixel width, plus I want to add text and stuff..
Question — hopefully the timeline will be going live at the end of the month and that will remedy my issue — BUT — How do I stop the randomization of the FB banner images on my fan page?
what if the image i wanted to use is not on a website..like the one above? I dont have a website yet.
What if the image in within my photo albums in my page? What should I do?
Great step-by-step tutorial. I’m a print designer and only get into web stuff to supplement the branding I’m doing for current customers. This saved the say when one asked me for a landing page! ONE QUESTION: The non-fan landing page works great, but fans still seem to end up on the Wall instead of the fan landing page I created. Not sure what more to do to make it work. Any ideas?
Hi Pat, the link in your Update at the end of your post doesn’t work for me. Great resource though, probably the 3rd or 4th time I’ve used this guide to create a facebook page for various clubs and charity stuff.
Keep up the great work,
Mike.
Hi Pat,
I can’t thank you enough for the fb landing page information! Unfortunately I’m not able to preview my page. I created the slide in power point … to the specifications you mention and then put it on my webpage on i web. The html code that it generated http://web.mac.com/danajohn/Dana_John/fb_landing.html Only shows up as code not the image itself. I can enter that same code in a browser and it goes right to it … Any suggestions would be much appreciated!
Be well,
Dana
I also tried sending the question to the creator of the app but never heard back.
I figured it out … I had not added where the source was coming from!
location.href = “http://web.mac.com/danajohn/Dana_John/fb_landing.html”
Maybe this will help someone else!
Be well,
Dana
I now see you answered this in a previous comment. Apologies, and keep up the great work!
I’ve learn a few just right stuff here. Definitely worth bookmarking for revisiting. I wonder how a lot effort you place to create this type of magnificent informative site.
Please let me know if you’re looking for a writer for your blog. You have some really great posts and I think I would be a good asset. If you ever want to take some of the load off, I’d love to write some material for your blog in exchange for a link back to mine. Please shoot me an email if interested. Kudos!
This was absolutely fantastic. Super easy, and I appreciate the update along the way saying that Facebook had changed how to find the iFrames app so I didn’t have to figure that part out. Awesome video.
Is there any way to create multiple tabs?
Hi, I am trying to add the static html iframe app to my page but when I click on the app the information for it doesn’t show up… help
hey Pat, thank you very much, keep feeding us?
great, thank you.
I cannot seem to get an image linked, I have dropbox but do not see what the url associated with my file is? Where would I see this or is there a site I can post it to? Flickr did not seem to work nor was I able to link my welcome page from my website as a test (www.principalbc.com/welcome)
Thank you for your advise! My FB page is ….
https://www.facebook.com/pages/Shawnorion/159865820798994
great stuff for understanding. good man. just keep it up.
It’s actually a nice and helpful piece of information. I am happy that you shared this useful info with us. Please keep us informed like this. Thank you for sharing.
Thanks for this, Pat! It helped a ton when I made our landing page last night. The only thing I’m having problems with is that although the Welcome app is the default landing, only the non-fans image is showing. People who already liked our page just goes to the wall as their default landing page for some reason
Here’s our page: http://www.facebook.com/Leanliness
Hi Everybody,
I wonder where is facebook taking brand pages now with the new looks of it. I didn´t like it. I´m gonna start moving all my brand pages to the new lay out. For now we all can hold to our perfect, nice built landing pages. But March 30 they say is the dead line. Whether you like it or not, your brand page is gonna have a new lay out. Check http://www.facebook.com/about/pages
Thanks for the information it’s quite usefulll.again thanks…:)
Hi Pat, great info, thanks for sharing!
Just one question: How can I change the landing page? Shall I install a new instance of the application and then delete the old one? I would expect there is an easier way to do that…
Thanks in advance
Not happy with the introduction of the ‘Timeline’ style page, and look forward to any solutions to this, though I suspect that it wont be possible, as this is probably one of the reasons for the update.
You can still add a static HTML page to the new format, but I don’t think there is anyway to select the default landing page as before.
Facebook sure do keep you on your toes!
faceBook fan page is an marketing strategy itself
thank you pat for sharing this info
I just discovered what seems to be a practical method of leveraging the new timeline format to grab the attention of the user… Check it out on Brian Wong’s blog
http://brianwong.com/blog/how-to-create-stylish-presentations-on-facebook-timeline-pages/
I just started a facebook page about 30 minutes ago and I can’t see any way to search for the app you recommend. Whats going on?
Thank you for this perfectly timed insight into Facebook–and it’s coming changes. I was JUST contemplating how and when to create a landing page when I thought I’d check to see if your blog had any information that would help. And, what do you know? It did! Thanks.
how i can add animated photo on wall, in my fan page.
If you have an existing landing page using any FBML type application, don’t worry. Your existing page will not be affected.
Pat!
Got some help from the developers on this. Please share with your readers:
Msg from Tim(co-developer of this app)
Try this — Using the code below, replace http://URL-OF-DESTINATION-TAB/ with your wall url, then copy/paste/save the code in the Fan-Only editor box (the bottom one in the app) in the same tab you use for non-fans. This will redirect new fans to the wall after clicking like:
top.window.location = ‘https://URL-OF-DESINATION-TAB/';
← Older Comments