Search This Blog

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


On March 11th  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.
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 Bloga>
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.
Facebook Like Button

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.

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

Aweber Script for FacebookMore 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!

0 comments:

Post a Comment