Design, Coding, SEO and Social Media Marketing, WordPress & Facebook

In early 2010, Facebook made some modifications to the API which made the embedding of iFrames more restricted. Although they are no longer supported in Static FBML tabs, iFrames can still be implemented on application Canvas Pages. However, rather than an iFrame loading automatically — as it previously did on Canvas Pages — a user action — a click — is now required to load the iFrame.

In a PowerPoint that Facebook circulated in late 2009, Facebook explained the upcoming changes:

iFrames
Preserving iFrames (on a custom tab)
If you currently use an iFrame in your page and must preserve the content of one or more of your iFrames: Create a wrapper application that lives on a canvas page. This application can have iFrames since it sits on a canvas page. Have this light weight application include the image of what you want to display, with an “Activate” button. Link the “Activate” button to the canvas page wrapper application. More information here.

And here is that “wrapper application,” written in JavaScript:

There are two flavors of Facebook applications — iFrame and FBML — depending on whether you will render your canvas page in an iFrame or with FBML. Obviously, to embed an iFrame you’ll want to create an “iFrame” application. There are a number of resources on the Web for creating a Facebook application and, actually, it’s really not that hard. Here are several:

• Developing a Facebook App for Absolute Beginners – Emmanuele Feronato
• Facebook Application Basics
• Facebook Developer Wiki – Creating a Platform Application

Once you have created your Facebook iFrame application, you can visit your application page, if you’re logged in to your Facebook account, by going to http://www.facebook.com/developers/apps.php where you will see your application listed in the left column.

Server Requirements for hosting a Facebook Application

• Make sure your Web server supports PHP, preferably PHP5;
• You’ll need FTP access to your server so you can create a directory and add files;
• You need to download the Official Facebook PHP 5 Client Library and upload it to your server (if your server has PHP 5 — if your server has PHP 4 instead of PHP 5, download the older Client Library). Click the “Download Source” button and select either “ZIP” or “TAR” compression option in the popup window:

  

  After unpacking (unzipping) the file, install the folder “src” in a directory you create and name “facebook-platform” (not a required directory name, but a good choice) at the document-root level (eg “httpdocs” or “public_html” or “html” – the name varies) of your server (where the home page file is).

• More info is available on the Facebook Developer Wiki.

In the directory you create on your Web server for the “Canvas Callback URL” for your Facebook iFrame application, you’ll have two files:

• index.php – contains the content that will be rendered in the app;
• appinclude.php – contains some meta info about the app.

For your “index.php” file, you’ll need to render the “wrapper application” referenced above in PHP:

For the “appinclude.php”:

Regarding the above, replace “[APPLICATION API KEY]” and “[APPLICATION SECRET KEY]” with the ones generated when you create your application, and make sure your have the correct URL to the “facebook.php” file.

The “$user_id” is commented out (with the “//” preceding it) because it will cause the application not to function.

How to Hide the Activation Image or Text After User Clicks

In order to hide the activation image or text once it’s been clicked, you need to add a bit of FBML to the href, the “clicktohide” parameter. See below for how to implement this…


<?php
//
require_once 'appinclude.php';
echo '<div id="iframeLinkDiv"><a clicktohide="iframeLinkDiv" onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;"><img src="ABSOLUTE URL OF IMAGE" border="0" alt="Photobucket" /></a></div>';
echo '<div id="outside_location"></div>';
echo '<fb:js-string var="link_1">';
echo '<iframe height="660px" allowTransparency="true" frameborder="0" scrolling="yes" style="width:760px; border:none" src="ABSOLUTE URL OF IFRAMED PAGE">';
echo '</iframe>';
echo '</fb:js-string>';
echo '<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById("outside_location");
</script>';
?>


External Resources

• Facebook Application Basics
• Facebook Developer Wiki – Creating a Platform Application
• Facebook Developer Wiki – Choosing between an FBML or iFrame Application
• Facebook Developer Wiki – iFrame Applications
• Developing a Facebook App for Absolute Beginners – Emmanuele Feronato
• Tutorial – Bring It On Home

I can only offer very limited support for Facebook app development. But if you post questions here, others may be able to help out.