Blog Not just another WordPress weblog


iFrame on Facebook application tab

Using iFrame with Facebook is tricky. The FBML fb:iframe works only on application pages but not on the application tabs. Sometimes it is necessary to build an application that is only installable on a profile tab so it is running from within the fan page instead of a stand alone.

There are 2 main advantages of using an iFrame

  1. The CSS is not cached, so debugging and deployment is much easier
  2. Use of jQuery is POSSIBLE!

Facebook parser will generate an error in case of direct implementation of the iframe FBML on a tab. However there is a way to add the iFrame element via FBJS event. Facebook requires user interaction before any automated method execution on a profile tab. The iFrame that loads the content needs a clickable element, preferably an image of the actual frame output. When the user clicks on it, the frame loads with all it's glory!

<script type="text/javascript"><!--mce:0--></script>
<h2>TEST iFRAME</h2>
<div id="iframe_container">
	<a style="cursor: pointer;" onclick="iframe_container.setInnerFBML(iframe_link);">
		click to load iFrame<!-- the clickable element! -->

A few important points about this snippet

  1. It is FBML, so this code does not have a body tag.
  2. The JavaScript code on top is not necessary for the profile tab, but if user is viewing the actual application, this will automatically load the iframe component, else they have to click on the clickable element.
  3. It is simply loading the fb:js-string which holds the fb:iframe implementation, inside the ifrmae_container.


User ID from Facebook application installed on profile tab

Facebook platform does not give direct access to the user ID through a (Ajax or http form)post from an application installed on a profile tab(mainly fan page, Facebook removing user's profile tab soon). So application installed on a profile tab can not record user activity, can not get the user to permit the application either.

But, using the new OAuth 2.0 for canvas pages, it is pretty easy and efficient. This feature could be activated from the applications advanced settings. Once activated the platform sends only one POST variable called signed_request. I found the following code on the developer's forum. This code can re-generate the viewing user ID. If the ID is not present, the user never provided(added) the application!

function parse_signed_request($signed_request, $secret) {
 list($encoded_sig, $payload) = explode('.', $signed_request, 2); 
 // decode the data
 $sig = $this->base64_url_decode($encoded_sig);
 $data = json_decode($this->base64_url_decode($payload), true);
 if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {
  error_log('Unknown algorithm. Expected HMAC-SHA256');
  return null;
 // check sig
 $expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
 if ($sig !== $expected_sig) {
  error_log('Bad Signed JSON signature!');
  return null;
 return $data;
function base64_url_decode($input) {
 return base64_decode(strtr($input, '-_', '+/'));