PHP code not working on Facebook

Question

I'm using this code to merge text with an image and it's working fine. But when I use this code with Facebook app, it doesn't show any output. Can anyone please help me sorting out the problem? As far as I believe, the problem is with this line:

header("Content-Type: image/jpeg"); 

When I remove it, it shows some messed up output.

<?php 
header("Content-Type: image/jpeg"); 
$im = ImageCreateFrompng("jump_empty.png");  
$black = ImageColorAllocate($im, 255, 255, 255);
$start_x = 10; 
$start_y = 20; 
Imagettftext($im, 12, 0, $start_x, $start_y, $black, 'ambient.ttf', "hellooo"); 
Imagejpeg($im, '', 100); 
ImageDestroy($im); 
?>

Here is the code I'm using for Facebook app:

<?php
include_once 'facebook.php';
include_once 'config.php';

$facebook = new Facebook(array(
    'appId' => FACEBOOK_APP_ID,
    'secret' => FACEBOOK_SECRET_KEY,
    'cookie' => true,
    'domain' => '_____'
));
header("Content-Type: image/jpeg");
$session = $facebook->getSession();
if (!$session) {
    $url = $facebook->getLoginUrl(array(
        'canvas' => 1,
        'fbconnect' => 0,
        'req_perms' => 'read_stream,publish_stream'
    ));
    echo "<script type='text/javascript'>top.location.href = '$url';</script>";
} else {
    try {
        $uid = $facebook->getUser();
        $me  = $facebook->api('/me');
        echo "Hey " . $me['name'] . "!<br />";
        $im      = ImageCreateFrompng("jump_empty.png");
        $black   = ImageColorAllocate($im, 255, 255, 255);
        $start_x = 10;
        $start_y = 20;
        Imagettftext($im, 12, 0, $start_x, $start_y, $black, 'ambient.ttf', 'hello');
        Imagejpeg($im, '', 100);
        ImageDestroy($im);
    }
    catch (FacebookApiException $e) {
        echo "Error:" . print_r($e, true);
    }
}
?>

Answer 1

The problem is that you are trying to deliver two different content types in one page. You cannot send the image/jpeg header, telling the browser to expect an image, and then send js and or html. To accomplish this you should use two php scripts. One that sends the image/jpeg header and generates the image as you have in your first code block, and a second with normal headers that includes the first as the src of an image tag. If you want your image to be dynamic you could pass parameters to the image script as you would any php page.

Your first script lets call it image.php would then be:

<?php 

header("Content-Type: image/jpeg"); 

$im = ImageCreateFrompng("jump_empty.png");  

$black = ImageColorAllocate($im, 255, 255, 255); 

$start_x = 10; 
$start_y = 20; 

Imagettftext($im, 12, 0, $start_x, $start_y, $black, 'ambient.ttf', "hellooo"); 

Imagejpeg($im, '', 100); 

ImageDestroy($im); 

?>

Just as you had it. You second script would be:

<?php

include_once 'facebook.php';
include_once 'config.php';

$facebook = new Facebook(array(
'appId'  => FACEBOOK_APP_ID,
'secret' => FACEBOOK_SECRET_KEY,
'cookie' => true,
'domain' => '_____'
));

$session = $facebook->getSession();

if (!$session) {

$url = $facebook->getLoginUrl(array(
        'canvas' => 1,
        'fbconnect' => 0,
        'req_perms' => 'read_stream,publish_stream',

));

echo "<script type='text/javascript'>top.location.href = '$url';</script>";

} else

 {

try {
$uid = $facebook->getUser();
$me = $facebook->api('/me');
echo "Hey " . $me['name'] . "!<br />";
echo '<img src="image.php">';
}
catch (FacebookApiException $e) {
 echo "Error:" . print_r($e, true);
}
}
?>

Hope this helps.