How To Build A Facebook Landing Page With iFrames

How to build a Facebook landing tab with iFrames - by SocialMouths I know it has been on your mind lately: How do I build a landing tab on Facebook now that FBML is gone?

What are iFrames anyways? Is this now in the hands of super-geek programmers only? Can Francisco from SocialMouths write another one of those spectacular posts like he did with the Facebook FBML Landing Tabs?

Well, that post I mention has 44,405 pageviews in 4 months. It represents 10% of the total pageviews. I guess I better cover iFrames because starting last week, nobody gives a crap about FBML and my superstar post is now obsolete.

But I want to do something massive, a monster post with some 2,500 words where I explain every single step with plenty links and screenshots. Some epic shit. More than a post, I want this to be a guide. Why? Because I loved the comments I got on the last post, people telling me “Hey thanks, I was actually able to do it and my landing page is now live”.

Important: There is a little surprise at the end of the post so make sure you don’t miss it!

I should advise you that the post is full of screenshots and it might take longer than usual for the page to load so have some patience.

You ready? Let’s start by laying down some goals for this post and what is the desired outcome…

Goals For This Post

  • Provide some clarity about the difference between FBML and iFrames (this is written in plain language for normal people, if you’re a programmer you will probably fall to sleep by the next paragraph)
  • Get you setup as a Verified Facebook Developer (Sounds like you’re going to take an intensive certification course but it will actually take 5 minutes)
  • Help you build your first Facebook Landing Tab on iFrames from scratch and without the need of third-party services

Now, another thing I should mention before we start is that there are other ways of doing this and you’ll probably going to start looking at out-of-the-box apps (I’ll talk about that later) just like there were before for FBML but the process I’ll show you here is how to do this from scratch.

What’s The Difference Between FBML And iFrames

One of the things I noticed as March 11 was getting close was that some people were getting a little anxious to understand what was going to happen and if they should hurry to launch their FBML before that. No need to panic, let’s look at the technical differences first:

FBML

FBML was nothing but regular HTML with a few Facebook tags that allowed you to customize tabs. That’s it.

iFrames

They are “frames” or windows inside a web page that allow to bring external elements, in other words, you can have a website inside another website.

You can literally build a website on your own server and then call it through an application and display it inside a Facebook Page.

Some of the common questions I had in the past few days:

  • Why is Facebook doing this? For world domination, soon we won’t need websites, Facebook will eat the entire Internet and we’ll all live in it
  • Is it better? Yes, iFrames opens the doors to do all kinds of things. Playing with it yesterday I dumped my entire blog inside a tab…
  • Is it harder for a non-geek normal human being to build stuff? Hmmm, sure. A couple of extra steps and little more patience. It’s not impossible and as a matter of fact, that’s what we’ll try to do here, right?
  • What happens with my current landing page since it was built over FBML? Facebook has stated that will continue to support those tabs but they also advice to move them to iFrames.

How To Become A “Verified Facebook Developer”

First of all, let me say that becoming a Facebook Developer is almost as easy as becoming a Real Estate Agent in Los Angeles. If you’ve never been here and didn’t get the joke, even my grandma is an agent here… So don’t worry!

Step 1: Get to the starting point

We need to go to the Facebook Developer website

Facebook Developers Home

Step 2: Verify your account

Click on the “Set Up New App” button located at the top right. Most likely you have never created an app on Facebook so you’ll be redirected to this page on the following image.

Verify your account

You have 2 options to verify your account, the first one is to provide your mobile number so Facebook can send you a text with a code that you need to send back, I think Google does something similar. The second option is to enter your credit card information, this can probably be a better solution if you’re outside of the US (we recently tried the first option from Chile and it didn’t work).

Confirm your phone

That’s it, once you go through this process, you are verified and can start messing up with apps and other stuff like integrating Facebook Comments wherever you want. Cool, huh?

Design Your Page

We’re leaving Facebook for a little while to design and prepare whatever content we’ll want to display on our landing tab. To keep the tutorial at a basic level, we’ll work with a simple image turned into an image map with links as we did on the FBML Landing Tabs post BUT, then we’ll kick it up a notch by adding a second page with an email opt-in box.

The images and stuff I’m creating here are just for this example so I’m not worried about using real copy or anything like that.

Step 1: Create your image

I created this image on Photoshop but you can also use other image editors. Something like Picnik should be sufficient.

Important: The width for a Facebook App is 760px but in this case we want to dump this baby inside a tab so your max is 520px. I have to say that the first image I created was 520px and I still had problems with scrollbars displaying on the page so I made a little bit smaller than 520px (just sayin’).

Landing Tab Design

2. Host your image

We need to host our image on the Internet, this can be done by uploading it to your “Media Library” if you run a WordPress blog or by uploading to your server via FTP access. Once we’ve done that we just need to grab the URL for that puppy and take it wherever we want. It’s a good idea to just test the URL on your browser to make sure the image displays correctly.

3. Turn it into an image map

As you can see in the image above, I added a text on the right that reads “Link to Opt-In” which I plan to make a link, that will allow me to navigate to the second page.

This can be coded but the point is that we’re not programmers, so we’ll use a free image map tool online. I recommend Image-Map (it’s not perfect but it gets the job done… most of the time). Don’t forget your URL!

This process is explained on this post so I won’t go over it again or this post is going to turn into a book. I’ll just say that basically what we’re doing with Image-Map is adding links inside the image and the tool will generate the HTML code for us. Check out the following image to get an idea:

Adding links to your image

Now you have an image containing some link, we’ll use this as landing tab. Take the code Image-Map generated for you.

We’ll have to remember this later on, that link I created into the image will point to an additional page. We’ll come back to that.

Get Your Code Ready

Step 1: Open on a text editor

We take the code with us to open on a Text Editor in your computer, I use TextMate but a simple editor will do. This is what the code looks like:

Image Map code

Step 2: Fix your code

But wait a second, I can already see that my code is missing some basic HTML elements. We’ll have to add it manually. What we’re missing are the tags to open and close the code, it won’t work without them.

Add the <html> and <body> at the top of your code and then </body> and </html> at the bottom. Use the following image for reference:

Fix your image map code

3. Save as HTML

We need to save our file as HTML and name it “index.html”. The reason we’re doing this is because when we go back to Facebook, we will be asked to provide the URL for the directory on your server, NOT the URL for the file. By naming the file “index.html”, Facebook will be able to grab the directory and display this file as if it was the homepage of a website.

Save your code

4. Upload

Important (and a little tricky). Now we need to upload the file to your server, remember that you are hosting this puppy. As I said before, we’ll give Facebook the route for the directory so we need to create it first. Access your server via FTP and create a new folder, it’s up to you where you want to create it. Most FTP Clients look about the same.

Create a directory on your server

Name it whatever you want.

Now we need to upload our index.html file inside that folder. Leave it there, go to your browser and test that your file is displaying correctly. I named my directory “iframe” so my URL will look like this: http://socialmouths.com/iframe/index.html

Test your URL on a browser

Phew! It works baby.

I think that was the hardest part because not everybody is familiar with FTP or messing with their servers but it’s all good. Just don’t mess with the folders that are already there.

Now we’re ready to back to Facebook.

Configure Your Facebook App

We left Facebook after verifying your account, now we need to go back and actually configure our first application. This is the exciting part!

1. Name your App

After you verify your account you are prompted with this page where you are asked to name your app and of course, agree to the terms. Click “Create App” when you’re done.

Name your Facebook App

2. Configure your App

Now you land on the “About” section of the setup. Really there’s not much to do here unless you want to add a Favicon, logo or a description if you want (they’re optional).

About section

From the left menu, move on to the “Web Site” section. In this section we’ll add the URL. But wait! remember that Facebook only wants the directory route and NOT the URL of your file. See how I have highlighted the part that says “index.html” in the following image? We need to delete that part or we’ll get an validation error. It need to look like this: http://socialmouths.com/iframe/. As I said before, since we named our file “index.html” and we placed it inside the directory, it will automatically be called as a homepage.

Add your URL

That’s it for this section, don’t save yet, first let’s move on to the next section on the left menu: “Facebook Integration”.

Facebook Integration

In this section we’ll do the following:

  • Name our App under “Canvas Page”. This will be our Application URL (kind of important)
  • Copy our directory route under “Canvas URL”. Remember to eliminate the “index.html” at the end
  • “Canvas Type” will be “iFrame” of course
  • And under “iFrame Size” select “Auto-resize”. We don’t want any scrollbars displaying

Now scroll down on the same section and we will find the “Page Tabs” configuration. We’ll do two things here:

  • Name the Tab. This name is the one that will be displayed on your page so name it something like “Welcome”. I just named it “iframetest11″ since this is just a test
  • For “Page Tab Type” you will again select “iFrame”
  • And under “Tab URL” type “index.html”. That’s the name of your actual HTML file. You remember that, right?

Page Tabs configuration

Now we’re ready to hit the “Save Changes” button. As soon as we do, we’ll be taken to this intimidating page with lots of information including our App ID, API Key, App Secret, etc. Don’t worry, nothing to do here.

Also important, from here you have access to your App’s “Insights” right there on the right menu.

Facebook My Apps Dashboard

Install Your Facebook Application

As you can see we have created an actual application here, this is the way iFrame tabs are integrated in your Facebook Page. Now, as any other application, we need to install it on our page.

Step 1: Go to your App’s Profile Page

On that same menu on the right, click on “Application Profile Page”. Applications also have profile pages just like your personal profile or your page with Walls and everything else.

Facebook Application Profile Page

2. Install the app on your Facebook Page

To install the app on your page we need to click on “Add to My Page”, you can see the menu at the bottom left of the image above. We are prompted with a window that lists all your pages (if you have more than one), select the Page where you install the App.

Install the App on your Facebook Page

Our application has been installed on our Facebook Page as a Tab and we should be able to see it in the Tabs Menu (located on the left, remember?). You can see that mine already shows in the next image (it’s called “iframetest11″). Now it’s time to click on it and see if all this mumbo jumbo worked. Go ahead, click!

SocialMouths Facebook Page

3. Look at your tab

Your new Landing Tab should now be displayed inside the Tab. Here is the result of my test.

SocialMouths Landing Tab

That’s it, we’re done! No? you want more?

Already then. Let’s look at what happens with that link I created and see if we can navigate inside the tab. Let’s go back for a little…

How To Add An Additional Page

I promised to kick it up a notch this time and add an additional page, in this case I’ll add my Email Opt-In. Really you can do whatever you want inside this pages but you probably already figured that out on your own.

These links we added to the image map are actually going to let the user navigate inside the same tab, that’s why I said before, using iFrames is like bringing a website inside your Facebook Page.

I’m not going to get into how to set up your email opt-in form with your provider. First because everybody uses different services from Aweber to Constant Contact and many more, I use MailChimp. And second because this is material for a whole different post.

I have already setup my opt-in form and I also added a nice image to go with it and some text. The point here is how we integrate it into our tab.

Remember that link I created on the image map to point to an additional page? now it’s when we’re going to use it.

1. Get your Opt-In From code

Get the code snippet your service provides for your blog or website. Once you have the HTML code, copy it into a text editor like we did with the other one and save it as .html. The important thing here is that the URL we want to get is the same URL we’re using in the link we have on the image map because this is the file we are going to call with that link.

2. Host your html file

Now we need to upload this new file to our server via FTP. Save it in the same directory if you want. Same procedure as before.

3. Test your URL

Once we have uploaded our new html file to our server, test the URL to make sure it’s displaying correctly. Here is my file tested on a browser, everything seems to be working fine.

Opt-In html file on a browser

So what happens now? If you thought that the additional page should already be working on the tab, you my friend are correct. Get it? this is like building a website inside your tab. You can have several links and let the user navigate different pages without leaving the freakin’ tab!

So head over to your Facebook Landing Tab and click on that link. Here is mine…

Additional page inside the Facebook page

What’s The Potential

Like I said, We can build whatever we want through iFrames. What you need to do is start thinking about websites, you can very easily design a tiny 3 or 4 page minisite with a built-in navigation. We can also bring in all kinds of elements.

As an example, let me share with you what we are doing with the Flor De Caña Page (our client over at Plural and Partners). It’s pretty much a website inside the tab, one of the cool elements we added was a “Store Locator” using the Google Maps API (image below). This is work in progress but it is live if you care to check it out.

Flor De Caña Facebook Page

As a matter of fact, I included a link at the bottom of my image that I didn’t tell you about. This link points to my blog (http://www.socialmouths.com) and I did it to see if I could bring my entire blog inside a tab. Here is the result:

SocialMouths inside a Facebook Tab

A couple of things to point out here:

  • The blog is completely functional inside the tab and you can navigate it just as if you were at SocialMouths
  • You can actually Retweet and the Twitter window pops out from inside the tab (So cool…)
  • Obviously the width was not a concern for me at this stage so you can see how it doesn’t fit inside the 520px tab

And, I’m planning to write a post on how to bring your blog inside Facebook in a few days (when I recover from this one of course).

Are There Any Out-Of-The-Box Solutions?

Sure, there are all kinds of pre-built apps that let you dump an image or a piece of HTML code inside without becoming a Facebook Developer or building everything from scratch. What we call a user-friendly approach.

Do I recommend these apps? Hmm… The main reason I tend to do this without the help of out-of-the-box solutions is that you end up adapting to their limitations and you stop thinking about creating something unique and based on your particular goals. In this battle for attention of today, you need to stand out, build amazing stuff that convert first-time visitors into raving fans.

But I have nothing against them, in fact, I’ll write part 2 of this guide in a few days to write about one or two of these apps that I think could be good alternatives for you. Even though this is my way, I’ll do that to be fair and for the benefit of my readers. =)

I Promised To Have A Surprise…

Win a Copy of Enchantment by Guy Kawasaki To make this a little bit more exciting, I’m gonna give away one copy of Guy Kawasaki‘s new book “Enchantment“, which I have been reading for a couple of days and can guarantee you it is off-the-heezy. To be fair and give everybody the opportunity, you’ll be able to participate on Facebook or on Twitter.

On Facebook

  • Go to the SocialMouths Facebook Page and “Like It” (molto importante)
  • Share this post on your wall by using the link: http://bit.ly/iFrameTabs
  • When you share the link add this comment How to Build a Facebook Landing Page with Frames | @SocialMouthsIf you “liked” me first, that “@” in front of “SocialMouths” will automatically tag me and make your post show up on my wall too, that’s how I’ll see you. If you don’t use the “@socialmouths” in your share you will be invisible to me ; )

On Twitter

  • Tweet this exactly as it reads here: How to Build a Facebook Landing Page with Frames | @SocialMouths http://bit.ly/FBiFrames #FBiFrames
  • Don’t change the Bit.ly URL
  • Don’t forget to use the Hashtag at the end #FBiFrames or I will not be able to see your tweet

Dates: It starts NOW and ends on Tuesday March 29th 12am PST

Announcement: I’ll take everybody that participated on Facebook and Twitter and randomly pick a winner. I’ll announce the winner HERE on this same post on Wednesday March 30th.

Update: I had to postpone the announcement date, the winner will be announced here on Monday April 4. Don’t miss it!

Good Luck!

And The Winner Is…

Congratulations to Evan Austin [@graphicsbyevan]. And thanks to everybody that participated and help promote this post. You guys ROCK!

Final Thought

At the end, this post contains 3,311 words and 27 images. I hope you like it =)

Since this is kind of a special post for me, I’ll ask you to write a comment to tell me if the post was helpful, if you were able to build your Facebook Landing Page or if you encountered any problems. Was it too hard? Let me know where you got stuck. I’ll try to help as much as possible.

Also, feel free to share what you did with your landing tab by adding your Facebook Page address to your comment.

If you need help designing or building this you can also consider hiring me to do it, just drop me line via email. Most of my clients are entrepreneurs and small businesses.

Happy iFraming and I’ll see you in a few days for Part 2!

Related Posts Plugin for WordPress, Blogger...

10 Mistakes People Make on Facebook Pages and How to Fix Them

