Setting up an iframe app on Facebook

Facebook iframe page created in SiteGrinderBefore we get started, I want to congratulate SiteGrinder customer Rafal Krolik, who has already created and published this cool iframe page for Seville Media Photography. Way to go, Rafal!

Now, for those of you who need a tiny bit more help, here are instructions for two different ways you can get the page you design in Photoshop and build in SiteGrinder into an iframe on your Facebook fan page and both are as easy as pie:

Note: this is part two of a two-part tutorial. Part 1 is here.

  1. Use a Facebook iframe app: This is super easy to set up, but you can’t assign your own logo as the icon for your page if you use someone else’s app for integrating your iframe with Facebook. I’ve noticed that sometimes pages using the app I chose are a little slow to load, so you might want to do a Google search and do a little legwork of your own to research other iframe apps that are available. I used the Static HTML: iframe tab app on this tab.
  2. Build your own Facebook iframe app: Sometimes when you want something done right, you have to do it yourself. That’s why you use SiteGrinder in the first place, right? So you can create your own webpages from your own Photoshop files! So why not make your own iframe app? Two cool things about this option are that you can assign your own logo for the app icon, and the page loads faster than with the pre-packaged apps, which can get bogged down because so many people are using them.The downside? This app provides a separate path for https pages, so to get it working with SSL could be arduous. I’m still watching to see what happens with that facebook bug that was making some users have trouble seeing iframe pages with https connections. I created my own app on this tab.

Let’s get to the nitty-gritty.

Use a Facebook iFrame app

If you don’t want to set up your own app (even though it’s easy-peasy), I completely understand. Here’s one that I tried that was simple to set up. I’ll walk you through how to set it up.

I used the Static HTML: iframe tabs app. Here’s how I set it up:

1. Go to the app page and click Add to My Page.

add app to your page

2. Go to your page, and click Edit Page.

Edit Page Button

3. Click Apps, then find the Static HTML: iframe tab app and click that.

Find the App

4. Give your “tab” a name.

Name your new tabFacebook technically got rid of tabs and now the different “tabs” on your facebook page, like Wall, Photos, and so forth, are accessed from the menu items below your profile picture on the left. They still act like tabs though. Go figure.

5. Link the page you built to the iframe app. Go back to the wall on your page, and click the new “tab”. The app editing screen will open in your page. (It’s a little slow, and it may take a few seconds before anything shows up.)

iframe app edit screenCheck No scrollbars (if you want), paste the code below into the edit box, and change the URL to the address of the page you created with SiteGrinder. Then click Save and view tab… and you can see what your users will see.

<html>
 <head>
 <meta http-equiv='Refresh'
 content='0; url=http://yoursite/folder/pagename.html' />
 </head>
 </html>

If you want, go to your page settings and set this to be the default landing page for visitors who come to your Facebook page.

That’s it.

Create your own FB iFrame app

1. Go to facebook.com/developers and click + Set Up New App

Set up New App

2. Give your app a name, agree to the Facebook terms of service, and click Create App.

name your app

Then fill in the captcha (you know, those weird letters where they try to make sure you are a real human being) and click Submit.

3. Fill in the basic information about your app in the About section. The cool part (to me) is that you can upload your own logo to use as an app icon. Here’s what I did to set up my new app for SiteGrinder 3 info:

my new app settings

4. Click Facebook Integration and enter the following information.

In the top portion of the page, we set the Canvas URL. Here’s where my page lives:

http://209.236.71.35/facebooksg3page/sitegrinder-facebookpage-iframe.html

The Canvas URL is everything in that link EXCEPT the last part, which is the actual name of the page. So in my case that’s:

http://209.236.71.35/facebooksg3page/


We discussed scrollbars in our previous tutorial. Make sure you click auto resize here if you don’t want them!

facebook integration screen part 1In the bottom part of the screen, we put in the name of the actual web page. This is the Tab URL. Click Save Changes when you’re done.

sitegrinder-facebookpage-iframe.html

facebook integration screen part 2

If you want, go to your page settings and set this to be the default landing page for visitors who come to your Facebook page.

That’s it.

Going Further

There’s a lot more you can do with iframes and Facebook fan pages, but we’ll come back to this topic later. Media Lab has something else cool to tell you about next week, and I’ve got to get back to working on blog posts and tutorials for that. Bwahaha! Now you’ll be plagued with anticipation all weekend.

