How To Create A Capture Page Using Facebook Pages and iFrame

by | Apr 29, 2011 | Training Center

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.

facebook-UpdateAs 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

facebook - like jonmrozOnce 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 : )

Facebook Pages

by | Oct 1, 2010 | Training Center

Facebook Pages | iFrame

Facebook is now a primary tool for marketing leaders worldwide. As google bans tens of thousands of adwords accounts, literally stripping legitimate advertisers incomes from them over night, facebook is stepping up to the plate. With rumors of facebook releasing their own search engine in the near future, “The Big G” may have finally met their match. Now is the time to get ahead of the game and learn the fundamentals of using this powerful marketing resource properly.

UPDATE: The info below still works and will teach you a good amount on facebook pages yet a simpler way to create pages in Facebook has been developed using iFrame. I recommend watching the video tutorial below to pick up info on coding and design and also the NEW tutorial on the following page to simplify the process:

Facebook Pages Using iFrame

Otherwise,

Presenting – Facebook Pages

A Step By Step Tutorial On How To Properly Set Up A Facebook Page:

Click the expand option (lower right corner) to watch full screen

Notes:

Step 1 – Create an account – facebook.com

Step 2 – Search for “pages” and “create page”

Step 3 – Update your profile

Step 4 – add “static fbml” to your page

Images:

Use photoshop to create and adjust your image. If you don’t have photoshop, here is a similar FREE version – Photo Filtre.

I found that a good size for your image should be 509 pixels wide. The height depends on your headline or ad size. Below is an example of a headline image, that I have used on a facebook page:

jon-mroz-face-book-headline

Once you have created your headine (image), upload it to your wordpress blog. (Media > Add New)

For complete details on how to install a wordpress blog be sure to take my 10 Day Online Business Transformation Bootcamp by opting in at the upper right hand corner of this page.

Not ready for a wordpress blog? You can simply upload your image to Photo Bucket and get the image URL from there.

Use this code when placing your image code into your facebook page:

<img src=”IMAGE URL”>

Example:

<img src=http://jonmroz.com/wp-content/uploads/2010/09/Jon-Mroz-10-Day1.jpg>

If you would like to have an image on your facebook page linked to a website or different page, you can also do this by using the code below:

<a href=”URL” target=”_blank”>
<img src=”IMAGE URL” width=”IMAGE WIDTH IN PIXES” height=”IMAGE HEIGHT IN PIXES” border=”0″ alt=”IMAGE DESCRIPTION” />
</a>

Example:

<a href=”http://jonmroz.com/fb/” target=”_blank”>
<img src=”http://jonmroz.com/wp-content/uploads/2010/09/Get_Instant_Access_Button.png” width=”235″ height=”61″ border=”0″ alt=”Access My Fan Page FREE!” />
</a>

And that would look like this:

Access My Fan Page Free!

Note: To shorten your url’s using your wordpress blog, you can install a plugin called “pretty Link”

That will turn this url: http://www.facebook.com/pages/Jon-Mroz/154298704590247?v=app_4949752878&ref=ts

Into this url: http://jonmroz.com/fb

Once you have completed the editing of your code place it in the appropriate area of your facebook page as seen in the video above.

Video:

Use photoshop to create and adjust an image that people will see before they play your video (presentation is everything : ). If you don’t have photoshop, here is a similar FREE version – Photo Filtre.

I found that a good size for your video image should be 450 pixels wide by 272 pixels high.

Below is an example of a video image that I used on a facebook page:

facebook pages

Once you have created your video image upload it to your wordpress blog (10 Day Bootcamp) by going to Media > Add New. Get the image url and make a note of it by posting it into a text document (Microsoft word / google docs / notepad) to use in the next step.

Next, upload your video to youtube.com or grab a video from youtube.com that you would like to use. To do this, simply go to youtube.com, find the video of your choosing and click on “share”. Get the video url and use the code below:

Example:

Image URL: http://jonmroz.com/wp-content/uploads/2010/09/jon-mroz-play-video.jpg
Youtube Url: http://www.youtube.com/watch?v=Bj2q-CTwl54

Note: Remove watch? from the youtube url.

Your Final Code Should Look Like this:

facebook html

Click The Image Above To Make It Larger

Note: Add the green code above to your url’s

Once you have completed the editing of your code place it in the appropriate area of your facebook page as seen in the video above.

Autoresponder:

Having an autoresponder is essential.It is the definition of automating your business and it is literally responsible for 70% of my income.

The 2 Standards in the industry are:

Aweber and Get Response.

Personally, I use Aweber for it’s tracking capabilities, deliverable rate, and ease of use, but that’s not to say that Get Response is a huge contender. If you haven’t made up your mind on which autoresponder to use, here’s a great unbiased review.

  1. Log into your autoresponder
  2. Update list settings
  3. Create a follow up campaign or get it from your upline
  4. Create a web form
  5. Install html code to facebook page

See the video above for autoresponder implementation.

Once you have completed your autoresponder code, place it in the appropriate area of your facebook page as seen in the video above.

facebook pagesTada! You’re Done!

So, what did you think? Was this tutorial useful?

If so, I need your help in getting the word out. Do me the favor and “Facebook Share” this page by clicking on the “fshare” icon above, retweet it, and spread the knowledge : ).  Be sure to leave a comment below and most importantly, connect with me on Facebook, and “Like” my new Page if this was useful to you!

Connect With Me “Like” My Page?

Connect With Jon Mroz on Facebook Like Jon Mroz's New Page?