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

Key Takeaways

hey everybody what's up this is Pat Flynn from the smart passive income blog that is me right there you can find me at smartpassiveincome.com thanks for joining me today I just wanted to shoot this quick video for you to show you how to install the static HTML iframes tab application again that's the static static HTML iframes tab now the reason why this is important is because starting March 11th 2011 Facebook is actually getting rid of all fbml type stuff you know another change that they're doing that's fine they're getting rid of more things and changing things they're getting rid of all fbml so if you are trying to create a landing page after March 11th you know you can't go the route that we did before which is use the static fbml uh application now we have to go with this one the static HTML iframes tab uh which is which is pretty cool and actually you know don't worry if you already have a landing page that you made with fbml those aren't going away uh you're not affected at all it just affects those who are trying to create landing pages and do you know uh create other tabs with fbml you can't do that anymore so starting March 11th you have to go this route in order to create new tabs and create a landing page which is what our goal is today so I'm going to show you how to do that right now if you already have a landing page you might consider you know starting over and doing this because uh there's some cool things involved that I'm going to show you so basically I want to show you that and what's what's nice is it's HTML and and you know we more more people know HTML than fbml so you're going to have a easier chance to make your landing page look really nice add things like optin forms videos much easier than before uh which is the good thing now just for the purposes of this example when I show you the landing pages that I create I'm just going to pop a picture up there and I'll show you what those pictures look like now because I don't want to get into the code or script or anything uh like that right now but if you head on over to Smart passive income /fb FB that's terrible uh FB smartpassiveincome.com slfb that'll that'll be the blog post that'll kind of embed this video that will also have links to uh scripts and and HTML and the like button that you can use all there for you smartpassiveincome.com slfb that'll redirect you to this blog post so the these are the two images that uh I'm going to embed you know and actually what's cool is you'll notice that there's two one for fans and one for non-fans now that's awesome because uh you know the landing page typically is for the people who are non-fans um and and our goal with the landing page here is to get them to click the like button to become a fan you know it's basically a squeeze page but now we have the opportunity uh to really easily create one that is for fans as well um so people who become non-fans will be able to see this one there's some cool things you could do I'm sure you could think of things ready I'll go over those things in a second but just so you know the width of these images are 520 pixels uh and and the height could be whatever you want but but it's a fixed width in Facebook of 520 this particular image is 500 tall uh 500 pixels it could be however tall you want but this is just for the purposes of the this example so I've have already uploaded or uh kind of put those images onto a server and uh um they're ready to go so if you don't have your own website where you could upload those pictures you can put them onto places like I've heard of people putting them in places like uh Flicker and and photo bucket or Dropbox or other places like that so if you don't have a website that's what you could do but I recommend if you do have a website obviously putting it on your website and uh in a folder somewhere making sure you you can recall where that is coming from because we're going to need that in a second so the first thing you need to do is obviously create a Facebook page if you haven't you know go ahead and do that you click on the button on the screen right now that'll take you to the video about how to create a a Facebook page now if you already have one this is what you have to do to install the static HTML iframes tab click on edit page here uh from your wall on your page and then click on apps here on the leth hand side this it's the fourth from the bottom and you're going to scroll all the way to the bottom and click on browse more applications right there now we're going to search for this application and to properly search for this make it easier for you just simply type in static HTML not fbml HTML and if frame static HTML iframe and iframe singular not plural you're going to get different results with plural and this is the one we want right here this is done by a guy named Jason padak I'm totally butchering this name I'm sorry Jason pad vorac gosh I'm sorry um and he emailed me he's an SPI reader so uh and he he he told me about this and what it does and it's awesome just in time for this change I'm sure there are other ones out there but this one I've worked uh I I've done tests on it and it's really good so uh the way you can remember this is It's the star so click on that opens up the application and to install this on your page you're going to have to click on add to my page here on the left hand side it's really easy to install so add to my page you're going to select add to page to this particular page that you have as you can see I have multiple pages and then close and then I'm going to head back to my page at facebook.com smartp passiveincome and what's nice about this is you don't have to go into the edit page area in order to edit this application you can simply scroll down and you'll see that that uh app was added here to my kind of Link or tab area here on the leftand side so I'm going to click on that and now I'm going to edit now you're going to see the image is already in there because I've I've gone through this uh process before but these These are the uh this is code and again you can go to uh smartpassiveincome.com FB to get all this code to show an image or to show other things uh again this is HTML now so it's it's it's code that we know or we we can hire someone that knows HTML really easily so this one up here actually it's important to know that this box up here this field up here is for the non fans and this one down here which is optional is for the fans only so as you can see I have code in there to show the image for non-fans up here and fans down here so to kind of save and preview what it's going to look like I'm going to click save and view Tab and what's nice is I can now view my tab as a non-fan and view my tab as a fan so I'm going to view tab as a non-fan show you what that looks like and there you go so so obviously it wouldn't look like this you'd have some type of HTML or or a better looking image something that uh that is is you know not this but so what kind of elements would you want to have on the non-fan uh particular you know landing page again this is the page that people go to that are not fans and you want them to click on that like button again this is pretty much a squeeze page so the first thing you could do is you can add C some copy up here that says something like click the like button above very clear call to action and usually the like button will be just to the right of the name of your uh page so that's the first thing you can do the second thing you do is you can add some basic copy like who you are or what your business is about you know benefits about why they should become uh a fan or click that like button uh maybe you have some type of offer you know uh click the like button to get access to a free ebook or something like that or free 7-Day ecourse um free download uh another thing you want to add or another thing you can add is like a picture you know people connect with faces and and people so this would be a great memorable first impression if your picture was on there uh you don't have to include all these elements to I'm just throwing things off the top of my head uh a video obviously you can put a video in there and again this is HTML will be a lot easier to do than with f fbml um maybe I don't know that you can put all types of things on there make it look really nice again drive people to click that like button up there so now I'm going to show you what it looks like on the fan page or when people become fans what they see on this particular tab so to go back uh you have to click down here click back on the welcome it takes you back to the editing area click save and view Tab and now now I'm going to view tab as a fan so now I'm viewing the fan side of things so this is what people will see when they come to the uh the page and if they click on that non-fan page they click the like button this is what they're going to see now so what would you want to include on this particular page you want to include you can include any number of things just simply like a thank you or you know if you have an offer you know you give them that offer uh make sure you fulfill those offers uh maybe a second video or another video here that says thank you or maybe it has a call to action to go purchase a product or something um another thing you could do is a opt-in form to you know sign up for an email list here to get whatever it is that you're offering uh you know links links to your website more pictures or images maybe your photographers is more in your portfolio here uh links to Twitter you know an RSS feed there any number of things anything you could do in HTML you could do here uh so so that's what I recommend doing that that's pretty cool now one other thing I'd like to to show you before we end is that you can actually go back uh to this application and you can add more tabs so you can you can actually uh have you know more than one of these you can actually have up to three I think and and you can have them do different things and if uh non-fan see them you know it'll say one thing and if a fan sees them it'll it'll be another thing so maybe it's a free free video something or maybe a free webinar or something again just other things that you could do to get people to become fans other things you could do to interact with them now uh before I go I want to make sure that you know how to make this particular welcome tab the landing page because right now we have this this tab but it's not exactly the landing page just yet there's one more step we have to do and so we're going to actually go back to our wall click on edit page here and now we're going to click on manage permissions now this is where we can set the default Landing Tab and we want to uh set it to the welcome now this welcome with the exclamation point I know is the old one the static fbml application the one we just installed which is going to be here at the bottom is right there so now I know that that's my default Landing tab I'm going to save the changes um and there you go go so now every time someone comes to my Facebook page for the first time uh they're going to see that non-fan page and then it's going to have copy to help them click the like button and then they're going to see the fan one and really cool things can happen so I hope that all makes sense again 520 pixels wide you can have a non-fan one and a fan one the name of that application once again static HTML I iframe Tab and that's it so hopefully that helps you guys thank you so much if you want to check out my Facebook page for the first time you can go to facebook.com/ smmart passiveincome or you can actually go to the shortcut which is Pat onf facebook.com check out my landing page see what it looks like um I probably will keep updating it and changing it and trying to optimize it so again go to smartpassiveincome.com FB if you want want to go to the page where this blog post where this video is embedded to get more downloads and and scripts that you can get to place on your site uh I'll continually add to it so if you're watching this you know the day after I posted this I might not have many things on there right now but I will continually add to it to hopefully help you out so thank you guys so much I really appreciate it I would love it if you become a fan that's my call to action right there head on over click the like button I appreciate it and good luck to you and I wish you all the best thanks bye oh one last thing uh I wanted to share with you really quick is if you wanted to change the name from welcome to something else so it shows up differently on your uh on your wall you can go to apps here after you go to the edit page area scroll down to the static fbml iframes Tab and click on edit settings and there you could change the name to whatever you want it to be uh whether it's free webinar I don't know it's up to you but I just want to share that with you I totally forgot to put it in there so thank you guys take care have a good one bye