24 comments on “Setting up an iframe app on Facebook

  1. Pingback: Easy-peasy Facebook iFrame Fan Pages with SiteGrinder 3 | Media Lab Blog

  2. I get the below message when I try to create my own face book app. I uploaded the SG3 page to a directory within the dreamcatchercafe.com website. The directory is at the URL http://www.dreamcatchercafe.com/facebook
    —————————————-
    Validation failed.

    URL must point to a directory (i.e., end with a ‘/’ or a dynamic page (i.e., have a ‘?’ somewhere).

  3. I have followed all of your steps and the page is showing but the sitegrinder overlay is showing as well. It states “This Page Requires A Server”. Can you let me know what I did wrong so I can fix it. Thank you.

    • When you deploy sites with SiteGrinder CMS, you have to open them using SiteGrinder. Since you don’t have a web hosting server installed on your hard drive, SiteGrinder simulates that function for the browser. You can open pages you’ve previously deployed from the SiteGrinder Engine window. That opens them with the Content Manager functioning as a web server. Your pages will work fine once you upload them to an actual server, and you will be able to open them in the browser without the Content Manager.

    • Also, for the iFrames, you may find it works best to deploy your pages with Local CMS only or to export static HTML and upload that for the fb page, rather than linking to the SG pages created with Remote CMS. Hope these things help.

  4. Thank you for the help. I am also confused about the scroll bars. I made the page the width you suggested but I still have scroll bars as well. Is that because of the error I am getting?

    • Which app did you use for your iframe? Some of them have a check-box for turning off scrollbars. Make sure you check for that.

  5. I am so sorry to bug you but is there a tutorial of sorts that tells us how to use our custom app as the landing page? And I have a video playing on my iframe but there is no sound. Can you give me some direction for that as well?
    Thanks again.

    • Hi, yes, it’s simple: Go to your page, click Edit Page (top right), click Manage Permissions (in the left menu), and select the iFrame page as the “Default Landing Tab:”. That’s it. It won’t change for people who already “like” you… facebook sends them to your wall automatically. But new visitors will be sent to the landing page.

  6. Hey Donna!

    Quick question. The same thing is happening on my fb page that is happening on yours – basically after you click the “like” button, your page goes blank and so does mine. I have pasted in code in the second box so that something should get revealed but it only works when i click refresh on the browser. I was wondering if it is a browser issue, a fb issue, or my issue.

    Thanks!

    • Hey Tom, I don’t know. I’m going to be out for a few days, but back Monday. I will look into it then. Did someone report this to you or did you like/unlike/like/unlike/like your page to see what happens? (Loves me, loves me not….)

      • I was checking out the fan page you did and I clicked the “like” button and noticed the screen went blank.

        So i created my own fanpage and the same thing happens. I’m using Firefox. Coincidently, it works when using Safari.

        Thanks!

    • Hi Kevin. Right now, my mind is not letting me know what a reveal tab is. I’m sure I’ll say “d’oh” but can you remind me?

  7. Hi, I have created the photoshop file…deployed it as a static site…and uploaded it next to our website on the server…outside of the public_html folder. I installed the static application to add my files but for some reason I keep getting this error message:
    Not Found

    The requested URL /BrandFacebook/index.html was not found on this server.

    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
    Apache/2.2.11 (Unix) mod_ssl/2.2.11 OpenSSL/0.9.8e-fips-rhel5 DAV/2 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635 Server at http://www.brandlabelinc.com Port 80

    CAN YOU TELL ME WHAT AM I DOING WRONG? I THOUGHT I JUST HAD TO UPLOAD THE FILES IN A FOLDER, CUT AND PASTE YOUR INFO WITH THE CORRECT FOLDER NAME AND PAGE NAME (WHICH IN MY CASE IS INDEX.HTML) AND IT WILL DISPLAY IN MY BROWSER. PLEASE HELP…I HAVE BEEN TRYING TO GET THIS THING ONLINE. SORRY, FOR THE CAPS, BUT I WANTED TO DIFFERENTIATE MY TYPING FROM THE ERROR MESSAGE. :-) )
    THANKS IN ADVANCE.
    REKA

  8. Donna, That worked great! Thank you! I had another question…how do I put a larger image for the profile logo…I see some companies have a rather long and large profile image on the top left hand side. If you know anything about that, I’d appreciate your help. Thank you!!!!

  9. Hello, I followed this tutorial long ago, It worked PERFECT! The NON scroll bar part…But after some time I had to do a new page and when I loaded it I couldn’t get rid of all the scroll bars, First i sat for two days, then realized ALL the other pages I did before is all stuck with scroll bars once again…WHY would this happen? Please if someone could help me out. I hate the scroll bars and it looks terrible.Thank you!

  10. Since the interface menu of Facebook changed, This tutorial isn’t matching the nowadays-look of Facebook Developer.

    Can u guys make a new one , with the right corresponding pics?

  11. Yes please post a new blog on how to upload to the new interface. Have been trying to figure it out forever and the blog post doesn’t help anymore.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>