Facebook is encouraging all application developers to start using Requests 2.0. This finally makes the long requested ability to share a non-Facebook page via requests possible. Personally, I’ve spent many an hour fighting with this process myself. While I did actually get it to work, it wasn’t a clean experience for the user and so I never blogged about it. Now with the new Requests 2.0, things have changed.
Here is a working example of a request on an application: These links allow you to send a request that will link back to either this post or the reveal tab post from earlier this week.
Sending the Request
<body><div id="fb-root"></div>
<a href="#" onclick="FbRequest('This page is amazing, check it out!','4d5da07acbbb0');">Send Request</a>
<script type="text/javascript">
function FbRequest(message, data){
FB.ui({method:'apprequests',message:message,data:data,title:'Share this site with your friends'},
function(response){
// response.request_ids holds an array of user ids that received the request
}
);
}
// typical application initialization code for your site
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
FB.init({
appId : '123',
session : {},
status : true,
cookie : true,
xfbml : true
});
};
</script>
</body> |
Handling the Request Response
Facebook has added an additional burden to the application to clean up after itself. This really isn’t a big deal because we can simply delete the request once we’ve processed it. I’ve added the following code at the top of the default callback page for my application, it handles cleaning up the request the user is acting on as well as redirecting the user to the appropriate page.
require_once('facebook.php'); $facebook = new Facebook(array('appId'=>'123','secret'=>'123abc456def')); // See if the page was called as part of a request click if(array_key_exists('request_ids', $_REQUEST)){ try{ $request = $facebook->api('/' . $_REQUEST['request_ids'] . '/', 'GET'); $facebook->api('/' . $_REQUEST['request_ids'] . '/', 'DELETE'); } catch (Exception $e){ $request = false; } // inspect our request to see if there were instructions if($request && array_key_exists('data', $request)){ // Look up this value $locations = array( '4d5da07acbbb0' => 'http://af-design.com/blog/2011/02/14/using-facebook-requests-to-promote-a-website/?utm_source=Facebook+request+2.0', '4d5da5a0057a0' => 'http://af-design.com/blog/2011/02/14/creating-a-facebook-reveal-tab-using-iframe/?utm_source=Facebook+request+2.0' ); $key = $request['data']; if(array_key_exists($key, $locations)){ print "<script type=\"text/javascript\">top.location.href = '{$locations[$key]}';</script>"; die(); } } } // // From here on should be your normal default canvas page action // |
Gotcha’s
Some parameters have length limits. In testing I wasn’t didn’t find a limit for the data field, but Facebook has documented the others.
- message This is what the recipient will see, it’s also displayed in the selector, Max length 255 characters
- title This is the prompt to encourage users to share this far and wide. Max 50 characters.
Updating Your App
Depending on when you created your application, this may actually be enabled already, but if your app is older, you’ll need to flip the switch.
You can also read about using filters to better tailor the experience on the official documentation.
I’m considering using the new 2.0 but I really didn’t have any issues integrating facebook with my accentudate.com site in the past so I may just wait. What were some of the issues you encountered in the past?
okay where do i copy and paste this code in the first place?
Nile, this assumes you have some background programming knowledge. The PHP file is one you create on your application server to handle the redirect process. The other code is added to whatever page you wish to put a share on.
hi, i am not a programmer and already have someone create for me to my application work on facebook last year, but i want to add more permissions, so would it be possible togo in detail where do we put this code an etc.
thank you
Hi,
I get the request IDs in the callback.
I guess I have to use Ajax + PHP to send the actual invitations, right ?
Slavi
Oh, it seems when I removed the JS callback facebook handled the invitation process itself.
@Svetoslav Glad you got it working!
Hey Erik-
Thanks so much for this. Perhaps you can help me: when my link is clicked, the Requests dialog pops up as it should, but it never loads any friends — it just continually shows Facebook’s “loading” animation. Any ideas?
Thanks again!
Jeff check that you have correctly added your website in the developer app on Facebook http://www.facebook.com/developers/ and that you have flushed your cache. Other than that I’m at a loss.
Thanks Erik! You brought peace to my inner coder!
Hi Erik,
Thank you very much for this post. I am getting the friend request popup. I am able to select the friend to send the request to.and in my friends messages it shows the new notification red signal but when I go into the actual notification there is no notification from my application. why is this happening? Any help is appreciated.
Thanks,
Sumi
Hi!
I am trying to make it work… What is the default callback page for the application?
Thanks,
Mike
The default callback is whatever you set for your Canvas URL in the Facebook App settings. You’ll need to inspect the request to differentiate it from any other Facebook Canvas requests you might be receiving for that application.
Is there a way to change the default callback? As in define somewhere in fb.ui or somewhere else?
and another thing… I have Canvas URL defined in the app settings but when a request is sent clicking on the page sends the user to no where… the url in address bar says: http://www.facebook.com/?request_ids=10150202626546136¬if_t=app_request
Hey,
Great article! Everything worked perfectly as the article said but i am having issue with the default callback.. When the script sends a request to the user.. on clicking the link the user is redirected to facebook.com/?request_ids kinda page rather than the defined callback in the app settings. Can you kindly help me with it?
Thanks,
Saad
Hello Eric,
Thanks for great post.
I tried your code, I am having one issue, when the notification shown on the friend’s side is clicked, it redirects to the call back page, but nothing renders up why is it happening did I miss anything, any help would be highly appreciated.
All:
You’ll need to set a canvas page (this will be your callback) and from there you can redirect the user to wherever you want using JavaScript. You could even use the meta-data you can store in the request to do something intelligent for the user like set where they should be directed to etc. This will handle breaking out of the Facebook chrome and redirect the user.
<script type=”text/javascript”>
top.location.href = ‘http://example.com/page/for/user’;
</script>
Designate a canvas url by checking both the “Website” and “App on Facebook” tabs under “Select how your app integrates with Facebook”. Note that they want you to designate an https url as well as of 10/1/11, but I don’t have an SSL certificate and it seems to work fine.
I used the following code on the canvas page to redirect to my actual site:
top.location = 'http://yourdomain.com';
Thanks for the straight-forward guide. I’m disappointed that they don’t give you the same response information when using the Send Dialog, but I guess that’s because they want to force you to use Request when the action will have further logic implications in your application.
So if I understand correctly, apprequests will only direct a new user to a facebook canvas. From thereon in it’s up to a bit of JS to redirect them back out to a normal webpage/an external app?
Hi Erik,
I follow your instruction, everything is working except one thing, when I indicate an URL, it always link to the app :
apps.facebook.com/accueilpapangue/
Do u know why ?
Because all requests drive users to the canvas.
I managed to get the request to the url that I want, one last thing that I want to know :
is it possible to have my own thumb in my window request ?
Thanks
Erik, I copied your code exactly and enabled 2.0 Requests, but when the user clicks the link, nothing happens and a javascript error occurs, “c is null”.
Hi,
First of all, thanks for the great tutorial! Just 1 issue, I hope I can get some help with… My request script are working fine all this while, however, just this morning, an error appears while I am testing the app.
“An error occurred with XXX. Please try again later.” I tried all sorts of ways to rectify it… could it be that facebook has blocked/banned my app?
What is this?
’4d5da07acbbb0′
Hi, what about this Facebook note:
*Note that http://www.example.com/canvas cannot forward to another URL via HTTP redirect responses, e.g. response code 301, but has to return the response directly.
How can we use on website that is not https// , or is there any way to create the canvas page within https// facebook.com
Thanks
Hi, one question?
When i add the code from below to my canvas page http://www.domain.com/canvas.php and open he source cod for this page the source is empty no code
Code i add in the canvas.php
’56756757′,’secret’=>’hrth5464h46′));
// See if the page was called as part of a request click
if(array_key_exists(‘request_ids’, $_REQUEST)){
try{
$request = $facebook->api(‘/’ . $_REQUEST['request_ids'] . ‘/’, ‘GET’);
$facebook->api(‘/’ . $_REQUEST['request_ids'] . ‘/’, ‘DELETE’);
} catch (Exception $e){ $request = false; }
// inspect our request to see if there were instructions
if($request && array_key_exists(‘data’, $request)){
// Look up this value
$locations = array(
’4d5da07acbbb0′ => ‘http://www.domain.com/?utm_source=Facebook+request+2.0′
);
$key = $request['data'];
if(array_key_exists($key, $locations)){
print “top.location.href = ‘{$locations[$key]}’;”;
die();
}
}
}
?>
Hi, one question?
When i add the code from below to my canvas page http://www.domain.com/canvas.php and open the source code for this page the source is empty no code, why is this
Code i add in the canvas.php
’5235235′,’secret’=>’c119657b8′));
// See if the page was called as part of a request click
if(array_key_exists(‘request_ids’, $_REQUEST)){
try{
$request = $facebook->api(‘/’ . $_REQUEST['request_ids'] . ‘/’, ‘GET’);
$facebook->api(‘/’ . $_REQUEST['request_ids'] . ‘/’, ‘DELETE’);
} catch (Exception $e){ $request = false; }
// inspect our request to see if there were instructions
if($request && array_key_exists(‘data’, $request)){
// Look up this value
$locations = array(
’4d5da07acbbb0′ => ‘http://www.domain.com/?utm_source=Facebook+request+2.0′
);
$key = $request['data'];
if(array_key_exists($key, $locations)){
print “top.location.href = ‘{$locations[$key]}’;”;
die();
}
}
}
?>
Hi, how can we add our own button instead “Send Request” link
what code should we add.
Thanks
As far as I can see the process works for inviting people fine.
But when they click on the link they get some code like ‘http://apps.facebook.com/app/?request_ids=307081111135298%2C287555555355580%2C316977590991758%2C320427315603&ref=notif&app_request_type=user_to_user¬if_t=app_request’ and come back to page off the app. How can I redirect to another page so I can work with this code?
This works great in the canvas for display: ‘popup’ but I cannot get display: ‘iframe’ working.
Any one else run into this? I am passing access_token to the FB.ui call…