[FIXED] Facebook iFrame Tab Works For Me But Appears Blank To Everyone Else?

Issue

I am trying to create a custom tab for a facebook page and it works perfectly for me in firefox and internet explorer 8 in both the tab on the page and as a direct link but for others it just appears blank.

I am also an admin of the page and if I try logging in as someone else then it becomes blank for me too.

Here is my code:

require 'src/facebook.php';

// Create our Application instance (replace this with your appId and secret).
$facebook = new Facebook(array(
  'appId' => 'xxxxxxxxxxxx',
  'secret' => 'xxxxxxxxxxxxxxxxxxxxxxx',
));

$user = $facebook->getUser();

if ($user) {
try {
    $likes = $facebook->api("/me/likes/PAGEID");
    if( !empty($likes['data']) )
    {
        ?>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $('#fan').click(function() {
                $('#fan').animate({
                    opacity: 0.2,
                    width: 'auto',
                    height: 'auto'
                }, 1000, function() {
                    // Animation complete.
                    $('#fan').hide('slow');
                    $('#voucher').show('slow');
                });
            });
        });
        </script>

        <a href="#"><img id="fan" src="http://www.website.com/facebook/2011/voucher/fans_image.jpg" alt="10% off" style="border:0;" /></a>
        <div style="display:none; position:absolute; top:0; left:0;" id="voucher" >
        <a href="http://www.website.com/facebook/2011/voucher/voucher-11.pdf" target="_blank"><img src="http://www.website.com/facebook/2011/voucher/fb-voucher-dec11.jpg" style="border:0;" alt="10% off" /></a>  <br />
        <p style="text-align:center"><a href="http://www.website.com/facebook/2011/voucher/DECEMBER-11.pdf" target="_blank">Click here to download PDF version of the voucher.</a></p>
        </div>
        <?php
    }
    else
    {
        ?>
        <img style="position:absolute; top:0; left:0; border:0;" id="all" src="http://www.website.com/facebook/2011/voucher/fb_like_page.jpg" width="520" height="304" alt="Click LIKE button to get 10% off" />';
        <?php
    }
} catch (FacebookApiException $e) {
    error_log($e);
    $user = null;
    }
}

if ($user) {
    $logoutUrl = $facebook->getLogoutUrl();
} 
else {
    $loginUrl = $facebook->getLoginUrl(array(
    'scope' => 'user_likes'
    ));
}

I have developed one other Facebook app in the past that I had similar problems with but that was broke for a few hours and then all of a sudden worked.

I have been fiddling with this all day with the code and the app settings and even changed the permissions of the index.php that is being called in the iframe to 755 but it's still appearing blank :(

More Info The app is not in sandbox mode, here are the app settings:

Basic

Website: Site URL: http://www.website.com/

App on Facebook: Canvas URL: http://www.website.com/facebook/2011/discount-voucher/
               : Secure Canvas URL: https://www.website.com/facebook/2011/discount-voucher/

Page Tab: Page Tab URL: index.php
          Secure Page Tab URL: index.php

Advanced

 App Type: Web
 Deauthorize Callback: *blank*
 Sandbox Mode: Disabled

Migrations:
Remove Deprecated APIs: Enabled
Stream post URL security: Disabled
Timezone-less events: Enabled
Upgrade to Requests 2.0: Enabled
Require manage_notifications: Enabled
Include recent activity stories: Enabled
Enhanced Auth Dialog: Enabled
page_hours_format: Enabled
Graph Batch API Exception Format: Enabled

Solution

Try changing your Page Tab URL and Secure Page Tab URL to reflect actual, absolute URL's.

Answered By - Lix