attach application’s content in facebook message

facebook_platformin this post, i’ll show how will you attach your facebook application’s content like photos, link  in facebook message.

have you ever noticed, when you compose message for your friend, there is an option named “Attach”. look below image:

fb_msg_1

in the red mark, you’ll see there are some application names. its also depends on how many applications you added and how many of them are support attachment. now i’m showing an example. now i click “Give  a hug” link from “Hug Me” application link. it is showing fb_msg_2

look an animated image and a message is shown. when i click [Attach] button, it is showing fb_msg_3
look the image and message is attached with facebook compose message. now if you send this message to your friend he will see the following attachment.

do you know, how will you integrate this system in your facebook application?

it’s very simple dude…

step 1: first visit “developer” application or http://www.facebook.com/developers?ref=sb . if you’re a developer of  any app your app name will be shown here. now select your app and click “Edit Setting”.

step 2: click “Advanced” . see the image below

fb_msg_4

step 3: look there is 2 options. Attachment Text and Attachment Callback URL. Attachment Text is for “The label for your application’s link to attach content. Examples: Attach Photos, Attach Files, Share Link.
and Attachment Callback Url is for “Facebook pulls the content for your attachment interface from here”

so fill this 2 fields. remember Callback Url should be your server url not facebook app url. suppose you write a file named attach.php for this purpose and that file’s url is http://myapp.myserver.com/attach.php then place this url as Callback Url.

I’m now showing an example code here:

<?php
/*
@author: mahmud ahsan
@purpose: testing attachment for facebook message
@url: http://www.thinkdiff.net/
*/
if (isset ($_REQUEST['cmd'])){
$cmd = $_REQUEST['cmd'];
}

function checkSelect($v){
global $cmd;
if ($cmd === $v)
return "checked='true'";
return '';
}

?>
<?php  if (!array_key_exists('message_sent', $_POST) || $_POST['message_sent'] < 1) { ?>
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td><input name="cmd" type="radio" value="1" <?=checkSelect('1')?> > Image 1</td>
</tr>
<tr>
<td><input name="cmd" type="radio" value="2" <?=checkSelect('2')?> > Image 2</td>
</tr>
<tr>
<td><input name="cmd" type="radio" value="3" <?=checkSelect('3')?> > No Image</td>
</tr>
</table>
<input name="url" type="hidden" value="http://yourserverpath/attach.php">
<fb:attachment-preview>Click to preview selection!</fb:attachment-preview>

<?php } ?>

<?php
if (array_key_exists('cmd', $_POST)) {
$cmd = $_POST['cmd'];

switch($cmd){
case 1: echo "<img src='http://yourserverpath/image1.jpg' />"; break;
case 2: echo "<img src='http://yourserverpath/image2.jpg' />"; break;
default: echo "NO IMAGE";
}
}
?>

how to run this code:

  1. create a file named attach.php and copy paste this code to attach.php
  2. upload 2 image file named image1.jpg and image2.jpg  in your server and update the code by changing  http://yourserverpath/image2.jpg’
  3. also change <input name=”url” type=”hidden” value=”http://yourserverpath/attach.php”>to the url of attach.php according to your server.

now click [Save Changes] in the settings of developer application. this will updated your applications setting in facebook database.

now visit inbox/compose and check whether your attachment text is showing in Attach option or not. if it is showing then click the link and you will see like :

fb_msg_5

click attach, and this will attach the content with the message.

have a nice day :)

About mahmud ahsan

Founder And Lead Programmer at iThinkdiff.net

, , , , ,

9 Responses to attach application’s content in facebook message

  1. mahmud ahsan April 13, 2009 at 12:28 pm #

    test

  2. jitendra sherchan July 24, 2009 at 6:34 am #

    Is this the same case as the publishing to friend ‘s profile in which after clicking share button some other method is called??

    As you suggested we did all things and rendered the content to the attach box but after we click attach button nothing gets rendered under attach box…which is the actual content to be sent to friends …Do we need to call some post methods after we click the attach button just like publisher_getFeedStory in Publishing to own and friend’s wall….or Am i misinterpreting the whole thing..

    Anyways thanks for your valuable and simple tutorial for attaching something while sending messages….

  3. jitendra sherchan July 24, 2009 at 6:51 am #

    Hey Mahmud,
    Sorry mate for previous message…ur code works 100% fine…the only problem I had was wrong serverUrl…

    thanks again for the nice post..

  4. Waseem August 31, 2009 at 8:13 pm #

    I’m now working on this!

    thanks in advance :)

  5. kishore December 17, 2009 at 5:15 pm #

    I am getting Invalid Json response and code is displayed in my facebook page.

    any help in this regard?

  6. Raja January 1, 2010 at 6:49 am #

    I am also getting Invalid Json response and code is displayed in my facebook page.

  7. hibbert April 14, 2010 at 8:51 pm #

    i also get an jspon exception. will there be an update on your post to fix this?

  8. mahmud ahsan April 15, 2010 at 12:28 am #

    I’m not sure if facebook update his api or not. Please check in their documentation about it.

  9. MK Radio February 11, 2011 at 10:35 am #

    Great Code ;) Big Thx for your script !

Leave a Reply