Join 10,000+ subscribers and get FREE access to my online course...

  • http://makeyourblog.net Eric Perrine

    Cool Post! I def need to implement this on my page!

  • http://spreadthechatter.com Annie

    This is great – thanks for the step by step explanation!!! Very Very helpful for sure.

    Do you think Flash would work within this seamlessly?

  • Kerry

    this is cool and useful and all, but FBML is far from gone, its up and running on my page as we speak! not sure why your saying its no longer in existence?

  • http://www.johnpaulaguiar.com John Paul

    Man you you killed it on this post.. perfect walk thru.. that I needed, so very timely.

  • Anonymous

    You are beyond awesome. I can see why you’re so successful at it – showing how by actually doing, and sharing the knowledge.

    Keep rocking, man! (Oh, and we’ll be building our iFrame page in a matter of minutes, thanks to you.)

    Cheers!

  • http://twitter.com/jhatchdj jhatchdj

    All I can say is…MORE AWESOMENESS! This is a great straightforward explanation and step by step that I can direct all those “How’d you do that?” questions to! You just saved me HOURS of frustrating email and phone calls with lost souls! Thanks

  • http://www.facebook.com/timothymensing Timothy Mensing

    We released an app a few weeks ago that sets up & hosts pages in one step (like the fbml app), with plans of open sourcing the code so anyone can set everything up quicker & maintain full autonomy.

    Given the whole open sourcing, we’re keeping it white label & free – http://on.fb.me/fgMjh6

    We’ve gotten really great & motivating feedback so far, check it out if you think it’ll help!
    Great article btw! :)

  • http://www.waynejohn.com/ Wayne John

    You know, I forget where I found a walk-through for the FBML version, but soon after I tried that, Facebook made their announcement. Pissed me off, lol. So I’ve been patiently waiting for something like this so I don’t have to do all the homework myself.

    Looks awesome, I’ll be giving this page a good going over as soon as I have time. Thanks!!!

  • Anonymous

    An immensely helpful article. Thank you.

  • http://www.modernpigeon.com Gregory Shumchenia

    Holy crap dude! You wanted epic? I’m pretty sure you got it. This is absolutely THE MOST comprehensive post I’ve seen on how to add iFrames to your Facebook page — or on nearly anything for that matter. It’s especially awesome because it involves virtually NO coding (eww).

    This must have taken quite some time to put together so I thank you for invested that time for everyone here to benefit. I’ll check back in and let you know how my landing page adventure goes.

    Thanks again!

  • http://www.flameandwell.com Phoenix Flame & Brigit’s Well

    Very helpful post. It’s great to have everything in one location like this. The ‘What’s The Potential’ section was particularly useful in sparking some ideas! Thanks! -Jayson Rivest

  • http://www.marketing-social-media.com/ Social Media Sean

    Bamm! Nice Post Bro! I’m defiantly going to try some of the moves you have laid out. Over the last couple of weeks I have been looking at sourcing this work as it feels just a little out of my reach when we get to the coding. I am a fan of some of the advanced functionality available through the iframes app. It appears that Facebook has made this move in part so that people can basically view your site without having to leave the Facebook environment. Thanks for the tips. Your blog just keeps getting better and better.
    #KeepOnRokinTheFreeWorld

  • http://professorprosperity.com/category/famous-quotes/ prosperity

    This is a great straightforward explanation and step by step that I can direct all those “How’d you do that?” questions to! You just saved me HOURS of frustrating email and phone calls with lost souls! Thanks

  • Anonymous

    Simply put, this kicks ass. Good job on the post.

  • Irena

    Finally one great and simple post about iframe. Thank you :-)

  • http://www.uncorporateblogging.com Tia Peterson

    How many times can we tweet? And will it count twice if we update Facebook from our profile & a page or two?

    Cheers,
    Tia

  • http://www.socialmouths.com Francisco Rosales

    Good question, every tweet and share will count Tia.

    Thank you! =)

  • http://www.socialmouths.com Francisco Rosales

    Thank you Irena, that was the goal.

  • http://www.socialmouths.com Francisco Rosales

    Send them all! Thanks for stopping by.

  • http://www.socialmouths.com Francisco Rosales

    Thank you Sean, and you know I’m here for you in case you need help.

  • http://www.socialmouths.com Francisco Rosales

    Please do Gregory, I’d love to see what you come up with.

  • http://www.socialmouths.com Francisco Rosales

    Thank you Wayne, your sharing is definitely appreciated since I want to put this piece in front of as many people as possible.

    BTW, if you built something on FBML, Facebook will still support it for a while. The only change on March 11 was that you can’t build anything on it anymore.

  • http://www.socialmouths.com Francisco Rosales

    Yes Timothy, I’m aware of “Static HTML: iframe tabs” and, as a matter of fact, I included it on Part 2. I’ll let you know as soon as I publish it.

    Thanks for stopping by!

  • http://www.socialmouths.com Francisco Rosales

    Happy to hear that John!

  • http://www.socialmouths.com Francisco Rosales

    Kerry, you are absolutely right. As I stated almost at the beginning of the post, Facebook has said that it will continue to support whatever was built over FBML for a while. The only change that took effect on March 11 is that you can no longer build anything with the FBML App. In fact, the landing tab I have on the SocialMouths page is also FBML.

    Your tab is safe and it’s not going anywhere, at least for a while.

    Thanks for your comment. =)

  • http://www.socialmouths.com Francisco Rosales

    Hey Annie, as far as I know you can use Flash and HTML5.

    Great question, thank you!

  • Cs94wahoo

    OMG! Exactly what I’ve been looking for! I am soooooo not a programmer, so this helps a lot. can’t wait to try it out! thanks.

  • Wayne John

    Facebook is a new nut for me to crack still. I still have a lot to learn and comprehend with the way Facebook does things compared to how my brain is wired. Once I get that ah-ha though, I’m good. :) So I’m sure this will do it for me. I’ll let you know what happens!

    Cheers!

  • http://briantomlinson.net Brian Tomlinson

    Francisco this totally Rocks!! You put some heart and soul in this one my friend. Definitely awesome content.

  • kate

    you have inspired me to give this a shot… i have been avoiding :) great tutorial! thanks!

  • http://twitter.com/LadyBizBiz LadyBizBiz

    I started looking at this issue over a month ago when I first realised the FBML was to cease, and I did find something like similar to this post via YouTube, which was supposed to get you up and running as a FB Developer and take you through the stages of designing your first Tab.

    Well, it failed to get me to the finish post, it wasn’t anywhere near as detailed as your guidelines here.

    Congratulations, you could teach school kids any time you want to! You have understood how vital it is to take small steps to help the learner absorb the content. I’m very impressed, you even provide details of where to go to get the peripherals, you are indeed a great master.

    So, today it seems there’s an iframes issue hitting our Facebook Tabs, (something or other to do with https) but as soon as this glitch is over I am heading to my Tabs, removing the pre-built iframe stuff I’ve been using in the interim, and following your tutorial I am going to write my very own, and this time I think I’ll succeed!

    Thanks for taking so much care and time to write this blog …. so many people will benefit. You are a true communitarian.

    Regards Rhianne

  • http://tsukiyomi.ca Tanith Perry-Mills

    Can you still make fan-only tabs? Or is that functionality gone with iFrames?

  • http://www.facebook.com/timothymensing Timothy Mensing

    Right on, I just reread your post to bookmark the picnik & image-maps.com tools, very cool.

    ¡Tú eres el hombre!

  • http://twitter.com/BragInteractive Brad

    Francisco,

    Awesome post! At the end you talked about out-of-the-box solutions and I wanted to mention a little project we have been working on.

    Since you can embed a whole site in an iFrame on Facebook, we thought it would be cool to make a WordPress theme that fits perfectly in the iFrame, but still had all the features and functionality of WordPress.

    If you or your readers are interested you can check it out here. http://braginteractive.com/wordpress-to-facebook-iframe/

    Again, thanks for the great post.

  • Adrienne

    Wow Fancisco, what a killer post! Even someone like myself who isn’t that tech savvy can do this one. Thank you SO much for this. You rock!

    Adrienne

  • http://pedrodasilva.co.uk Pedro Da Silva

    If I had to write up a tutorial on how to build a Facebook landing page with iFrames, this is how I would want it to turn out! Very detailed, easy to follow and implement on your Facebook Page.

    Thank you and well done!

  • Anonymous

    Thanks!! really love it! even thought that I am not sure if I can work it out, it´s awesome to find someone that works so hard for the readers… gracias, he encontrado este post justo cuando pensaba darme por vencida. Mi cliente me ha pedido que le customize una página y yo (soy periodista) creí que era mucho más sencillo.. ufff gracias por salvarme el pellejo. Desde el País Vasco (españa), un abrazo!

  • http://sjbn.co/ Saket Jajodia

    wow..! awesome tut, will try to make one..

  • http://www.socialmouths.com Francisco Rosales

    Thank you Pedro, I was a little concerned with the amount of screenshots because of loading times but I think it was necessary to provide that kind of detail.

    I’m glad you liked it!

  • http://www.socialmouths.com Francisco Rosales

    Gracias Gloria, pues ya sabes que estoy aqui para cualquier ayuda que necesites.

    Abrazos hasta España!

  • http://www.socialmouths.com Francisco Rosales

    Thank you Brad, I’m already checking it out. I downloaded the files, I just have one question, why do you say it’s a WordPress theme?

    Maybe still on time to make a mention on Part 2…

  • http://www.socialmouths.com Francisco Rosales

    Thanks for the kind words and for the RT’s Adrienne, I was very excited about this post and the challenge to make easy for everybody.

    Glad you liked it.

  • http://www.socialmouths.com Francisco Rosales

    Let us know how it goes. Thank you.

  • http://twitter.com/RickGehlhaus RickGehlhaus

    Nice post. Thanks for the info. Any idea on how to “hide” something until the user “Likes” the page?

  • Ahugessen

    Fantastic…. Thanks!
    One small question.
    What step do you take to make it the landing page?
    I see the image I created when I hit the application but somebody landing on my page still see’s the same old?

  • http://www.facebook.com/CandlesOffMain Sue at CandlesOffMain

    First, you totally rock. Thank you so much for offering all of this info. I’m overwhelmed, but I’ll get through. Once I get settled, I’d love to get fancy. How do I make my welcome page change based on whether or not the viewer has ‘liked’ my page. For example, some pages have an image “click the like button and a crazy awesome offer magically appears”. Then you click Like, and the offer is displayed. Where can I find the code for that level of trickery?? Thanks so much for all your help. I’ve been following you for a while and you are by far the easiest and most informative social blogger to follow. Rock on!

  • Sarah

    I completely agree. Fantastic post. Thank you for taking the time to explain it so well. One small question… i have the tab in facebook but it comes up with this error. Which step did I do incorrectly?

    Method Not Allowed
    The requested method POST is not allowed for the URL /iframe/index.html.
    Apache/1.3.41 Server at aqualash.com Port 80

  • http://twitter.com/socialfootprnts Carmen W

    Wow! I really appreciate your in-depth posts like this and the time it takes to create such a detailed post.

    I was able to build two pages after your last FB page post. So, I can’t wait to play around with iframes. You make it seem so easy [when it's really not :-)]

    Thanks a lot, Francisco.

  • http://www.socialmouths.com Francisco Rosales

    Hey Carmen, thanks a lot and please do come back to share what you created.

  • http://www.socialmouths.com Francisco Rosales

    Sarah, exactly where are you getting this message?

  • http://www.socialmouths.com Francisco Rosales

    Sue, great question. The easiest way is to do it through an application that I’m reviewing this week on Part 2 of this post. Stay tuned…

    Thanks for your comment!

  • http://www.socialmouths.com Francisco Rosales

    Please visit this post: http://socialmouths.com/blog/2010/10/27/build-your-facebook-landing-page/

    Which is the first post, it explains how to set up as default for new visitors.

  • http://www.socialmouths.com Francisco Rosales

    Yes Rick, I cover that point on Part 2 which goes live on Wed.

  • http://www.socialmouths.com Francisco Rosales

    Come back and share it with us!

  • Ahugessen

    Thanks but…
    I have set up one with iframes, one with FBML
    I have changed the permissions on both and both still open the wall. (I even tried changing the default in permissions to info or photos but still defaults to wall?)
    I noticed many people having the same issue with the FBML

    I can’t thank you enough for this. It looks great! But I am extremely frustrated because the impact is lost if people have to search for my welcome tab

  • Ahugessen

    OK, learned a little more from FB help menu:

    “The default landing tab can only be adjusted for people that are not following your Page. Once they follow your Page, they will see the Page’s wall as the default.”

    So people who already “like” me will see the wall and new visitors will see my cool welcome page. Do I understand that correctly?

    Not ideal but can’t complain too hard about facebook as it’s free.

    Sorry if you explained this already and thanks again for your tutorial…. it was one of the easiest I have ever come across!

  • http://www.socialmouths.com Francisco Rosales

    I will publishing a new post on Wed where I review a couple of Fb Apps that allow you to have one landing tab version for Non-Likes and one for Likes.

    Stay tuned!

  • http://www.socialmouths.com Francisco Rosales

    I will publishing a new post on Wed where I review a couple of Fb Apps that allow you to have one landing tab version for Non-Likes and one for Likes.

    Stay tuned!

  • http://www.getinthehotspot.com/ Annabel, Get In The Hot Spot

    I have been thinking about FB lately but haven’t gone this deep! Thanks for sharing your tips, Francisco, I really appreciate it. But sometimes I just think FB is all too complicated – maybe that’s why I love Twitter more:) Tweet you later!

  • http://benjaminlang.com Ben Lang

    Awesome tutorial. Entered the contest :)

  • Jamie Levy

    I not much of a techie. Found this very helpful. I just started following your instructions…being very optimistic about the outcome. However, got to developer Setup New App and immediately got stuck.

    Didn’t get the page you show, but got this instead: Your account must be verified before you can take this action. Please verify your account by adding your mobile phone or credit card.

    Where the heck to I put this? Or is facebook just being squirrely this morning.
    Jamie

  • Jamie Levy

    Just read through your article and thought it was great. Just starting to go through the steps and was very optimistic about the outcome. However, got to Setup New App and got HTML code instead of what you show. I cut and pasted the code trying to show it to you be the system converts the code.
    Trust me the following is all code not what you showed….now what?

    Your account must be verified before you can take this action. Please verify your account by adding your mobile phone or credit card.

  • http://twitter.com/DanielMcCarter Daniel McCarter

    Great article. I can’t seem to get Image-Maps to upload. Can you recommend something else to create links? Thanks!

  • mdf

    I’m starting to rebuild my website and want to integrate some of it into facebook, so this post is great timing. One big question though…

    In the tutorial, you show the “opt in” feature on your image, but when I go to your fan page, it’s not there and when I click on the image, it takes me out of fb and to your site. Is that the intention? I thought the idea was to click on the image and have content appear in the tab (i.e., I stay on fb)? What am I missing?

    Great post tho. Thanks.

  • http://twitter.com/hans_gelok Hans Gelok

    Hi Fransisco, really like you post, it’s well written and superb that you wanted to share this with us!

    I almost succeeded in making my own ‘app’ now, but when testing it I get this annoying ‘HTTPS – Callback URL’ error…anyone else?

  • http://www.socialmouths.com Francisco Rosales

    Hey Annabel, I’m with you 100% in regards to Twitter. I love the simplicity and the speed!

    However, let me share this with you. A couple of months ago I decided to spend a little more time on my Facebook Page, connecting and interacting with people as I do on Twitter. Granted, Fb doesn’t have that real-time twist that Twitter has and allows you to communicate almost at “chat” speed, but still…

    The result is that by stopping by a couple of times a day to follow up on conversations and posting a couple of interesting posts, not only my “Liking” growing rate has pretty much doubled and my traffic from Fb is now much higher than what I get from Twitter but I have also been meeting awesome people there too.

    That said, I have to admit I still spend most of my time on Twitter =)

  • Schaeffer Danielle74

    This makes things so much easier. I totally agree about the limitations of other apps! I’ve been seeing tons of offers for iframe templates, but didn’t have any clue what I would even do with them. This helps me think outside the box. Thanks

  • http://www.socialmouths.com Francisco Rosales

    Is your URL “http” or “https”?

  • http://www.socialmouths.com Francisco Rosales

    You’re right, the welcome tab on my Fb Page is still FBML and the reason is that I’m currently building the new one on iFrames but I’ve been so busy building other people’s projects that mine has been taking the backseat…

    What service are you using for your email marketing? I would create a separate list and build forms for “Email Confirmation” and “Thank You” pages so they display exclusively on Fb, this is pretty much building a minisite inside the tab.

    iFrames will open all those pages inside the tab without having your visitor leave Fb.

  • http://www.socialmouths.com Francisco Rosales

    Daniel, I really haven’t tried anything else to recommend but I know there are others. Like I said in the post, Image-Maps sometimes does these things and what I’ve done is just give it some time and try again.

  • http://www.socialmouths.com Francisco Rosales

    Thank you Ben and good luck!

  • http://www.socialmouths.com Francisco Rosales

    Exactly my point, sometimes we have a goal and end up settling for what they offer. I’m reviewing a couple of apps in Part 2 but I’m still building my own from scratch.

    Thanks for your comment!

  • http://twitter.com/hans_gelok Hans Gelok
  • Linda Nelson

    Amazing post. Just what I was looking for. Thank you so much for sharing your knowledge.

  • Jlazarus17

    Great tutorial. I’ve been building iframe apps for my clients for a while now – until this past month, I did this using the old methodology of requiring a click through image first. I’ve now converted all my clients apps to this….one BIG problem though – SSL!!

    Now that facebook allows users to connect via SSL, one has to ensure their iframe app has an SSL certificate in order for people accessing via SSL to SEE it – otherwise they see a blank page. Woah….that’s a big deal. The only affordable hosting package offered by my provider that allows SSL (other than through their “eshop” offerings) is via their virtual server package. The package isn’t isn’t super expensive ($30 a month) but it still quite higher than what I’m currently paying for a regular hosted package. Money isn’t even this biggest problem with that – the biggest problem, for me anyway, is moving from a regular hosting package to a virtual server: I have NO expertise in managing my own server ;-) This kind of bites!!!

  • mdf

    Ah, I see. I’m going to give it a shot. I’m not currently doing email marketing–I’m a small potatoes author type, but am looking at new ways of doing old things.

    Right now, I’m trying to develop ideas that will generate fb return traffic (e.g. new content) that will also encourage wall discussion/commenting.

  • http://socialbutterflysolutions.com Teresa

    Excellent instructions!

    Using Fireworks to create the mapped image saved me a few steps and created an html file that was ready to go.

    On the other hand, I received an error for including upper case letters in my URL. Keep it lower case, everybody!

    Thank you for taking the time to write this up, it has made the task so simple! I tried using a WordPress plugin, and it’s actually a lot more complicated than it needs to be!

    Hugs and butterflies,
    ~Teresa~

  • http://profiles.google.com/clayfranklinemail Clay Franklin

    I really appreciate your write ups on Facebook Pages and using iframes. I will post here later once I get one put up.

  • http://twitter.com/hans_gelok Hans Gelok

    Hi Francisco,

    When I go to the application, it tells me
    “Please Update Your Callback URL. To make sure users can view your app over a secure browser connection (https), please visit the developer console to update your callback URL.”

    Do you (or anybody else) know what to do? My site doesn’t serve https/ssl…

    Thanks in advance!

  • Girlfridy26

    I don’t know what I was expecting with the new IFrames, but that was not it. I thought I was going to have to learn a whole new series of codes to be able to continue my business, but you turned my job in to a joke now. This is nothing but building my websites and adding them in. GREAT POST! I am eagerly waiting part 2, but will walk the step for part 1 in the meantime. I also think you fixed one of the issues a client had and that was adding in optin-codes. Thank you!

  • Signa Strom

    All I can say is OH MY GOD I’m so glad I found you! As soon as I’m finished writing this comment I will begin work on a new Fan Page I’ve had in my mind for a while and now, finally, know exactly what I want to do. Woohoo! I’ll be back to let you know how it goes. :)

  • http://twitter.com/speg Steve Hiemstra

    You can get the full 520 pixels of width by setting the margin of the body to 0.

    body style=”margin:0px;”

    Boom.

  • Minkcards

    Hi Francisco,
    Again…you are so helpful and amazing. I’m a non-programming human, so bear with me. I’ve made it to the step where I’m supposed to upload my code to my server. My business is on Etsy, so I don’t have my own website or server. Can you recommend a work-around or third-party host?
    Thanks so much!
    Melody

  • http://www.socialmouths.com Francisco Rosales

    Good point Teresa, no uppercase and no spaces…

    Thank you!

  • http://www.socialmouths.com Francisco Rosales

    Thank YOU Linda, come back and let us know how it went.

  • http://www.socialmouths.com Francisco Rosales

    Part 2 was supposed to go live today but I’m still not happy with it so I decided to let it sit for a couple of days and really make it a good sequel.

    Thanks for your comment.

  • http://www.socialmouths.com Francisco Rosales

    Thank you Steve!

  • http://www.socialmouths.com Francisco Rosales

    To be honest I never tried it but I’m thinking DropBox https://www.dropbox.com/ might work.

    Anybody else has a suggestion to host the html code if you don’t own a server?

  • http://www.khonkaen.ws khon_kaen

    Excellent post and eagerly awaiting the follow-up on how to add my blog using Iframes

  • Katie

    This was an awesome tutorial. I kept it simple and skipped the image map part but unfortunately it is not work for me. I think it might be due to my web host (godaddy).

    When I go to my Application from my fan page, instead of my 500×540 pixel image, I get this error message:

    Method Not Allowed
    The requested method POST is not allowed for the URL /iframe/index.html.

    Any thoughts?

  • Liam

    Thank you for the super helpful blog entry. This made setting up iFrames across all the pages i manage very quick and easy :)

    Just 1 quick question for the competition…where do you see the notifications or “tags” that people have linked to your page using the @ character? I’m curious as i’d like to use a similar method to promote my page and a competition we are running soon however after trialing it on my test account i can’t see where it lets my fan page know i linked to it using @.

  • Eja09

    Hi Guys,
    I m getting exactly the same issue using html in some browsers on MAC mainly. On PC FF it s fine. I read thet you need to change to .php – see:
    http://forum.developers.facebook.net/viewtopic.php?id=91480

    but I cannnot use php on my server.

  • http://twitter.com/AbigailK_ Abigail PhotoSocial

    Thanks for this post! It’s one of my favourites. Has inspired me to explore all iFrame options, and there seem to be many! Will be referring clients to your post regularly!

  • Katie

    I’m experiencing the same issue as Sarah on FF on my PC. I’m thinking that it’s an issue with my host. Thanks for the link on php, Eja.

  • Rahul

    Indeed a very great tutorial and you have made it so easy…i dont have a website of my own so where i upload my html and css files…i need your recommendation? Can google sites be the option..
    Thank you again for this tutorial

  • Eja09

    I am gettign one of my pros here to compare the http headers – from what I can see, the one in WINDOWS FF gets a response 200 – wich is ok. OSX FF gets a 404.. same query different response. As soon as I have an answer I ll post it up.

  • http://www.poshports.com Sue

    Thanks Francisco! You obviously spent a lot of time composing this tutorial, appreciate your work and will be sharing it with others. Can’t wait to get started.

  • Eja09

    see below for another thread that speaks about this..

  • Eja09

    I have found one thing: Make sure that your HTML is well-formed. I had forgotent to close a tag and it was not working at all on IE at all.

    I am now trying to identify why it s not working on MAC OS at all – I suspect my webserver is doing something strange and returning a HTTP/1.1 405 Method Not Allowed – only on MAC.

    I ll keep you posted if I find an answer.

  • http://twitter.com/antoniaharler Antonia Harler

    Francisco, this is pretty awesome – thank you :) I have one question though, do we no longer need to set the landing page as default? I am trying and trying to find that function but don’t seem to be able to? Or do people get redirected to the landing page automatically? :)

  • Marty Murray

    Hi,

    Thanks very much for the tutorial. I am having a small problem with it. I can view the app once I am logged in but if I am logged in as someone else I just get a blank page.

    Not sure what I am doing wrong.

  • Tomsmarch

    OK when I tested the index.html file I built all that showed up was the code and not the image? Why?

  • http://promagz.info Sudipto

    The fan page looks very professional because the image you created is pretty good. Your Photoshop skills are very good.

  • joel

    saved my day man, thanks :)

  • http://www.myronlmeters.com Myronlmeters

    This write-up is amazing! very conclusive! I am so thankful!

    The only thing it is missing is a troubleshoot section. I followed everything to the letter (at least I thought), but I’m getting “Incorrect Function.” on my tab page.

    (http://www.facebook.com/pages/Oceanside-CA/Myron-L-Meters/147455608645777?sk=app_161737670549397)

    Has anyone else had this error? Any fixes? I am in the process of going back through all the steps, but just wanted to see what other erros people were getting and how they fixed them.

    Like I said, incredible post. This was my first post to read of yours, I will be subscribing to your blog.

  • http://www.myronlmeters.com Myronlmeters

    I think I have figured out my problem… The ‘Page Tabs Configuration’ looks different on my PC when using FB. (see below)

    http://i1185.photobucket.com/albums/z345/MyronLMeters_com/FB-error-1.jpg

    And this is what the error looks like on my page

    http://i1185.photobucket.com/albums/z345/MyronLMeters_com/FB-error.jpg

    Any advice anyone?

  • http://twitter.com/spiritualghost Saarthak

    Franc, thank you for the awesome post. I reached your blog by following someone’s link on twitter and got hooked reading and created a welcome tab for one of my fan pages.

    Everything worked well except one small problem. Even though I kept the width of the image at 515px I get those nasty scrollbars in the Welcome tab on my page (I initially had the width at 518px reduced to 515px but the scroll-bar’s still there). Any idea whats the best size to get rid of it?

    Again, thanks a ton!

  • http://twitter.com/spiritualghost Saarthak

    reduced it to 509px still no change!

  • Artdenye

    I`m also have error message :
    Method Not Allowed
    The requested method POST is not allowed for the URL /iframe/index.html.

    any solutions ?

  • http://www.dcfemella.com dcfemella

    Change it from HTML to PHP.

  • 520photography

    I am in no way a coder. I am a photographer looking to showcase my work and bring in new business. My main goal is to make a landing page for facebook ads. You wrote this to make sence to the common man and I think it does. I have not tried it yet because I am still in the process of making the image. I’m not real sure on how to access my server as FTP. I use hostmonster and am not sure if I have that option. Another question is, would it be better to have all of the pages in place before I go live with any of them? I don’t want any dead links if someone were to land on the page before I was done. I’m sure I will have more questions as I go but do you offer any written “book form” references for this? I tend to do better when I can read a few chapters, then apply and have my reference right there? Great post. Looking forward to trying this out

  • http://twitter.com/hans_gelok Hans Gelok

    Hi Franciso,
    do you know if there are problems with http/https?
    I do not succeed, see below. Thanks for your time!

  • http://twitter.com/lindaph Linda PH

    Brilliant – just what I was looking for to get me started on redeveloping the hysterectomy association page on facebook – which, if you’re interested you can find at http://www.facebook.com/hysterectomyuk :-)

  • Sarah

    Hi Eja09,

    Thanks for the link to the developers page, I’m going through that now. Did you have any luck?

  • Chris Goodenough

    were should

    the code body style=”margin:0px;” sit as the right side of my image is cut off?

  • James Hardiman

    Well, it all went like clockwork, up to the point where I clicked the tab to try it out, and FB just said:
    Sorry, your request could not be processed.
    Please try again

    Here’s my FB page: http://www.facebook.com/WalkingForHappiness?sk=wall (the app is called “Welcome”.
    Here’s my hosted page:
    http://www.walkingforhappiness.co.uk/fbpage/

    I’d be grateful for any hints!

  • Mholtz

    This was an awesome tutorial. I did run into the 405 Error and after searching forums it looks like FB did away with .html and you need to save the page as a .php. Once I did that it works perfectly! Check it out… http://www.facebook.com/2themaxxent

  • James Hardiman

    I changed the html file on my website to php, and massively simplified the mapping (I had tried to get a bit complex with it). Still get same message.

    But here’s a weird thing: if I just type the URL of the app into IE, it works!

    http://apps.facebook.com/welcomewfh/

  • James Hardiman

    Sorted it!

    On your instructions, under Page Tab, it shows http:// ….. [CONTACT …
    That wasn’t shown on my FB, so I typed all that stuff in. I jys took it out, and just put index.php, and everything is FINE!

    So, THANK YOU! My FB Page now looks VERY business like.

    … now going on to try the next bit …

  • Martin Labas

    Brilliant post, but I have one problem. The image, which I call banner, didn’t appear at my landing tab. Is it because I don’t have my own server and FTP and I didn’t host it. How do I overcome this problem? Can my facebook profile be my server?

  • http://www.facebook.com/profile.php?id=667764701 Debi Martin Adam

    Thanks for sharing this – you rock!

  • Andre

    check out our ballin test tab https://www.facebook.com/socialpoint.ca thanks for the walk through!!!

  • http://twitter.com/chuckhauptphoto Chuck Haupt

    I also having the same problem. Have you been able to figure it out yet?

  • http://pulse.yahoo.com/_IVNBEEVCVCIVKDKQLARBC6UINE Cathie

    thank you so much, this is awesome!

  • Mary

    Thanks for the great post! I’ve verified my FB account by providing my mobile phone number and FB confirms that it’s verified, but I still can’t get past the verification screens to create the app. I just keep getting the message “Your account must be verified before you can take this action. Please verify your account by adding your mobile phone or credit card.” But when I click on mobile phone, I see “Your mobile phone has been successfully verified.” Am I missing something or is anyone having the same issue?

  • Zachary

    Excellent post. Thanks for the very clear and casual language. Love it!

  • http://studiolucid.net Simon

    Brilliant! dropbox would also get around the problem of viewing over https, I think?

    Otherwise I guess some free host like freehosting.com or 000webhost.com would work if you didn’t have a server…

  • D M6

    Thanks for this – saved me an awful lot of headaches. Really helpful.

  • http://www.socialmouths.com Francisco Rosales

    It looks awesome and you went with video and everything!

    I thought I was gonna get an error with .html but I still did it that way and nothing happened. I’m glad you have it on.

  • http://www.socialmouths.com Francisco Rosales

    James, I’m guessing you found the problem because I can see it working just fine.

    Thanks for your comment, I hope to see you here again. =)

  • Sarah

    OK. the change to .php was successful! I’ve put up a temporary page, but can relax into designing the ‘proper’ one now that I know it’s going to work.

    Thanks again Francisco for posting this. Excellent blog, I’ve been reading through your other posts as well.

    Thanks also to many of the people here who are also contributing solutions. What a great community!

  • http://twitter.com/bizsociable_AB Andrew Blaisdell

    Very comprehensive, its going to take me hours just to digest your post, so I can’t imagine what kind of time you put into writing it. Well done, and thank you!

  • http://www.web123.com.au Joel

    Awesome post. Thank you for this!
    The only thing I added was the Auto Resize code to get rid of the scroll bars and still be 520pixels wide, which I found here and pasted it at the top of the HTML file.

    http://stackoverflow.com/questions/4849579/how-to-use-fb-canvas-setautoresize-with-the-php-sdk

    Thanks again!

  • http://twitter.com/Strapworks Strapworks.com

    I was wondering the same. Any word on that, Francisco?

  • Dominguezannie

    well, you can try this iframe app on your FB page:
    http://www.facebook.com/apps/application.php?id=205398432811238&sk=app_205398432811238
    works great and easy to use!

  • Bruno B.

    Hello,

    Facebook implemented the security management by enabling the https connection.
    The connection with https does not allow application iframe non configured https to appear on the fan pages.

    http://www.facebook.com/iframe.apps

    iframe.apps allows to create an iframe without being facebook developer and avoid to purchase and configure the SSL certificate.

    The application iframe.apps proposes to:

    – add in an iframe tab an existing web page by simply inserting the URL
    – or create a new iframe tab with the HTML editor integrated
    (same as what was managed Static FBML)

    Bruno B.

  • Djtina123

    When you enter application settings, then Facebook integration, then iframe size try to set it up to Auto-resize.

  • Charlotte

    Hi

    Does anyone have a solution to Myronlmeters problem? I’m getting the same problem alternating with the iframe pulling through my site’s 404 page ?!

  • http://profiles.google.com/tarasantilli Tara Santilli

    Thank you!!

  • Frank Ghorde

    thank you very much

  • Darielrouss

    me encantó muy facil… muchas gracias…

  • http://www.lorirtaylor.com/ LoriRTaylor

    Seriously you are a genius! Of course I love the break down of the “how to” but it’s CTA at the end – the goals for the post – just the overall marketing strategy you have on top of the great stuff for us – your blog rocks!

  • sikania

    I have a big problem…I didn’t receive any code to verify my acconut on the facebook developer page.
    And if I try to do it, there is a window that says me to introduce the code I do not have….:(((
    How can I get a new code?

  • varun

    What a moment.I was just searching for this.Its here.Thanks a lot for this tips.I will certainly try this out.If any doubts occurs ,i will come here by the way..

  • http://www.socialmouths.com Francisco Rosales

    Are you outside of the US? if the code is not working, you should try the credit card option.

  • Courtesy

    I performed the steps to the tee but my links to my external sites such as twitter and YouTube are not working. The code is pointing to the canvas Tab URL then the wwww.twitter.com website so when the user clicks it receives a 404 error

  • http://www.socialmouths.com Francisco Rosales

    When you are setting up your application, look for an option to show scrollbars or not. That’s all you need to do.

    Let me know how it goes.

  • http://profiles.google.com/tomsmarch Tom Smarch

    OK I believe I have done everything correctly but when I test the page on my server there is not an image just the html code. What am I missing. The photo is up on photobucket and index.htm is on my server.

  • Patrick

    hey i did everything i was supposed to and it shows up but its off center i even went back in to photo shop and adjusted canvas size to 500 and re uploaded all the images heres the link
    http://www.facebook.com/pages/Members-Voices/162402597131513?sk=app_164475053610669
    any help would be awesome

  • Tinacostigan

    Hi – Thanks for this post – you really make things very straightforward. I have set up a 5 page mini site and all is well but I think that rather than have my 5 pages viewable just via my minisite tab I would like to show them as seperate tabs also. Once someone likes the page they default to the wall and do not see the minisite unless they click on the tab – the 5 pages may go unread except for the first visit!
    Is there some way of adding seperate tabs with links to these pages without having to install an extra app. If I install 5 or 6 apps for every customer I will end up with hundreds of apps attached to my personal profile (if I’m successful that is!)
    I’d be really grateful if you could suggest a way around this problem. You are my last hope!
    Thanks,
    Tina

  • http://www.socialmouths.com Francisco Rosales

    Thanks for sharing.

  • http://www.socialmouths.com Francisco Rosales

    Hi Tina, if you wanna have multiple tabs you’ll have to install an app for each one of them. Now, if you ask me, the chances of people actually visiting tabs from the menu are pretty low. That’s why tabs are mostly used for landing pages for new visitors. I think having the minisite with 5 pages all in the same “landing tab” is your best chance to have some visibility.

    I am actually planning on having a 3-page minisite myself to use as landing on one tab.

    If you’re currently running more than one tab, I suggest you take a look at your Fb Insights, you’ll probably see that clicks to those additional tabs are almost none.

    Thanks for the question, sorry there is no better solution for this.

  • http://www.socialmouths.com Francisco Rosales

    Patrick, did you select “Auto Resize” instead of “Show Scrollbars”? The other thing is that your image is too tall and that’s why it’s still showing those scrollbars, I’ve seen that happen.

    Your image should be fine at 500px because the one I used for this test is 507px

  • http://www.socialmouths.com Francisco Rosales

    If you have links to Twitter and YouTube you need to use this tag in your link so it can open a separate tab:

    target=”_blank”

    They will not open inside your tab.

  • http://www.socialmouths.com Francisco Rosales

    Great, let me know how it goes.

  • http://www.socialmouths.com Francisco Rosales

    Thanks for sharing that Joel!

  • Kate

    thankyou for this wonderful page. i have one problem i would love you to help me with. I followed your instructions using image map how to link and got the code. It works, however what do i need to change to make the link open in a new window instead of the iframe????

  • Annelise

    HI
    Thanks so much for the tutorial. I have done everything right and now have a nice landing page. However, I guess only people who’ve never “liked” my profile will see it ?
    Other question (and BIG problem): I have also a “brand Url” (a facebook Url with my company name only) but when I click on it it lands on my “personal page” and not my business page… (and so no landing page either). How can I fix it so that my brand Url lands on my business page ?
    thanks for any tips

  • Anonymous

    This is really cool. This is a great way to be a Technical writer.

    Funny I was able to get thru the whole process but I got hung up early on with my image map. I was able to create the image, bring it into the cloud image mapper but what I got was just code to test to see if it worked. Look here http://www.midnightsondesigns.com/iframe/index.html

    Ive tried using all the variants, i.e. html, css. I also read all the comments and no one has had this problem. So I’m thinking what I’m I missing here.

    I know it will work on FB because the raw code showed up there as well.

    Any help from you or the community is welcomed.

    Best,
    Carey

  • LisaB

    You’re tutorial has been rocking my world. I’ve gotten stuck on the FTP step (using FileZilla). I’ve named my file http://www.ldbcreative.com/directory.html and when that didn’t work tried http:ldbcreative.com/directory.php (after reading all the comments). It appears as if it’s uploaded to my server in FileZilla but when I type in the URL I get a 404: page not found error message. Any help is much appreciated. This is my first foray into all of this and I’m excited to make it work! Thanks:)

  • http://www.informationjunkiesanonymous.com Ryah Albatros

    Thank you so much for this tutorial; I’ve made my first page and got the app all done – I can see it on its own page, but it’s not appearing on my page yet. I’ll keep fiddling until it works!

  • http://twitter.com/sticklas Sarah Stickland

    This is awesome and very helpful!!! I am stuck one very simple part, uploading my html file to my server.

    The only thing I have on my server is my wordpress site. I am not sure where I need to place my folder and index.html file. Wherever I put it I get an error that it can’t be found. Here is what my director looks like

    http://www.childishfundraising.com/wp-content/uploads/2011/04/Picture-323.png

  • http://twitter.com/sticklas Sarah Stickland

    Love this tutorial, but I am stuck. My uploaded html page does not show up. The only thing I have on my server is my wordpress site. Is this the problem?

  • http://www.studiolucid.net Simon

    Hi Sarah,

    If you make a new directory (or folder) on your server, upload the index.html file to there and specify the path to that directory in your app it should be all good…

  • Beth

    I have never messed around with html and have a very limited understanding of my ftp server, but I was moving through these steps and got all the way to here: http://www.afacetoreframe.org/iframe/index.html. Was wondering what you think I’ve done wrong and where I need to go back… image map or ftp?

  • vanessa

    The pagetabs section shows is different, and i need to specify myself, i get a request could not be processed, so obviously putting the wrong info in!

  • Carolina

    Hello Tom
    I am having same issue here. Did you manage to make it work?

  • Carolina

    Thanks for this great tutorial!. But… I´ve read of people having problem to view the image when testing in browser. Only code is showing. I can only view image before getting image-map´s code. The code I´m using is the one I get from “html code” and edit it entering body, and html tags.
    Thanks for anyone´s help!

  • http://profiles.google.com/victoriapaigew Victoria Whittington

    This is great. I am just learning how to do this stuff. Very informative. I have a question, though. If I have a domain, can I host the content there and how do I do that? I guess I’m a little confused on the hosting to the server part.

  • Katstelm

    Thank you for the post. I really learned a lot. I was quite annoyed when they got rid of FTML, but now I think there is so much more you can do with this. I read on another post that you can embed a “Like” button onto the page. Does anyone know how to do that?

  • Anthony

    Fabulous post. very accurate and easy to follow.

    This was miles easier than trying to follow the instruction for an ‘out of the box’ solution!
    If that’s not a testimate to the brilliance of the piece I dont know what is! Kudos!

  • Anthony

    Fabulous post. very accurate and easy to follow.

    This was miles easier than trying to follow the instruction for an ‘out of the box’ solution!
    If that’s not a testimate to the brilliance of the piece I dont know what is! Kudos!

  • Steve Erbach

    Yes, very easy to follow. One odd thing: I created the web page for the app using an HTML editor and saved it as index.htm. When I installed the app on my Facebook Page, the page would not load. I got a 405 error.

    On a hunch after reading a number of these comments, I tried renaming the file to index.php. THAT worked. Beats me why.

  • http://twitter.com/mein_arsch mein arsch

    If pure html code appears there are several reasons why this might be:

    1. You forgot to put the necessary html tags around your code (i.e. the head and body tags described in step 2)
    2. You have not saved the file as “index.html” on your server, but as “index.txt” or something like that. Then the server would not know how it is supposed to serve it and would serve it as plain text
    3. Pretty similar to #2: your server does indeed not know what a “.html” file is. This condition is very very rare and thus very unlikely, but it happens if a server is badly configured. Check other pages on your website that work and check what file-extensions they use. There are several (.php, .shtml, .asp and many more). Rename your file to index.whatever-extension-the-other-files-use and check if that makes it work.

  • Carolina

    Hello Mein,
    As per your reasons why html appears:
    Well…. it might likely be reason 3. The html tags are inserted as described. (some “AAAAAA´s” appear though at the end of the file when I check the file in the browser…) And the file has been saved as index.html. I checked the thrid option renaming the index file to .php but a message comes out saying that the file cannot be renamed with that extension….
    I´m stuck with this for almost 2 days now!!! I need help!!!

  • Carolina

    Hello Mein
    I´m getting a little frustrated….. I´ve been trying to make this work for 2 days now!.
    I have carefully checked if the tags are correctly inserted. The index file has been saved as .html and the other files of my website are .html files. I still get code and no image when testing the URL. The image I am using can only be viewed in browser before the image-map step.

  • Stacy P.

    I’m sorry, I’ve gone through this 10 times, read all the comments and I’m still only showing the code and not the image. It’s on my server, I have it pointed to the correct location and yet only the code is showing up. I’m on a mac so I thought maybe that was it, checked things on my laptop and yet it’s still just code sitting there for all the world to see (or only those that click on the tab at the moment). Any help is greatly appreciated. Other than that one little snafu the tutorial rocked! Many thanks!
    Stacy
    Facebook.com/stacyfrancisphoto

  • Bethhbruno

    I had this problem and saved as php. On my server/domain url it was showing up, but now walking thru the FB app steps, it is not working within IFrames. Ideas?

  • http://twitter.com/markwthomsen Mark Thomsen

    Thanks for this! It was super helpful and easy. I tried using some other “how to” and missed the URL path instructions. Got a bunch of 405 errors. Cheers!

  • Darter

    Hi, i have a great problem.. i have created and performed my page/application and i have done all points that you explained, but when i go into application admin panel –> Application Profil Page and then Go to App, i return as the error, my site’s page error :S. How is possible? I have put all information in a good way, and the page is also hosted online correctly.

    For it, i can add my application to my fan page :(

    THank you for the answer.
    Regards

  • Darter

    OK, i have resolved the problem, i have make a mistake to not named index.html mine page. After named it i haven’t had the same problem. However i have add the app on my fan page, and i have it on left menu, but if i clik on it i have as result facebook’s error page: “Sorry, can not process your request.” :S why i have it now?
    Thank you

  • Stacy P.

    I’m with Carolina on this one, I’ve tried it all, my html codes are there, I’ve changed the index from html to .php, I’ve changed my image from png. to .jpg, I’ve even tried it on two different servers (my blog and website are hosted by 2 different companies). For some reason it is not referencing the img file, I can view the img file when I pull it up as a direct url, but the code is not referencing it when I go to the direct link with /index.php. This is 3 days of frustration. Off to search my html for dummies book to see if I can find an explanation. I’ll report back if I find an answer.

  • http://pulse.yahoo.com/_EFCKDO3S5K7GCKPOKVJTYI2F6M Ashley

    I think I’m having issues with the canvas URL/tab URL – I’ve followed all the above steps for my page, the app itself seems to be working fine when you view it through its own page, but once added to mine I’m getting either a 404 error or the entire facebook page inside my facebook page (if that makes sense) – any suggestions on why this might be?

  • Darter

    Hi Ashley, your problem is similar to mine that i have explained under this. I haven’t 404 error but a ?generic? facebook errore where it says: “Sorry, can not process your request.

    Retry” :S and i haven’t found a solution till now

  • Darter

    Hi Ashely, i have solved mine problem putting into “tab url” only directory’s url where is hosted my page. for example: http://www.yourdomain.com/iframe/

    However i have a little problem again -.-‘, i have put on my “landing page” two external link, when i click on them i’m redirected into these pages but being into facebook and not in a new window in my browser. How i can be redirect into external windows (from facebook) when i click on the links?

    I hope to have an help :S Thank you!

  • Darter

    Ok i have solved even it, i have need to add a tager=”_blank” in code ;)

  • Shannon

    Great post and mostly worked for me … two problems, though: it keeps asking me to provide an Secure Tab URL, (HTTPS, I assume) but I don’t have one. I plugged in the other URL and it didn’t like it. Does this matter?

    Also, though I’ve the auto-resize button marked, I’m still getting scroll bars. My page is bit oversized (520 x 1000) but I’d hoped that auto-resize would handle that. Before I go back to my page and resize everything to smaller dimensions, is there another way?

    Thanks for the great post!

  • Shannon
  • http://twitter.com/AndressTinoko Andrés Tinoco

    Hi, Why can i not set up my tabs as default ?
    I can not see the option to do it
    any help please?

  • http://pulse.yahoo.com/_5QP5BGQ5ZHYXJMRD64OZHIENWM ««AµÐ††³»»

    Hi, Why i can not the menu to set up my tab as default?
    I dont have the option to do it
    Any advice please?

  • http://pulse.yahoo.com/_5QP5BGQ5ZHYXJMRD64OZHIENWM ««AµÐ††³»»

    Hi, Why i can not see the option to set up my tab as default?
    I dont have it is not there!
    any advice??

  • Carolina

    Does anyone know if mapping an image can be easily done in Dreamweaver?. Since I still couldn´t figure this out with image-maps code, I thought maybe I could get it done some other way. Thank you.

  • Carolina

    Does anyone know if mapping an image with Dreamweaver is easy???. I´m still stuck with image-map code. Thanks for anyone´s help!!

  • http://www.socialmouths.com Francisco Rosales

    Hi Carolina,

    Yes, Dreamweaver is an alternative to create image maps. I don’t know how easy it is, that depends on how much you know about it, I gotta be honest and say I don’t use that much.

  • Stacy P.

    Hi Carolina,

    That is exactly what I ended up doing and my page now works perfectly. I don’t know what it was with the image-maps coding, as I checked it to my own coding and it seems to be nearly identical but for some reason the Dreamweaver code was readable and the image-maps was not. In Dreamweaver it’s very easy to map your image. If you’re in the “design” tab, at the bottom it says “map” and has different shapes you can use, click on the shape, now pull the shape around the area you want linked, then in the box in the bottom that says “link” type in the url of where you want your link to direct the viewer to, then under that where it says “target” click the arrow and choose “_blank” if you want a new window to open up. Save the page as index and upload it. I spent 4 days dealing with the image maps code and NOTHING I did worked. Finally found my dreamweaver disk from years ago, reinstalled it on my old PC (even tho it’s formatted for both win & mac, my new mac didn’t like it :( ), pulled my image in there, mapped the image, changed the code to read where the image was going to be hosted, uploaded it to the app on Facebook and it WORKED! Wish I had done this DAYS ago, would have saved me a lot of headaches! Good luck!

  • Carolina

    Thank you so much Stacy!. I´m glad you were able to get through this… I´m in the middle of mapping my image in Dreamweaver. But just one tiny thing…. how do you insert the image with the Photobucket url link. In my case, I hosted the image there. Because what I did was insert the image saved in my computer ( I also have a Mac, i love it!!) which of course I was not able to see when checking in browser. When I check the code in Dreamweaver I don´t have Photobucket URL. do you know what I mean?? Sorry!! this is my first time using DW!!.

  • Carolina

    Stacy!.
    Sorry!!! I´m almost there. There must be a link problem somewhere because when I check the url a small blue box comes out with a question mark in it. Once I click that I can view the image, but only clicking on it. The image doesn´t come out at once.

  • Rbraver

    This was insanely helpful, thanks!

  • Stacy P.

    I don’t use photobucket, but this is what I think needs to be done, find your image on photobucket, click on it, now the link at the top in the url box is the link that needs to be put in place after the code. Let me know if that works :)

  • http://www.jessieobergphotography.com Jessie

    I appreciate you writing this in depth article. After a couple of attempts, I finally figured it out. :) The only thing I’m wondering is how to make it so that people that haven’t liked my page land on the welcome tab when first going to my page. I unliked my page to test it out and it still took me to the wall. Also, how do you make it so that people who already like your page will land on your wall instead of the welcome tab? I would appreciate any help with this, and thanks again!

  • Carolina

    hmmm… well… I tried it yesterday and…… it worked!!! did it through FTP not Photobucket. thank you so much for your help!. now have challenging second part of the tutorial…. hope it works!.

  • http://twitter.com/adspedia adspedia

    I read your post, while coding aside and in under 7 minutes I managed to complete my page.
    Good, now this was the easy part.
    I now have the landing page that I want ONLY fans (users who already “Liked” my page) to view

    I would need this: is there a way to use iframe app to allow for this scenario?

    Step 1: User gets to my Facebook page and did not “Like” it yet or is not logged into Facebook.com
    Step 2: User “Likes” the page
    Step 3: The “former” user, now turned into a “fan” is presented with the “fans-only” tab/landing page.

    Can you tell me if this tutorial covers that too or how it can be achieved?

    Thanks!
    Val

  • http://twitter.com/aditecco Alessandro Di Tecco

    OMG this was extremely useful, thanks!

  • Dfoxworth66

    wow… thank you so much for the gift of explaining this in clear words and step by step. I really appreciate this.

  • http://twitter.com/AmyLeighMiller Amy Miller

    Shannon- Did you ever solve the Secure Tab URL problem? I keep getting the same error followed by the 404 error. Any help to offer?

  • Catie

    Loved this. This was super helpful and broken down VERY well. Thank you, thank you, thank you!

  • Ted

    Hi John,

    Assuming I have an image of a video clip, how do I:

    A) embed the video? (likely know the answer) but most importantly
    B) Get it to play on the page itself where the video clip image is positioned?

    PLEASE HELP!!!!!

  • Ted

    Oops I meant to ask Francisco not John… Sorry about that.. Any advice Francisco?

  • Henry

    Thanks for the post, very helpful hermano!

  • Anonymous

    This post was so helpful! Thank you!

  • Ritesh_1010

    Can i add this Tab to my profile page?

  • Caroline Rodgers

    I had done this walk through about a month ago and I worked great – now its not working and I get a blank tab – has Facebook more updates since then?
    Thanks

  • Marie Andrews

    Hey Francisco! Thanks so very much for posting this–I have been searching EVERYWHERE for a good and comprehensive step-by-step guide to help launch my first iFrame app. This is so great! Thank you so very much!

  • http://www.virtualsensei.it/ Virtual Sensei

    thanks, very helpful!

  • Anonymous

    Wow. This post is a mini ebook! Gave me a bit of a brainfreeze with all the info, but I plan to print it out and give it a try. Like the way you write :)

  • Rskelhorn

     Thanks for the info.  I had to do some extra research to find out how to set a landing page and how that worked, but now that everything is set up you can see what I have done on my facebook page My Pet Food Network LTD – Halifax.

    Thanks for your great help.

    Regards
    Richard

  • http://twitter.com/easyfanpage Justin Wheeler

     Great post.  I thought I would put in a plug for my easyfanpagedesign premium wordpress plugin which is designed to let you use wordpress as an html editor for fanpages and allows you to host hundreds of fanpages off one wordpress blog.

  • http://Dabbled.org Dot

    Dude you are awesome!  I followed your tutorial and now I have a new landing page for http://www.facebook.com/Foodwhirl !

  • Gareth

    Hi,

    Nice and simple to read, but the screen grabs for the application settings are different to what I see… having real difficulty getting it to work :- ( even used the ssl certificate url… just get a blank page.  

  • Gareth

     Hi,

    did you use the ssl certificate to make it work?

  • Colourcaffe

     OK! Perseverance pays off… lots of trawling through the shiternet, but I changed the doc type to asp (index.asp) and it now works… just need to figure out the landing page stuff! Thanks for the tutorial because it was 80% damn helpful! have a look: http://www.facebook.com/pages/2tempo/65119701905?sk=app_152091861523946

    Thanks

  • http://www.facebook.com/people/István-Dóczé/100000211477134 István Dóczé

    Hey Francisco.

    First of all I would like to thank you for this amazing post, i think it’s one of the best and most comprehendible!
    After hours of searching i finally got here and this was the most helpful :)

    I have read your post and followed your steps and this is the result: http://www.facebook.com/schoolcard?sk=app_211620905537833

    Thanks again,
    Docze Istvan

  • http://www.theanaloguerevolution.com Peter

     You may need to check the height of you iframe not just the width. If what you are displaying in the iframe is longer in height than the iframe then it will add a scroll bar down the side, taking up a few pixels whcih could give you a horizontal scroll bar too

  • Tk_khanna

    have you tried downloading textmate?
     

  • Hadi Hassan

     you did great job…thanks for helping me..

  • Anonymous

    Wonderful how to post on iframes in Facebook Fransisco! Best on the web. It has been slow to be adopted it seems, for reasons that are beyond me. But somethings are now being done. An iframe we designed pushing the envelope a bit. http://bit.ly/kZSkNK What do you think? Would love to see more examples if you have them.

  • Anonymous

    Nice. Is there a way to make it default to ‘welcome’ page?

  • http://twitter.com/sethetter Seth Etter

    Very helpful post. Thanks a ton.

  • Yoshi Mcleod

    Great post. It has really helped me out. Just a couple questions:

    1) The profile page that is created for my app seems unnecessary. I guess I cannot avoid that, but why do I need a profile page to go with an app that is just meant for my landing page?

    2) Similarly, I was wondering about the canvas page that is connected with this approach. Does it not exist unless I add a URL for it on the Facebook Integration part of the set up?

    I am just wondering if the way Facebook has set up iFrame landing page development is a bit of a tool bigger than the job needs. i feel like I am simultaneously setting up a blank app while I only want a landing tab. Any insight on this?

  • Tonybogar

    I loved this, but I have a slight difference. My “tab URL” field isn’t prepopulated at all, the way you show it. What should I put in there? The directory URL or the full URL with the file name or something with Facebook in the URL? Thanks, Tony

  • http://www.facebook.com/cassioamachado Cássio Alexandre Machado

    Hi Francisco, I am Cássio from Brazil and first of all, I’d like to thank you for this excellent post. I did the Phone authentication and it works fine. The only problem I had was: the page tabs it’s a kind of different now, but I continue with your post. I will have to discover how to make my website works with https protocol. But when I tried to access my tab with http way I got an error and I don’t have a clue in what to do to solve it. The error was Incorrect function. Anyway thank you again what a excelent post.

  • http://twitter.com/MarB_CZ Marek Beniak

    Nice. Bit too complete for me, but it’s great to have all the info on one place. Some kind of summary on the beginning with links to the right part would be nice. But never mind, it’s not so hard to use scroll wheel… Thank you very much for great manual.

  • Alivingproof

    This is great! Thank you! However, do I still need to utilize the FTP to access my server if I’m using WordPress? I’m a little confused on this part. Thanks in advance!

  • Naeemzahid Cisco

    Hi Francisco,

    Your Post really helped me to get grips with the concepts, Appreciated man…

    NZ

  • http://www.elprincipe.it carlo

    Hi Francisco,
    i find your post very usefull, but i stopped my self at this point:
    Please Update Your Secure Canvas URL etc. etc.i tried to add the Canvas secure URl and Tab secure URL both but after adding secure url 501 error happened.in making secure url i simple added “s” after http and /secure/PSI must create a new folder title secure and adding a copy of index.html???Many thanks from Italy:-)))

  • Sanabriatico

    OK Francisco first Thank you, man you really are doing something incredible and making a difference with this information, now i have done everything, but, what if you don’t have an ftp, is there another way to host the index.html file, any other options that you know of, if any of you know can you please help.

    I have tried free stuff like Google documents, Google sites, hp cloud, freedrive.com and I end up with nothing good, definitely doing something wrong.

    Anyway Thank you again for all your help your blog rules!!

  • Sanabriatico

    OK Francisco first Thank you, man you really are doing something incredible and making a difference with this information, now i have done everything, but, what if you don’t have an ftp, is there another way to host the index.html file, any other options that you know of, if any of you know can you please help.

    I have tried free stuff like Google documents, Google sites, hp cloud, freedrive.com and I end up with nothing good, definitely doing something wrong.

    Anyway Thank you again for all your help your blog rules!!

  • Sanabriatico

    OK Francisco first Thank you, man you really are doing something incredible and making a difference with this information, now i have done everything, but, what if you don’t have an ftp, is there another way to host the index.html file, any other options that you know of, if any of you know can you please help.

    I have tried free stuff like Google documents, Google sites, hp cloud, freedrive.com and I end up with nothing good, definitely doing something wrong.

    Anyway Thank you again for all your help your blog rules!!

  • Sanabriatico

    OK Francisco first Thank you, man you really are doing something incredible and making a difference with this information, now i have done everything, but, what if you don’t have an ftp, is there another way to host the index.html file, any other options that you know of, if any of you know can you please help.

    I have tried free stuff like Google documents, Google sites, hp cloud, freedrive.com and I end up with nothing good, definitely doing something wrong.

    Anyway Thank you again for all your help your blog rules!!

  • http://www.socialmouths.com Francisco Rosales

    I really don’t know if hosting your html as a document will do the trick, mainly because those services give you their own unique url. I don’t even like to host images at 3rd-party services.

    I’m afraid I can only recommend getting a very basic hosting package, I know GoDaddy has some for under $5/mo.

  • http://www.socialmouths.com Francisco Rosales

    Hi Carlo, you will required to have a SSL Certificate in your hosting package, that is wherever you are hosting the html for your landing tab.

    There is more information about this on this article: http://ilocalsearch.net/facebook-pages-changes-ssl-certificate-requirements-that-you-need-to-know-about

    Hope that helps. Thank you for the comment.

  • http://www.socialmouths.com Francisco Rosales

    Using WordPress is a great idea to create your landing tab, I’m actually working on that myself. 

    You should be able to just set up your Fb App with your url if you have your WP ready. No need to mess around with FTP connections.

  • http://www.socialmouths.com Francisco Rosales

    Good idea Marek, next time. =)

  • http://www.socialmouths.com Francisco Rosales

    Sure, just go into your page settings and change the default.

  • Kellonicus

    Awesome post…really beneficial…looking forward to your post on how to bring your blog inside Facebook.  ;-)

  • http://socialmediazap.com/ Mark Austria

    Big help. Thanks a lot Francisco. Did my first Facebook Landing Page. Will experiment and improve on design for the future, but for now I am happy. Let the journey to social media continue. More power!

  • http://www.RimFinancing.com Corri

    Building the page and inserting it was easy and your information was PERFECT! but the information won’t show up inside the “tab”. If I go the the “profile page” for the App I can get the information but it doesn’t show up on our companies page (RimFinancing).  Any suggestions?

  • Miaj

    Thanks for the great tutorial. We’re proud to announce http://www.facebook.com/kitsmediawebsites  I look forward to trying some linked pages too. Thanks Francisco!

  • http://www.elprincipe.it carlo

    Hi Francesco ( in italian way is beatifull as well:-)),
    thanks for the fast answer.
    I’ m gonna to re-contact my hosting service and as they moved linked domine in my VPS i  ask them to how to get a SSL.

    Many thanks
    C.

  • Varaonsite

     how do i change to default

  • http://www.facebook.com/people/Justin-Case/100002171732256 Justin Case

    ok this part:
    2. Host your image…

    can this be done by “hosting” the images at a photo server site, such as flicker, or facebook even?

    Rob

  • http://www.facebook.com/a6h1nav Abhinav Gupta

    This is an awesome tutorial and helped me get my first landing page up. Thanks very much.

    I have one problem though – maybe it is because I am logged in as admin or something but when I click on my welcome tab, it says something about upgrading the app to secure URL. This to be exact:

    Please update your secure tab URLTo make sure users can view your app over a secure browser connection (https), please visit the developer console to update your Secure Canvas URL._______________________________________________________________________Anyone have any thoughts on what I am meant to do to fix it? When I try to go into the app settings and just add the same canvas and site urls with just https at the start instead of http, the welcome/landing page just goes blank.I am a bit befuddled and any help would be much appreciated.

  • GringoC

    Thank you very much. The process was dead simple and that is appreciated!

  • Bill Gilan

    This was an excellent and well written article. Thanks for taking the time to write it. Great stuff!

  • Johnbogs

    GREAT POST!  Is there a way to have some one go from your iframe page … after they like your fb page and go to the opt in page to get on the mailing list so you can send them what you offered?

    It would be a nice transisition after the like directly to the opt in.

    Suggestions?

    And once again awesome post!

    John

  • http://twitter.com/LaryssaBecker Laryssa Becker

    Thank you!  This was a great post, I made my very first iframe and now I can add Google analytics to have an even better understand of what is happening on my Facebook page! 

    Check it out, nothing special but it works! http://www.facebook.com/kidsnpetsbrand?sk=app_158557204209554 

  • Carey R

    I followed your instructions very carefully, and i have to say that your post was way more user friendly than most i have read for the same tutorial…except my iframe is not populating and it just shows a GO TO FACEBOOK logo on it…Hmphhhh!  Can you HELP me before i have no more hair left to pull out?  THANKS YOU!

  • http://twitter.com/theboomerangkid Lindsay Hunt

    Very helpful! Thanks for taking the time to write such an easy to follow guide on the subject!

  • Davefurby

    brilliant thanks, it all looks to have worked great but i am having a https error, it says i need to host on a secure platform is this right?

  • Axcass

    Hola, encontre esta web, te hacen la fanpage integrando wordpress, aprovechen todos los recurosos que entrega wp, delen un vistazo a la web http://paginasdefacebook.com

    saludos

  • Cveneear

    Hey! I have followed your instructions but get this problem:

    The page cannot be displayedThe page you are looking for cannot be displayed because an invalid method (HTTP verb) was used to attempt access.Please try the following:Contact the Web site administrator if you believe that this request should be allowed.
    Make sure that the Web site address displayed in the address bar of your browser is spelled and formatted correctly.HTTP Error 405 – The HTTP verb used to access this page is not allowed.
    Internet Information Services (IIS)Technical Information (for support personnel)Go to Microsoft Product Support Services and perform a title search for the words HTTP and 405.
    Open IIS Help, which is accessible in IIS Manager (inetmgr), and search for topics titled Setting Application Mappings, Securing Your Site with Web Site Permissions, and About Custom Error Messages.Can you help?

  • http://twitter.com/templetonre1 Ron Templeton

    The bigger question is how do make one landing for non-fans and “premium” content for fans?

  • Cveneear

    I have done what yuou have said but facebook doesn’t seem to want to make my app work without putting something in the Secure Canvas URL under canvas URL. What can I do?

    Thanks

  • Annu1980

    This was an excellent article. Thanks for your time….to share this info to all new guys in FB

  • andy

    Hi, I think i followed the steps correctly, the index file displays in the url i supplied… etc., but just get a message “Incorrect function. ” when i click my tab after completing the steps.

    Any ideas what I am doing wrong?

  • Renton

    Thanks so much for posting this.  I don’t have the ability to save the index file on my server.  Is there anyway to do this by hosting the file on a website, like we did with the image. (Sorry I’m very very new at all of this). 
    Thanks! 

  • zarina

    hi..i am trying to setup FB apps with SSL and non SSL page. ive setup in the configuration both links..fyi, both ssl and non ssl is different domain.my issue is,when my fb apps try to reach the SSL page, the SSL page not able to be view in the FB apps/tab/frame.its appear to be in separate page which not park inside the FB apps. can you help me pleasE?

  • Neetu Wadhwa

    Thanks :)

  • Alyx

    Epic awesomeness. I had my fangate page up and running in like 20 minutes by walking through these instructions. Thank you!

  • robin son

     This is a great post. I followed your instruction carefully and made my very first iframe. Now I
    can add Google analytics, so that i can better understand  what is
    happening on my Facebook page. Thanks a lot.

    facebook marketing

  • http://www.happyhome.com Rosanne

    I have followed all your instructions and still my page cannot be displayed.. what could the cause be?

  • Davidqiad

    This is for non fans, is there some way to make a default landing page for fans?

  • Amber

    Francisco, your the man! thank you for breaking down nerdy computer mumbo jumbo into something everyday people can understand.  My FB landing tab looks beautimus :)

  • http://greenroominteractive.com/ Joana Leighmoore

    Score one for more awesome social media!  Now this should help anyone – individual or business – to further create better promotion for their own website.  Of course, a well-created website should be complemented with a strong presence, and this definitely adds up to the effort.  We’re beginning to see custom Facebook landing pages, and who knows how easy this can be!  Splendid tutorial, Mr. Rosales!

  • http://www.facebook.com/people/Lauren-Fink/1014002621 Lauren Fink

    I’m trying to figure out how to do this very thing. Did you ever figure it out? Thanks in advance!

  • http://twitter.com/MediYeah MediYeah

    The simplest way to have fan-only content is to use this app: (Static HTML: iFrame tabs)
    http://www.facebook.com/apps/application.php?id=190322544333196

    You basically install the app, load up your non-fan html into the non-fan box in the app, load up the fan content in the fan box in the app and you are good to go. 

    we’ve used it on our Facebook business page and it does the trick perfectly. It is really simple to do.

  • http://www.facebook.com/people/Brian-Giltner/100002445804443 Brian Giltner

    Nice Article !!!
    http://buyfanslikes.com/

  • Cesar Argueta

    I need some help – how would it work if I am just trying to create a landing page that is only an image. I have the image on my wordpress blog. What settings do I have to have on my iframe in order to make it work. Any assistance would be greatly appreciate you can find me @cagator:twitter
    Thanks!

  • http://www.facebook.com/grahamclarkphotography Graham Clark

    Seems fairly straightforward, however I’m having issues with the result. Instead of displaying an image with the image maps, I get straight HTML:

    http://homepage.mac.com/krux/index.html

    Any ideas as to why it’s not pointing to the image I have hosted? ( http://homepage.mac.com/krux/landingtab.jpg )

    Thanks!

  • http://insequent.posterous.com/ebridge-interactive-to-resell-insequent-mobil eBridge advertising

    I have to say that your post was way more user friendly than most i have read for the same tutorial…Thanks for sharing.

  • http://twitter.com/delicioussanity Camille Penny

    Really excellent article. My predecessor got halfway through the process and didn’t leave notes. I was feeling a bit intimidated by the process, but this helped quite a lot.

  • http://eadesign.me evan austin

    Hey Francisco, this is still one of my all-time favorite posts! Of course you know by now that FB has changed things up a bit, and the options and screens aren’t quite as you show anymore. Something else must have gone funky too, because i used this tutorial successfully for a client about a month ago, and now that i’m trying to update my own Page (whaaaaat?) i cannot get it to work. Any general thoughts, offhand?

  • Badgi

    italian-proof! :) Thank you

  • Kkopf1

    Can you take a look and tell me what I did wrong? Im sure its something I overlooked. 
    http://www.facebook.com/pushdesigngroup?sk=app_168707099860989

  • Kkopf1

    Can you take a look, Im sure I did something stupid.
    http://www.facebook.com/pushdesigngroup?sk=app_168707099860989

  • Carlagui2001

    Hi  Francisco,

    Thanks for the post…it’s one of the best I’ve read about iFrames.

    Actually I was here a couple of days about and followed your instructions to the letter. I was successfull with my testing (all the screenshots you showed was spot on) BUT when I logged intoday at facebook to do some more testing The interface has changed. I could still create a fanpage but the scroll bar is there and I couldn’t remove it. I’ve seen fanpages with tall graphics/view but mine has a limit. My length is okay but the height is a problem.

    Hope you can give me some tips…I may be missing something here.

    Thanks

  • http://www.getpromoted.in website designer gurgaon

    finally, i found the perfect link with all the correct info. Many thanks for putting this together.

    Economical Web Designer

  • Lucas mattioneli

    Thanks to you I was able to create a tab for my facebook fan page…

  • http://paperphotographs.com/blog Zak

    Thanks for laying this out so clearly. We’re going to get this set up for our business ASAP! Thanks again!

  • Lennart

    Well written article. You could also use this free app with has multiple icons, multiple tabs and can be used for free on all you pages.

    http://apps.facebook.com/construxiiframe/

  • Lennart

    Well written article. You could also use this free app with has multiple icons, multiple tabs and can be used for free on all you pages.

    http://apps.facebook.com/construxiiframe/

  • Storybook Stars

    Thanks for your excellent tutorial :) My first ever App and it works!! Check it out here :
    http://tinyurl.com/6l42xfpThanks

  • Cosmin

    Hi, can you be more specific on how do we set this app to be actually the homepage of the facebook page. Beside that I think is a great post and it worked perfectly.

    Cosmin

  • Bohemia14

    Thanks for writing a great tutorial, Francisco. I’ve noticed Facebook must have changed some of their dialog screens since you wrote this but your instructions were still easy to follow. The main question I have for you though is can this landing page be used for a personal Facebook page or does it have to be a fan, company, brand, celebrity, etc. type of page only? I’d really like to do this for a personal page. Thanks for your input!

  • Charles Yarbrough

    I use tabs plus and just want the page there to be the first page people see when they go to our page. Any ideas?

  • Vanessa

    So very amazing of you to go through this, very well explained too
    ….everything went well until I went to view my “mini-website” in facebook and all looks good until I click on one of my links, I get a slightly zoomed out version of the correct page/image and then my cursor turns into a magnifying glass. I can now zoom in and out, although that is not what I was wanting to do. Once I have clicked on that link, and my magnifying glass shows up, I have to click back on the original tab to get it to go back to the original page/image. What the heck have I done?

  • srinivas

    I followed your instructions very carefully, and i have to say that your post was way more user friendly than most i have read for the same tutorial…except my iframe is not populating and it just shows a GO TO FACEBOOK logo on it…Hmphhhh!  Can you HELP me before i have no more hair left to pull out?  THANKS YOU!

  • http://www.facebook.com/philipp.sidler Philipp Sidler

    Hy

    Great tutorial but I have a problem get it worked.

    When I check the code that I get from the mapping-tool and check it here http://www.html-seminar.de/_test_editor.htm to so if it shows up right it does.

    but when I upload it to my ftp and click then open web url it doesnt show up. Its just loading and the tab is called “server default page”. 

    what am I doing wrong?

    Cheers,
    Phil

  • Ally

    I LOVE this tutorial but I need a little help. What is FTP and how do I access my server to save that file? A little help on this would be super appreciated! Thank you!

  • Marcia Fialho

    I was following your (great) directions, but when I got to “Configure your Facebook App”… big surprise. Facebook had changed the screens! I tried to configure them as close to your explanation as I could, but when I clicked “save” I never got to the My Apps screen and then I got really lost. What I finally did as a text was to get an iFrame app which was ready by somebody else and available to use, I but got a big frustrated because I would have loved to have configured my own…

  • Ivo Petrov

    Very nice post! But I got same problem described below by Tom Smarch and many others – there is not an image just the html code. Does anybody solve the problem?

  • http://www.facebook.com/profile.php?id=647587099 Andrew Nolan

    Fantastic article! I was looking around for a step-by-step guide, and a number of them were just too complicated. Thanks for including all the screenshots – it helped to know that I was looking at the right thing.

  • Meganpelletier

    I am having trouble with this and I believe I have done all of the steps properly… Is anyone available to offer some help??

  • Kid1

    EXCELLENT POST ! A huge THANK YOU. Great article explained in a very clear and simple manner.
    It works perfectly fine and I can’t way to get cracking on more codes and design.

    All the best from Dublin, Ireland

  • http://www.facebook.com/websitemarketingcentre dp

    Thank You for explaining in depth how to use iframes in facebook.

  • http://twitter.com/cielovainilla Camila

    Awesome tutorial !!
    I was given the job to rearrange the fb page of a small company and I had being looking for ages for a tutorial relatively easy to understrand that would help me with the task.

  • Tom L

    This was a terrific tutorial. Thanks Francisco.

    I almost got it working flawlessly, but I also get the “Go to Facebook.com” as an interstitial page whenever my link is to another page/tab on my FB page. e.g. a link directly to my MailChimp email signup app. I wonder if those links should be relative?

    Anybody figure a workaround for this?

  • Tom L

    I was able to research this myself and come up with a solution. For anyone else experiencing the same problem, just add Target=”_parent” into your href’s in the index.html.

    So for example,

  • Tom L

    Sorry, that example was messed up. More like this:

  • Tom L

    OK. Code snippets keep getting chopped up by Discus, but I hope you get the idea. Just put that target=”_parent” after the url reference.

  • Kristan

    This was fabulous and I was able to create an application, HOWEVER, the only application ever loading is index.html. Even though I save another html file and add it to the directory, and use the newly created application to call the new html (not the index.html).  How can I create many different applications for my page?  For example, I want to have a email sign-up app, then another app tab on the side (under our profile pic) that has our free stuff, etc.  Am I on the wrong page here?  I’m worried I’m missing a valuable step ;)  Thanks!

  • Robert

    Thank you so much for putting this up, it really saved that day!

  • http://www.ecigator.com/ Electronic Cigarette

    I followed your post and built my first fan landing pages, thanks for your very detail steps

  • http://www.fanpagelikes.net buy facebook likes

    I have gone through your post… It was really awesome and helpful instructions.

  • http://twitter.com/boomawebdesign Katie Blackman

    I read through this today to build my first Facebook landing page and it was very helpful. It’s not easy finding up-to-date tutorials on developing in Facebook and this one is current enough to what they have going on now. One step tripped me up just a bit, “Go to your App’s Profile Page”. There isn’t a link for Application Profile Page on your app overview page anymore. To find it, just take your App ID/API Key and alter this URL: http://www.facebook.com/apps/application.php?id=yourappid# Replace yourappid# with your App ID/API Key.

  • http://twitter.com/boomawebdesign Katie Blackman

    I read through this today to build my first Facebook landing page and it was very helpful. It’s not easy finding up-to-date tutorials on developing in Facebook and this one is current enough to what they have going on now. One step tripped me up just a bit, “Go to your App’s Profile Page”. There isn’t a link for Application Profile Page on your app overview page anymore. To find it, just take your App ID/API Key and alter this URL: http://www.facebook.com/apps/application.php?id=yourappid# Replace yourappid# with your App ID/API Key.

  • Team Slide

    Looking at doing this to my facebook this coming week…never thought about doing a full mini site…put some adsense in it…might work out nice…

    SlideSMS – Free Unlimited International SMS – You are now Free to Text the World! 

    http://slidesms.com

  • Anelia

    Thanks for the greate instructions. It worked perfectly!

  • jeanne

    I had to change the name of my page from index.html to index.asp. then it worked.

  • Hollysnails

    hello, i like your content and ive bookmarked your page. now that facebook is requiring ssl certificates for their apps starting oct . this means that your hosted site will now have to have a ssl certificate, for it to display all your photos and content do you have a way around this? 

  • http://www.facebook.com/profile.php?id=1388975615 Patty Knutson

    Hi Francisco!  Just wanted to thank you SO much for this information.  It was incredibly helpful, and completely clear. 

    I had to actually set up 2 index.html’s.  WEBSITE.COM/iframe/index.html was for the first page of my app that tells them to click Like to receive a coupon for a free ebook.  That image map leads to WEBSITE.COM/iframe2/index2.html where they can click the 2nd page of my app which leads to my website where they can pick up the free ebook with the code I supplied.  It took a bit of work to figure all of this out (especially since all this stuff is completely new to me) but it works, so I’m happy!!  Had to pay for an SSL certificate in order for it to show to those of us using the https secure connection. 

    You can see it here: 
    https://www.facebook.com/VeganCoach
    or
    http://www.facebook.com/VeganCoach

    Here is my big question!! — and if you (or anyone) can answer this for me I would appreciate it — while I invite people to Like the page before clicking on the chef’s hat, it really is not totally necessary because they can click the chef’s hat anyway.  Is there a way to make it so you *must* click the Like button before the chef’s hat link works?  (Not sure if I want to be that much of a hard ass about it, but it would be nice to know if it is possible.)  Would love your thoughts.

    Either way, thanks again.  :)
    Patty

  • YourLaw.co

    Fantastic post, thank you so much.  I’m new to all of this but managed to upload my page following these instructions.  I did get a
    405 – HTTP verb used to access this page is not allowed error message so changed the file from html to php and it fixed it.
    Thanks again

    Claire

  • Steveryandevelopment

    excellent post, I am sure that took some time…thank you

  • http://www.fb-iframes.com Fb Iframes

    Hi this is a great article, i really like the way things are explained.

  • Brittney

    The ability to become a facebook developer has changed/been disabled. Can you give updated instructions for this portion. 

  • Lucas mattioneli

    How can I show a thank you page when someone like my page?

  • Tjfenna

    after ive uploaded the iframe folder with the index file it open fine on my ftp server but when i try and open my page with http:// i just get “page not found” ???

  • http://www.facebook.com/conrad.creel Conrad Creel

    Great article, bro!

  • Suchithsudharman

    i’ve the same question … pls explain step 4- uploading

  • Nick H

    Thanks for the great writeup and help!

  • http://pulse.yahoo.com/_4XAYPWBZ3DTIFBRU4ID72XXIPA Steve Chang

    I followed this but still I cannot find the “Add to my Page” link which allows me to add my app. It is not there on my page in the bottom left as you have it. Also I search for my app in the search window and it finds nothing. I did register it. I hate facebook. It’s so confusing. 

  • Stevechang64

    Do I need to submit my app to search since I can’t find it. If I click on submit to search it tells me that I need to have at least 10 active users. I don’t understand, am I writing this app for the world to use? It seems like this.

  • http://www.paulkeetch.com Paul

    Hi Francisco, first time here (found you on a Google search) and I really appreciated this complete, reader friendly article.

    Quick question… is it possible with iframes to show certain content to people who have “liked” your page and different content for those who haven’t?

    This was a very cool function of the original FBML implementation and is a great way to encourage visitors to like your page for exclusive content.

    Thanks again,
    Paul

  • Martin Carvalho

    Im getting the same problem and im already using PHP extension!

    What’s wrong with my tab?!
    http://www.midwaylabs.com.br/facebook/newsletter/

  • http://twitter.com/ABDpromotions ABD Promotions

    Great walk through!  Thanks for sharing……

  • http://creerpagefacebook.com creer page facebook

    This post was really helpfull to me, thank you!

    http://www.facebook.com/pages/Creer-une-page/124731177618005

  • Worldofmm

    Hi wanted to know if you can advise me. I have implemented Iframe and have a front cover for the landing page and when clicked you see my blog. I want people to be able to click on blog and then actually be directed to my blog- do you know how? (At the moment they have to view it in the iframe)

  • Kristan

    A quick solution is to add target=”_blank” to the href.  This will open your blog in a new window.

  • http://www.facebook.com/people/Uwe-Roeder/1204011953 Uwe Roeder

    It is so far so good, the tutorial is great, got the tip from Media Lab. They taught me webdesign as well for FB. Now the only issue, my canvas seems to be too much on the left side and all the other stuff like my own picture dosn’t show up.The menu on the left just has no space?
    Uwe

  • http://www.facebook.com/people/Uwe-Roeder/1204011953 Uwe Roeder

    It is so far so good, the tutorial is great, got the tip from Media Lab. They taught me webdesign as well for FB. Now the only issue, my canvas seems to be too much on the left side and all the other stuff like my own picture dosn’t show up.The menu on the left just has no space?Uwe

  • http://nitrotweet.com Brent

    Great tutorial! I didn’t know about image mapping, that in itself was worth the read. I have always cut images into different parts to achieve this. Luckily my Facebook page is FBML however I plan on changing it over soon so I have favorited this article or should i say guide.

    Brent
    http://www.businesslistdirectory.com

  • Mperloe

    Facebook does not like this code below in the index.php file for the app located in the directory below. It returns the error message:Warning: Division by zero in /home/grsivf/ivf.com/facebook/index.php on line 35

    Warning: include(php”) [function.include]: failed to open stream: No such file or directory in /home/grsivf/ivf.com/facebook/index.php on line 35

    Warning: include() [function.include]: Failed opening ‘php”’ for inclusion (include_path=’.:/usr/local/lib/php:/usr/local/php5/lib/pear’) in /home/grsivf/ivf.com/facebook/index.php on line 35

    from the php file
    if ($like_status) {
    include(“/index1.php”);

    }
    else {
    include(“/index2.php”);
    }

  • http://www.facebook.com/johnmanly3 John Manly

    I’ve tried just about everything I can think of, but still keep getting “405 Not Allowed.”  What am I missing here?  It’s driving me crazy.  I’ve tried renaming my index.html to index.php and even that didn’t work.

  • http://www.facebook.com/johnmanly3 John Manly

    Should mention that I’ve also tried .aspx as well…

  • Carl Lesko

    it does not say where can i get a text editor

  • Zay

    This is great information… although I am somewhat confused why you’d make an app for this since anyone can just install it onto there own facebook page but it shows only the information that is set from your website page.

  • Carla

    Joel, You ROCK! Thanks so much.  I’ll have a happy client now!

  • Carla

    Joel, You ROCK! Thanks so much.  I’ll have a happy client now!

  • Tomas

    Great article! Thank You a lot! I know this might not be a relevant question to ask but I am desperately looking for a way to add the actual “like button” in the iframe. Is it possible? Also, how to use image mapping so that when you click, lets say on a certain image, you would be directed to a website in new browser’s tab instead of opening it through facebook? Thanks!

  • Wouter Meeuwisse

    Hi Patty, that is possible! You can add a codesnippet that checks if someone ‘liked’ the page or not. If they don’t, you can use some php to disable the link. If they did, the link is enabled. For example:

    //send request
    function parsePageSignedRequest() {
    if (isset($_REQUEST['signed_request'])) {
    $encoded_sig = null;
    $payload = null;
    list($encoded_sig, $payload) = explode(‘.’, $_REQUEST['signed_request'], 2);
    $sig = base64_decode(strtr($encoded_sig, ‘-_’, ‘+/’));
    $data = json_decode(base64_decode(strtr($payload, ‘-_’, ‘+/’), true));
    return $data;
    }
    return false;
    }
    //check if someone liked or not.
     if($signed_request = parsePageSignedRequest()) {
    if($signed_request->page->liked) {
    echo “This content is for Fans only!”; //add your link here
    } else {
    echo “Please click on the Like button to view this tab!”; //add image without link here

    }
    }

    Works for me! good luck

  • Flyfishing61

    Thanks for sharing lovely and useful post .  It helped me a lot.

  • DCA

    I was getting the same error message. I had deleted the index.html bit from the page tab URL as Francisco suggested in the reply to an earlier question but I had left the preceding closing / 
    I removed that too and lo and behold, it worked!

  • Anonymous

    Paco eres un crack, gracias Pero me da el mismo problema que a srinivas

  • http://twitter.com/GCDSpa Emily Caswell

    Finally switched to iFrames from FBML. Had been dreading it, but this helped immensely! Excellent walk-through (though FB updates their layout just to screw with your screenshots, doesn’t it?). Thanks so much for taking the time to post this!

  • Paul M

    Thanks for this incredibly detailed post – it’s been a lifesaver! I have one question, though. I would like to set up an opt-in page on my Facebook profile (as you did in the example above) and then have affiliate partners send people to that page for a free report. Do you know if affiliate tracking cookies remain intact with iframes so that I can ensure my affiliates get paid accordingly? Thanks again!  

  • Flwmatthew

    This post was amazing, saved me a ton of time, and probably a few years on the end of my life. I did have a question, when I look at your facebook page and click some of the linked sections of your page it opens the mapped content in a new browser tab; however mine only opens the content in the “welcome” facebook tab. I’d prefer it to be set-up the way you have it as I have a fully functioning site that I would like to direct my facebook friends to–could you tell me how you were able to accomplish this? Thanks so much.

  • Anonymous

    thanks for the friendly write up! the layout for the app’s details is a bit different now but everything worked great!

  • Amber

    Hello! Great post. Wondering if you’ll plan to update it again since Facebook Developer site has changed their required information and with the secure canvas urls etc, I am having trouble getting the right info in the correct fields!
    Lots of late night crying on my end. :) 
    Thanks!

  • Satyanarayan Verma

    me also getting this error “Incorrect function.” Any Idea

  • Barry

    For anyone who wants to put their blog, webpage or other url page into their fanpage- the best and easiest out of the box app i have found is at http://www.webinfacebook.com or on facebook at http://www.facebook.com/apps/application.php?id=240535655988204&sk=wall

  • Aakash

    I’m facing the same problem. My iframe also just shows a GO TO FACEBOOK logo and link on it. Did you find a solution to this issue?

  • Aakash

    I’m facing the same problem. My iframe also just shows a GO TO FACEBOOK logo and link on it. Did you find a solution to this issue?

  • Motiongraphics

    Yes, I am hoping for the same thing. Great post! I think everything should have gone well except I am getting confused with all the Canvas URL, secure canvas URLs, Page URLs, etc… Please help!

  • http://www.facebook.com/thomasjosephbush Thomas Joseph Bush

    Phenomenal post, very educational – I will follow this blog after find exactly what I need in such a clear and easy to follow format.  I was wondering if there was potential to update due to the required https on October first.  I know this is accomplished with an ssl certificate, I just have not used one and do not exactly understand how.  So I guess I am making a tutorial request for an update, I’m not sure If you take requests but I feel this would benefit a lot of the previous posters.  If not, than again I would like to thank you for this post as I think you have helped many people and gained at least one follower from it, as I am light-years ahead of where I started. 

  • GerH

    Hi  Francisco,

    Thank you for taking the time to publish such a comprehensive post on this subject. I am an independent web designer based in Ireland and I am rather behind the times with the whole facebook thing (shame on me)! I now wish to customise my client’s facebook pages and I am very comfortable within the world of html and iframes. However, there is one very basic problem that I cannot get to grips with.

    Most of my clients have business facebook pages. It appears that you cannot become a developer for each business as you have to have a profile.

    Using my own personal facebook page and I have become a developer but how do I now customise pages for the third party websites? I suppose I am asking – how do I sign into my client’s facebook pages to give me edit rights with my own personal profile. I’m a bit confused (which happens a lot) and could really do with a ‘leg up’ on this one, basic as it may be.

    I thank you very much in advance of any direction you can provide and may I commend your business philosophy.

    Kind Regards – Ger

  • http://www.canvasprintsonline.com.au Canvas Prints

    Hi, Great post thanks, also managed to get the SSL worked out :) and get rid of the scrolling side bars. This has been doing my head in, so happy to have it sorted. A question though. I want to have a landing page for non-fans, then when they like the page they get sent to another page that give thems offers discount codes etc, any suggestions? Thanks a heap.

  • Rshgraphics

    This is an AWESOME post. I am a website developer and even I learned some stuff. I am a little confused though.. before when we used FBML it showed the main canvas and then a secondary canvas once you liked the Facebook page which I put a form to enter their info for the contest we hold. but now I don’t know how to take the people to the second canvas after they have liked the Facebook Page.
    Can you please help. Thanks Again.
    Scott

  • Scott

    A landing page is the page that is landed on … How do you set the tab to be the first page the user sees?

  • http://www.facebook.com/profile.php?id=535880922 Anonymous

    I set up an iFrame LIKE app. I have index1.php if you have not yet liked us, and index2.php for those who do. Index.php is the app that resides at http://www.ivf.com/facebook/index.php.

    The app seems to be set up appropriately, but does not load on the page. When I sign in to the app developer area, the info appears different than what you have on your page. How can I get this bug resolved?

  • Bakhtier

    Thank you for rocking guidelines. Just quick questions. In some pages I see tabs where you can leave a comment in it. For example in this tab (http://www.facebook.com/usdos.uzbekistan?sk=app_4949752878). How it is possible? With this feature my page could be more engaging, because I have several games in it :(( Thank you for any help. 

  • Jazzmin75

    I really like that it doesn’t involve 3rd-party apps! I hate allowing others my fans/friends private info. This way we can still maintain privacy! Thanks so much.

  • Email4shree

    Awesome and Really helpful post bro !! Kudos !! :) m/

  • Jennifercampbell3

    Thank you for your wonderful and clear tutorial for newbies like me to haven’t a clue. I’ve followed your instructions but it’s not worked and I think it might be because of the url. I saved the file on my server (i use hostgator) and copied the link which is substantially longer than yours: https://gator1623.hostgator.com:2083/frontend/x3/filemanager/index.html?dirselect=domainrootselect&domainselect=nimblewitassistant.com.au&dir=%2Fhome%2Fnimble11%2Fpublic_html&showhidden=1, if I leave it all and delete index.html its not working…am I missing something really obvious? Thanks again.
    Jen

  • Tonyb68

    Had the same problem, I think it was the text editor… loaded Dreamweaver (free for 30 days) and worked a treat

  • http://www.resistattack.com/ James Shaw

    Hmmm.. almost got there, but right at the last step I had a problem – after adding to my page. When I click on the Welcome tab I see this: 

    405 – HTTP verb used to access this page is not allowed.The page you are looking for cannot be displayed because an invalid method (HTTP verb) was used to attempt access.

  • Bryon Gunter

    This post was very helpful to see how helpful it was take a look here: http://www.facebook.com/pages/Get-Paid-To-Advertise/147164155380463?sk=app_155627541196108

  • http://twitter.com/muachunggiare1 muachunggiare

    this is good for old one and your tutorial helped me lot so but i
    created a new Fan Page but there new option and i can’t find the some
    old option so please if you can post the New tutorial for new one Thank
    You in Advance 
    http://www.citynetevents.com

  • Jstclair

    I followed your instructions, which were great.  Now I have a tab on my FB business page, but Facebook will not accept my landing page URL, saying “The og:url property should be explicitly provided, even if a value can be inferred from other tags.”  HELP!

  • Dave

    Thanks Francisco, this guide is awesome, since I read this I have created several pages with ease and without need for my web designer! It would be amazing if you could follow this up with how to turn the page into a ‘reveal’ page?

    I have tried to follow a few other guides online but they were nowhere near as good as you at simplifying the process :)

  • http://www.starsigntraits.com Lindsey

    One thing doesn’t make sense though — your page is set to 507px width, but on facebook it fills the whole 520 width?  Whatever I try, the most width I can use is 512px — and the iframe’s setup correctly.  So what code did you add to make your page go to the 520 please? 

  • Tinathedeskclerk

    Wow, I did it Thank you . My boss sent me to a social media class to learn how to do his social media you made me look good. The class was for managers/owners I am a desk clerk who loves a challenge. Thanks to you and people like you. I have managed to do thing with his social media that is well beyond the class I took. You have no idea what this has done for me personally/ career wise. 

  • http://twitter.com/jerrykhang khang dang

    The landing page works on my desktop but it takes a while to load when I
    use a non-admin account. When I look at the full Facebook site on my
    smartphone the landing page never loads. Is this due to where I have my
    images saved?
    x elerated

  • http://www.facebook.com/profile.php?id=571913853 Andrew Wilson

    Great post. It worked for a while, but now I’m getting an https error even though I have a SSL certificate installed on my server.

    https://www.facebook.com/EmozApp

  • Mark

    Awesome tutorial!! Defo would be helpful to be refreshed now the system has changed. But great job.

  • Czyryn

    I think is is already outdated. i tried to follow but more information was needed by fb. like for example a secure url is now a requirement. where do we get the https from?

  • ali shass

    I used to be
    searching for essential information on this subject. The data was important
    as Im about to launch my very own portal. Thanks for offering a missing
    hyperlink in my business.  Anyway, in
    my language, there usually are not much good supply like this.  Latin dresses Toronto

  • Cameronyoung26

    Hi!  Brilliant post.  You just saved me £80.  The only thing I am having difficulty with is the new interface compared to the screenshots.  Could you tell me how to “auto-resize”?   Thanks     http://www.facebook.com/ronyoungphoto 

  • Shoraf

    thanks…ur awesome…this guide works flawlessly…amazing work…

  • http://www.facebook.com/lorelei.layford Lorelei Layford

    iframe app is more famous than fbml app, this is very easy to operate and design any landing page. for any other facebook application pls connect our facebook apps developers.

  • Rajasekar

    Im getting following error when I access my application,405 – HTTP verb used to access this page is not allowed.The page you are looking for cannot be displayed because an invalid method (HTTP verb) was used to attempt access.Could you tell me why im getting this, thanks

  • http://twitter.com/ConsultingCumbr Ray Cumbria

    That’s pretty thorough there Mr Mouth ;-)  With Google’s new insistence on https sources for anything to be included, I was curious to know if it is possible to host the images on FB itself?

  • Amir

    hi, thanks for the great post! I have one question wich I don’t think was discussed – how do I make a “like” image live so it will actually do the like action when clicked? thanks :)

  • http://www.facebook.com/optimalbrand Jane

    This tutorial is flawed — the code doesn’t work as Facebook tuncates the width of a page to 512 pixels, not 520.  Try it and see — just upload anything over 512 pixels and you’ll get the scrollbars.  

  • http://bit.ly/qWEXNt Prom

    My problem is a bit different as I don’t have a personal profile and don’t really want one either and be associated with facebook. What you can possibly do is ask the page admin to give you editing rights by making you an admin of the page. You can then edit the page when going to it’s url. I don’t know exactly if you can do this with a personal profile but I guess as pages can’t have profiles they must be talking about personal profiles.

    Just be careful about creating pages for people as just like with everything else facebook isn’t forthcoming with how to change the main admin. If you need to do that create a gmail account first to go with it so you can then hand it over to them or ask them for an email address to create it with.

    If this was helpful you can like our page http://www.facebook.com/bblounge.co.za :)

  • http://bit.ly/qWEXNt Prom

    I already verified when creating a custom url. So I go to that page and it asks me to upgrade my account by creating a profile. I don’t really want a profile but more than that it says I can’t “start a profile for my business, band or organization.”

    But if I’m not allowed to then why doesn’t fb just disable this? I’m utterly confused as to how to create this profile facebook wants. Fb is giving me more hassles than solutions it seems.

  • http://www.facebook.com/people/Shirly-Charlie-Niv/503606797 Shirly Charlie Niv

    hey :) well great post … i got stuck at the code … i dont understand why..
    i did everything the same..

  • Mramola

    autofil

  • TN

    I have no web experience, so this was really helpful. Thanks! I still need help making my links on my FB landing page open in a new tab, instead of within the image box. Ideas?
    https://www.facebook.com/washington.policy.center

  • Amir

    Hi there and thanks for the post! My question is – how can I make a “like” icon that is a part of my picture to be connected to the application itself? in other words – I have a picture with the “like” symbol as a part of it and I want to make it “live” so that when visitors click on that logo, they would actually “like” my page… thanks!

  • http://stephaniebetesh.com Wedding Videography San Diego

    want to change it into default setting them how to do it 

  • Doc

    Hola Francisco! Thanks for this post, it was very clear and motivational for the creative stuff! Although I realize don´t have any hosting or way to upload any to an FTP :( Is that the only way? I  mean I have to pay for a hosting service in order to upload my own stuff to an FB App?
    Best regards!
    Eduardo

  • Jermeglideen

    I am SO close. I made the app and facebook says I must have a secure canvas URL (since it’s after Oct. 1), I loaded my html to web.com, how do I make it secure??

    Thanks!

  • http://www.facebook.com/bblounge.co.za Prom

    Heya Doc. No you can get free hosting. Just type it into google and you’ll get many examples. You can use any upload means they allow and with most that would be http through the control panel. As nobody will see the site outside of facebook unless you want them to you don’t even need to use your own domain.

  • Newby to Tabs

    Hi! I could really use your help. :)

    I tried creating 3 tabs for a business facebook page that each feature unique images that are saved in dropbox. The 3 tabs and their images appear when I’m an admin but only the tabs (and not the images) appear to users of the page. Do you know why this is and what I can do so that the images also appear to users of the page? 

    The url beginning with https was given as both the regular and secure tab url.

    Thanks!! :)

  • http://gadget-place.com yohan

    Thank you very much for the great post, I am gonna experiment it, if it didn’t will contact you.

  • Kate

    please advise.  go daddy ssl is working and they tell me I have to script something? xp or xt access?

    I cant even begin to find that or know waht it means unless it involves
    the actual html page in dreamweaveer. wehre I save it as https:// as well as http:// in the same file
    example load this:  http://www.kate1000.com/facebook/webpage.html and make a new one https://www.kate1000.com/facebook/webpage.html and load that also?

    please point me in the right direction.  I am a graphic designer working on web and not the coding queen by far. Thank you

  • Kate

    please advise.  go daddy ssl is working and they tell me I have to script something? xp or xt access?

    I cant even begin to find that or know waht it means unless it involves
    the actual html page in dreamweaveer. wehre I save it as https:// as well as http:// in the same file
    example load this:  http://www.kate1000.com/facebook/webpage.html and make a new one https://www.kate1000.com/facebook/webpage.html and load that also?

    please point me in the right direction.  I am a graphic designer working on web and not the coding queen by far. Thank you

  • http://www.facebook.com/bblounge.co.za Prom

    .htaccess? It’s a file in the root directory that controls how and what directories a client has access to.

  • http://www.facebook.com/bblounge.co.za Prom

    Solved. Just registered another account with a profile.

  • Jhon mgt

    Ive been meaning to read this and just never acquired a chance.  Its an issue that Im really interested in, I just started reading and Im glad I did.  Youre a terrific blogger, 1 of the finest that Ive seen.  This weblog certainly has some info on subject that I just wasnt aware of.  Thanks for bringing this things to light. 

    epicuren skincare

  • Jhon mgt

    Let me begin by saying good post. Im not sure if it has been talked about, but when utilizing Chrome I can never get the whole site to load with out refreshing many times. Might just be my computer. Thanks. 

    Glo minerals

  • Jhon mgt

    First of all, allow my family appreciate a persons command during this matter. Even though this is certainly brand new , nevertheless soon after registering your site, this intellect has exploded extensively. Allow all of us to take hold of ones rss to help keep in touch with at all probable messages Sincere understand but will pass it on to help admirers and my individual are living members 

    rhonda allison cosmetics

  • Aaron

    Great article; however I have a slight problem. I have followed your article so have a landing page, but how do I set it up so when they click ‘like’, a new page appears which can include a new image and a link to free stuff – it has taken me all day and I can’t get it!
    Thanks
    Aaron

  • Xingsu1217

    Good post! Have helped me a lot! Initially I have no ideas about iframe, now I can understand it a lot! Thx very much!

  • jbc

    I’ve come to this party
    late (both literally and figuratively) so please forgive a silly question. I’m really looking forward to trying out this technique but right out of the shoot Facebook wants lots of info about the app (Display Name, Namespace, how it will be used, url’s, secure url’s etc.)  All this even though I’ve checked that I only want to use it on a page.  What’s the best setup for this process?  Is that a post I should read first?

  • Anonymous

    All this https nonsense has really got me in a tizz. *Sigh* – Facebook, making the internet needlessly complex on a near-daily basis.

  • http://www.facebook.com/laadidatta Laadi Datta

    Hi, Amir I think you should read this link https://developers.facebook.com/docs/reference/plugins/like/

  • http://twitter.com/RuthlessButler Ruth Bilowus Butler

    this was helpful and there is an updated article here that deals with installing the app:
    http://www.hyperarts.com/blog/tutorial-add-an-iframe-application-to-your-facebook-fan-page-fall-2012/

  • http://www.blazewebstudio.co.za geoffreygordon

    Nice Francisco, great in depth tutorial. I have followed a lot of theses steps to setup my own page, but i am struggling with one concept and that is how come when i access my page via mobile it does go to the asign default tab, not can you see it anyway. Help appreciated.

  • Davegrahamdesign

    Hey Francisco,

    Just a slight glitch on my landing page. for some reason it won’t show up in Internet Explorer or Chrome. It’s only viewable in Firefox and Safari any ideas?

    Great post btw!

  • http://twitter.com/Pholiofy Pholiofy

    I love these instructions for…. the uber geek or just technically savvy. We built http://pholiofy.com so you didn’t have to learn all this (it is a great article though). And we built it on WordPress so iframe landing tabs can be belled an whistled up a bit – plus we added Google Analytics capability.

  • Rosenbed100

    Thank you so much! I have been trying to figure out iframes for a couple of weeks and then a came accross this web page and it saved my life! 

    Thank you I really appreciate it!

    Danny

  • Trevor Kuntz

    I’m REALLY new at iFrames and I’m not sure what I’ve done wrong because the landing page doesn’t show up at all on my page. I built it through image-maps, got the CSS code, modified it, and FTPd it to my site. You can see that it works fine here. 
    http://www.glowstickjunkie.com/landingpage/index.html

    I created an app in developers.facebook and this is where I’m having the problem. At first I encountered the SSL problem, so I got the SSL and I no longer get the security error, but now I just get nothing.Under “Website URL” I put “https://glowstickjunkie.com”

    Under both “Canvas URL” and “Secure Canvas URL” I put https://glowstickjunkie.com/landingpage/It says that my canvas page is http://apps.facebook.com/glowstickjunkie

    Under Page Tab URL and Secure Page Tab URL, I put http://apps.facebook.com/[CANVAS_URL/index.html

    I then went to view profile app and added the app to my page, but on my page, it just shows up as a blank page. Can someone tell me where I went wrong? Thanks!
    Trevor Kuntz

  • Trevor Kuntz

    The Canvas URL and Secure Canvas URL links are https://glowstickjunkie.com/landingpage/ 

    The It at the end in my most was from the next sentence.

  • Dodge

    Thanks for the article! Quick question… how do you hide content until a user likes your page? I knew how to do this in FBML but don’t in iFrames. Thanks!

  • Jhon mgt

    Im happy I found this blog, I couldnt discover any information on this topic matter prior to. I also run a site and if you want to ever serious in a little bit of guest writing for me if possible feel free to let me know, im always look for people to examine out my site. Please stop by and leave a comment sometime!
    eminence organics

  • Vendor2

    Set your margins and borders to 0 in your HTML and it will fit 520.

  • bop2pop

    I have a question.  I love the idea of my WordPress.com blog existing as a new tab on my Facebook Fan page. You had mentioned setting up your blog like this and was wondering if there are any instructions on how to do this. If i add /index.html to my blog, a page doesn’t display. thanks!

  • http://www.252cats.com/hospital.htm Dominican hospital Santa Cruz

    thanks for the tips i am surely using on my FB page

  • Danisk

    Nice post!!!! i have a question. Can you send me by mail this app?

  • Anonymous

    Interesting article, it helped me build a welcome tab on http://www.facebook.com/funaholic even if the layout and instructions of the facebook application pages have changed somehow… By the way, I cannot figure out how to redirect people who have clicked on the “Like” button to the Wall.

  • 154443
  • Elizabeth Laney

    Help. Facebook just turned my page into a community page. How do I tell them I am legit and represent a real business??? http://www.facebook.com/gatewaycampus

  • Karen

    Hi. I’m trying to add a link to my image using the image-map site you requested. Every time I load the image, it clears my info when I tell it to “start mapping your image”. Do you know if something is wrong with the site? Or maybe I’m missing a step? Is there another basic way to add a link to an image? Thanks!

  • MattD17

    Thanks for this post!!! I had to work around a few things but your help was the main guide to figuring all this out. Thank you!

  • Belwix_sugu

    i saw green comment box its said “raj is facebook developer” once he post comment’s.
    how its possible? just create app on facebook?

  • http://www.monessonphotography.com photo studio los angeles

    It goes without saying I also love the design of your website, incredibly imaginative.Thanks.

  • MonaLisa

    You explained everything really well, thank you. The part where I got lost though and gave up after a while was when ftp first came up. Do you happen to have a post explaining  how to set up servers etc and how to use them? Thank you for everything!

  • http://www.flowersexpert.co.uk/index.php/christmas-flowers.html Jordan

    I am absolutely amazed
    at how terrific the stuff is on this site. I have saved this webpage and I
    truly intend on visiting the site in the upcoming days. Keep up the excellent
    work!

  • http://www.todayshorsetrader.com/ Kate

    This is EXACTLY what I’ve been looking for!! Thank you SO MUCH. Just found your site today and I’ll definitely be be back.

  • Kris

    How do you make it to where the page opens to the landing page? 

  • Marin

    Hi Francisco, really nice post but opposed of your notice that the do-it-yourself platforms have limitations and by them the individuals are not able to create unique custom fan pages i would like to notice that we’ve created a powerful user friendly platform called Socialsoft with no limitation for creating custom fan pages and no programming, photoshop or design skills are needed. In other side your post is really awesome and it will be pleasure for me to share it by Tweet, FB and etc.

  • Alfonso Molina

    Hi, i followed all the steps, the app is created, but when i go to the app page, i don´t see the option to add it to another page. can somebody help?

  • Goochie002

    Hi, This is a fantastic post but I too am stuck as Facebook continue to change the backend. I would love it if you could help with the secure canvas etc on the new look facebook backend.

    Thanks again for all the tips, this is a really great post!

  • slipmatt

    The Mobile Phone option works in South Africa :)

  • Karen

    Me too.  Great instructions, but doesn’t match up with the changes facebook have made.

  • Sam

    Great guide! The only thing I’m struggling with, (and it’s quite important!), is that with the new Facebook layout I don’t see an option to view my app’s profile page, so I have no way of installing the app to my Facebook page.

    Any assistance would be greatly appreciated. Cheers.

  • Anonymous

    Thanks for sharing. Really helpful.
    http://locker4u.blogspot.com/ 

  • Podiz

    Hi! Good post but while setting up found the facebook has changed a whole lot of thing since you wrote and its a maze to navigate there yet again. Can you update it?

  • Dungol

    Great Tutorial.. I would like to know how to create a tab that just fans can see after have clicked on the like button.Thanks.

  • http://www.mspy.com/ Scott Nelson

    Thank you for another essential article. Where else could anyone get that kind of information in such a complete way of writing? I have a presentation incoming week, and I am on the lookout for such information.

  • Ruffcrib2000

    great article mate! Im just stucked with one problem.
    I have a form in the iframe, which seems to be working fine with most users, however, for some users the form’s submit button us unclickable. Im not sure why this is happening, and is there a way around it?
    http://www.facebook.com/IconicAU?sk=app_242261612516232

  • Cindy
  • http://www.facebook.com/people/Thomas-Raven/100002547277110 Thomas Raven

    Same here.  The secure canvas URL requirement has me baffled.  Not sure how to get around that.

  • Kate

    Someone told me ht or at access .  I have a ssl with godaddy and it wont work, I still have to use a third party and add url.  I was told to ” simply” script an( at or ht) access .
    I went to the page online as directed and tis way way to techy and leaves out the obvious. where to write it – (dreamweaver or text edit) do I load it ftp to the site? to my main site? to the folder with my iframes in it?
    well… does anyone know where to load this thing? If I can fiugre out how to write it ( haha)

  • Farhanahmed075

    Hello! Great work, but as you know there is no iframe check box in developer page. They change every think. How to select iframe in developer page.
    Thanks!

  • https://openid.org/lablogic fiskfisk

    Ok, I have one problem. I dont want to give FB either my cellnumber or my visa card number.. So, thats it then? No iframes for me?

  • Karen Kynell Tanboor

    Thank you so much! I have been developing web since 1995 and all I can say is there is always more to learn. I have been asking my programmers ect how do you do the FB pages? They all look at me like I am crazy. I just did my own page and it is done! YAY! Thank you this was easy and since I speak hmtl for me it was a breeze. Big Kiss!

  • http://twitter.com/MCockerham Michael Cockerham

    Really, really great post – just what I needed to help do what I wanted to do. Only one question: if I want the link that I mapped on the image to open in a new browser tab/window rather than in the iframe, how do I go about doing that?

  • T.

    Me TOO!!!

  • http://profile.yahoo.com/BK6IGQKYNE2HFFCYQO7UW56464 Shahana Parvin

    Very nice article.I think everyone get a full  information about timeline cover.If u want more then click here:href=”http://www.timelinecover.co

  • Zhuoling

    Hi,
    Great post.
    I would like to use landing page direct to my website, rather like pull my website in to iframe, because iframe is 520px wide, it only show partof site. I’d like to use landing page tos end user to my site. Could you advise how to do it?

  • Zhuoling

    Hi,
    Great post.
    I would like to use landing page direct to my website, rather like pull my website in to iframe, because iframe is 520px wide, it only show partof site. I’d like to use landing page tos end user to my site. Could you advise how to do it?

  • Whitney

    I’m completely new at this. If I wanted to put my entire website into the frame as mentioned above, would I follow the exact same steps? So far I have saved the code for the page as an html file and uploaded it to my site…is this correct? Do I just follow the same steps from there? EEk. Thank you.

  • Anonymous

    Great post. I liked this post very much. Each and every topic discussed in this blog are worth spending time and energy. The best thing about this blog is that for every topic they are providing real life example which is something that should be praised off.

  • Yatheesh Raju

    bhai look at my page i already brought the blog into facebook

    https://www.facebook.com/pages/My-Best-Favourites/208157592606583 

  • http://www.facebook.com/vincentdevriesphoto vincent

    Hi , great post! thanks

    I implemented a splaspage and a clickthrough, but I would love to click through to another app which contains my portfolio.

    Is this possible?

    Thank you! Vincent

  • Harlan

    I don’t see any place to click “Application Profile Page”.  Have they changed the way you add the app to your page?

  • C-nick

    These instructions are straight forward and easy to
    understand, but there seems to be a problem, at least for me. When I click the
    link http://www.facebook.com/developers/,
    I am directed back to my landing page, so, I can’t get to Developer website. My
    FB account is, and has been verified with a CC and PH number for some time. I
    would certainly appreciate any help that someone might provide me with this
    issue. Thank you kindly.

  • guest

    We’re having troubles with installing the app to the fb page? I understand it was changed Feb 1. Do you have instructions for that? 

  • http://www.carrotmedia.com/ Facebook App Developer

    Very nice and prominent tutorial. I’ve been absorbing all that you wrote on this topic.

  • BurnMethod

    Oh please help!  I have my image map hosted at 
    http://burnmethod.com/facebook/ and it links to my “wall” and my “photos” – The links work fine when accessed from there BUT from Facebook, the links do nothing! (The app on Facebook: 
    http://www.facebook.com/burnmethod?sk=app_349058701791487 ) What am I doing wrong? Help!

  • BurnMethod

    Err.. The problem was the target field, you must choose “_top”, in case anyone has the same issue.. I’ve fixed it =)

  • http://www.ekrexek.se/ Ek Rex Ek Webbmedia

    This seems to be an outdated “walk-through” You mus have a https (secure) domain to be able to build own landing pages. How ever this could be solved with AWS S3 Cloud. But I do belive you should update this article.

  • http://www.facebook.com/profile.php?id=100002704927573 Scott Scowcroft

    Love the article … that people are still reading it 11 months after its initial publication speaks volumes. It does need updating … including a work around (if possible) for those of us who do not have (and don’t plan on getting) the now required secure URL websites.

  • leila

    i too would like to know this! any answers yet?

  • http://bit.ly/qWEXNt Prom

     
    That is basic html. Add target=”_blank” to the link.

  • http://ajnabii.com/ Ajnabii

     wow, really nice and amazing post, i was just tried this before but not successed! finaly after reading this post i will do it :) Thanks for help.

  • Robertoeruiz

    why did you remove the comment with the link to how to add app id to your page. that was the missing part to your post???

  • http://www.carrotmedia.com/services/facebook-app-development facebook application

    it is nice and huge post 

  • http://www.carrotmedia.com/services/facebook-app-development facebook application

    it is looking long and time westing work,
    but it is very usefull,.
    thanks for sharing.

  • Crystal

    Is this all still relevant once you go to Timeline??

  • http://www.davetiye.gen.tr/ Davetiye

    thank you vrey much

  • http://www.vertexplus.com/ Software Development

    Hi Friends,

    This is an awesome article! And thank for the great post and
    I think for more implement in this you should read this links : https://developers.facebook.com/docs/reference/plugins/like/
     

  • http://www.australiastate.com/ living in australia

    I am glad to read this post its an interesting one. I am always searching for quality posts and articles and this is what I found here I hope you will be adding more in future.

  • http://www.cosmeticdentistryservices.net/ cosmetic dentistry costs

    I read some of your post and I learned a lot of knowledge from it. Thanks for posting such interesting articles.

  • http://www.moroccanoil-reviews.com/ moroccanoil reviews

    Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise.

  • http://www.leadtrends.com/ latest fashion trends

     This is so exciting and informative for me alongwith the way I have just reached here is also amazing… I know that some of people may agree with it and some don’t but you got to support the effort of an individual who work for us…. that’s the spirit we need i guess, thanks!

  • http://www.dohealthy.com/ eating healthy

    hello there and thanks for your info – I have definitely picked up something new from right here.

  • http://twitter.com/WilzDezign William Frankhouser

     It looks like you must go to the page:
    https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
    and enter the app ID and the URL of the page. Check out more info at https://developers.facebook.com/docs/appsonfacebook/pagetabs/

  • http://www.howbler.com/ Howbler.com

    Hey, you’ve got some valid points here. Great tutorial! Thanks for sharing!

  • http://pikavippiheti.com/ Holli Cornwell

    I also help entrepreneurs and small businesses turn their vanilla “web
    presence” into a profit powerhouse using techniques on social media,
    content and email marketing to generate traffic and convert to leads and
    sales.

  • http://www.socialcubix.com/services/facebook/application Custom Facebook Applications

    hmm awesome and inspirational thing to me, i am impressed by this answer.

  • http://www.creativepundits.com/ creative web design

    I appreciate your efforts made to prepare this blog for us. i found it very useful and enjoyed it.

  • http://www.lelandsiding.com/ Fawn Barclay

    I should advise you that the post is full of screenshots and it might take longer than usual for the page to load so have some patience.

  • http://softddl.com/ Teressa Abney

    I guarantee you this DIY mini-course will have you creating Facebook Tabs in a few hours!

  • http://gurjeetguri.blosgpot.com/ gurjeet singh

    nto a profit powerhouse using techniques on social media,

  • http://www.cloudbackuping.com/best-online-backup/ business online backup

    I’ll ask you to write a comment to tell me if the post was helpful

  • Chavonne Snyman

    Hi, Agree Great Post, after going through about a dozen tutorials  I havent been able to find a tutorial that matches the new facebook apps interface which doesn’t really help much in even trying to create this app. I’d be immensly over-the-moon happy if the owner could update the post to use Facebooks new Interface or assist… :(

  • http://www.vertexplus.com/ Custom Software Development

    This is definite nice tips about iFrames to build Facebook landing
    page. I really much appreciate to this information. And I will be updated with it.
     Thanks for sharing useful information.  
     

  • http://www.facebookthemes.info/ Fraces Farer

    Love this .
    thanks for the tips 

  • http://www.itechcode.com/ Amit Shaw

    Wow really great post. I love the way and its super tutorial article.
    Thanks :)

  • http://techforwards.com/ Gautam

    hi 
    Francisco, i think it’s time to create some different design for attracting new visitors. before i just create facebook pages not using this much design and application. now your tutorial give me some different design for my facebook page.
    thanks bro. 

  • http://twitter.com/nat_mach Nat

    Would be great but FB Developer site has changed and now no longer anything like your screen shots sadly.
     

  • http://www.albuquerqueflowers.info/ albquerque florist

    There is a little surprise at the end of the post so make sure you don’t miss it!

  • http://rohitsinghjain.blogspot.in/ Rohit Singh Jain

    Excellent how-to! Trying out this workshop step-by-step right away… http://bit.ly/z1DdHY

  • http://rohitsinghjain.blogspot.in/ Rohit Singh Jain

    Oh yes, it will!

  • http://rohitsinghjain.blogspot.in/ Rohit Singh Jain

    You could try alternative free open-source software too, such as Map maker on Linux.. http://bit.ly/z1DdHY

  • http://totalskinsolution.com/age-spots/best-liver-spots-treatment/ totalskinsolution

    I was actually able to do it and my landing page is now live”.

  • http://www.sashaspopcorn.com/ Laurene Calkins

    What are iFrames anyways? Is this now in the hands of super-geek
    programmers only? Can Francisco from SocialMouths write another one of
    those spectacular posts like he did with the Facebook FBML Landing Tabs?

  • http://timewarnerinternet.jimdo.com/ CW

    Hey that’s a great piece of information man! Thanks to the author who has taken so much time and given a clear step-by-step explanation of how to do it. But I have a question. What is the purpose of landing up on a page using iFrames? Can someone tell me in brief?

  • http://www.ghricko.com/ Kaylene

    Important: There is a little surprise at the end of the post so make sure you don’t miss it!

  • http://EnlacesyMarketing.com/ Fernando Rivas

    PERFECT POST! I realy enjoyed to read it ;) I need to make a perfect facebook fan page and for sure all this gonna help me ;)

  • Wanmiliani

    Hi, Im stuck with no. 4 please . Helpp!! Im using Mac and not sure of step no. 4

  • Anjan

    hey how do we connect to mailchimp you didn’t explain that bit …

  • Kayleen Bussey

    Frames because starting last week, nobody gives a crap about FBML and my superstar post is now obsolete.

    http://www.vancouver-moving.net/

  • Katlyn Settle

    I also help entrepreneurs and small businesses turn their vanilla “web
    presence” into a profit powerhouse using techniques on social media,

    http://sandiegocitylocksmith.com/

  • Pablo Estrada

    Beautiful my friend… Amazing how in this crazy lives we live, where ‘time’ is so precious and scarce, some one like you finds a way to help so many people out there how aren’t too technical and really appreciate this guidance… Buena suerte Paco, y gracias muchas. Pablo Estrada

  • http://twitter.com/Ladik_ Láďa Hrbáček

    This is INSANE! :)
    Why not to use something like this? http://www.youtube.com/watch?v=4r6NAQdUhOs

  • http://twitter.com/crufovkka Valeska Idarraga

    Unbeleivable clear and useful! I’m from Spain and gonna try it this week-end. Thanks for sharing!

  • tekinsol

    I was hunting for this since long and finally found. its really the post of the decade, the you have explained everything. really great….

  • Aarvin M S

    Hi,
    How do i use iframe in my website to load a facebook page in my website.
    Aarvin M S

  • franklyrealty

    Is this still allowed? Dying to so this with my GROUPS page.

  • LadaHrbacek

    Groups doesn’t support Tabs. You can only add tabs to Facebook Pages.

  • Michael Bian

    Excellent post ever ! I’ll make time for this to study and read it again later. Thanks for sharing! http://www.sixelevencenter.com

  • http://www.llt-group.com/seo.html JeremySeoChicago

    Excellent! Love how easy-to-use you’ve made this whole process and how customizable that everything can become!

  • Mobile Anime

    I really enjoy reading and also appreciate your work.pirater un compte facebook

  • Divvela Dileep Ajay Kumar

    Hi, I tried going through your post. But the thing facebook is updated by user screenshots am not able to understand if you can update the screenshots then we can understand easily. Thanks alot for your help. Now we are trying to create a application. the same we wants to show in facebook. Please help us.

  • sharavanakkumar

    these pages are not there now in facebook, please can u update the article with new changes in the pages made to facebook

  • journalofzoology

    Actually It seems not enough to me…. I will explain what I want, I need the script/code that paste on my webpage. and in result it show me FB whole page on my website. here is the link where I want this code to paste: http://www.journalofzoology.com/boost/boost.html
    If anyone knows…..plz tell me what to do?

  • alaanile