Facebook | Creating a Capture Page Made Simple
Social media has been the talk of the industry for quite some time now. As Facebook and Google battle for top positioning as the world leader in traffic, it would only makes sense to have a presence on both… right? To make things even better, Facebook makes it super easy to get your own custom “page” online, to promote your business, or offer. Until recently Facebook used an application called FBML, which was at the time Facebooks own twist on HTML. Yeah, it got a little confusing for me to. Well, I am happy to say, there is now a simpler alternative that allows you to get your own autoresponder opt in form, or capture page put together on Facebook… literally, within minutes.
As of March 30th 2012, Facebook’s “Timeline” was launched and the way we create business pages has once again changed. Get the newest and most up to date facebook video here: Facebook Timeline – Creating Capture Pages And Interactive Sites. The video below will help you with iframe and get a better understanding of that application. However, the newer “Timeline” video goes into great detail as to how to put it all together.
How To Create A Facebook Capture Page Using iFrame
Click the expand option (lower right) to watch full screen
Notes:
- To get started, be sure that you are logged into facebook and go to http://www.facebook.com/pages/create
- Select the appropriate box, i.e. “Public Figure” and fill out the short form.
- Upload an image. Recommend width – 195 pixels, depth can be as long as you would like. However, I have seen nicer pages keep it right around 500 pixels. If you want to get real fancy, here is a Free photoshop alternative to help you edit your pictures – Photo Filtre
- Next, do a search for “Static HTML: iFrame Tabs“, select “go to app” and select the page in which you would like to install the app to.
- Go back to your page and click on the “welcome” tab that the iFrame app created to edit.
- Input your text or images and add your Aweber / autoresponder code.
- If you are hoping to create the blur effect, I use a tool called “Snagit”. I Believe there is a free trial version to this as well. Simply take a screenshot of your page and upload it to your host… or to photobucket.com (example) if you don’t have your own hosting account. When you get the address to where your image is located simply use this code – <img src=”Your-Image-URL-Here”/>. Paste that into the Non-Fan section.
- Click “Edit Page” to fill in your basic info and select where you would like your prospects / readers to land when they arrive at your page under “manage permissions”. Your done!
- If you are not the tech type, but still want a fancy, well designed fan page online, this is the best and cheapest solution I found – Double Your Likes
Once you get 30 “Likes” to your page you can also go to http://www.facebook.com/username to customize your facebook url.
A finished page could look something like this – JonMroz.com/FB
iFrame really does make it simple to create your own capture page and build a presence on facebook. Just be sure to add value to your pages and use social media for what it is … connecting with others, and creating relationships. The last thing you want to do is spam everyone with your opportunity and upset your network : )
So, what do think? Will you be using faebook pages and iFrame to market your business? Leave your comments below and “Share” this with your friends on facebook.
I’m looking forward to seeing your page when you have it complete!
Want To Work With Me? Learn How Here
If You Do Not Have A Step By Step Blueprint In Place To Generate You Leads On Demand, Click Here
Did this facebook tutorial help? Be sure to “Like”, “Tweet”, and leave your comments on facebook below : )
Jon, Great stuff. How did you create the graphics and images that you used on the capture page above the video?
Thanks so much Tony.
I use photoshop but have a free version called Photofiltre in the notes for you. Once I created the image, I just upload it to my server (wordpress) and get the url. I then take the url (as described in the notes) and place that image code above the opt in form.
Hey Jon,
Thanks for taking the mystery out of iframe. Nice tutorial. Did you create your page in your wordpress blog as a post and the copy the HTML code from there?
Good Job,
Jan
Hi Jon i have been playing around trying to make my FB page and i was wondering if i could use my opt in page that is already made and some how add it to my fb page and still have all the code work proper
when i copy and paste the source code it makes the page way to wide and the opt in form does not have any function to it
do you know how to fix this?
Hi Jon,
Like all your material, EXCELLENT!!!
Awesome way of explaining and giving good stuff. Enjoyed the video. Thanks.
teddy
Hi Jan, great top hear from you. There really wasn’t much coding involved so I didn’t need to create it in wordpress but that is a great idea.
Hi Kelly, the only way I can think to fix this is to create another web form under your same list name in aweber. You can have multiple web forms all connected to the same list. It sounds like when you created your web form you designed it too wide. Just create another one and design it thinner in the 3 step wizard in aweber (web forms), then add that code to fb. Hope that helps.
Thanks for the video; it was super helpful!
Good stuff but the code for the imaging a little confusing.You really simplify everything for us.This should help my team as facebook is big hidden traffic.
Also go a little bit slow.
Hey Jon,
I just downloaded the app and it looks like they took your advice and the switched the windows, now the first one is for fans and the second one is for non-fans. Am I reading that right? So now we put everything you said to put in the second window in the first?
Jan
Thanks for the feedback Rick. Here is another resource for the image html: http://www.w3schools.com/htmL/html_images.asp
Hope that helps 🙂
Hey Jon,
Just watched your excellent iFrame video. The best part about your site is that I know I can always get quality information whenever I come here. So much to learn here. Thanks a million…again!
By the way, there’s a free graphics program called Gimp that’s has almost all of the features of Photoshop: http://www.gimp.org/downloads/
Take care!
Thanks for the feedback and the recommendation Ted. I have heard of Gimp and heard it was pretty easy to use as well. I’m sure other readers will appreciate that 🙂 Thanks again
Jon, Thanks for this one Buddy! You saved me a ton of time here. You da man!
Glad to hear it 🙂 I saw you on some other facebook fan pages earlier today 🙂
Excellent video Jon.
You can also use the javascript code in Aweber instead of the long HTML. 🙂
It might be of interest.
Excellent!! Thanks so much.
Thanks for the tutorial,this is what i was looking for.
Your post How To Create A Capture Page Using Facebook Pages and iFrame was well done as always Jon. I love a post that has real value. Thanks for your contribution Jon. Take care, Michael