How to Create a Facebook Landing Page (HTML / iFrame Edition)

 

How to Create a Facebook Landing Page (HTML / iFrame Edition)

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.