Using Facebook Requests to Promote a Website

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.

This entry was posted in Facebook, Facebook Development, Websites and tagged , , . Bookmark the permalink.

33 Responses to Using Facebook Requests to Promote a Website

  1. Paul says:

    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?

  2. nile says:

    okay where do i copy and paste this code in the first place?

  3. Erik says:

    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.

  4. nakres says:

    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

  5. Hi,

    I get the request IDs in the callback.

    I guess I have to use Ajax + PHP to send the actual invitations, right ?

    Slavi

  6. Oh, it seems when I removed the JS callback facebook handled the invitation process itself.

  7. Erik says:

    @Svetoslav Glad you got it working!

  8. Jeff Croft says:

    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!

  9. Erik says:

    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.

  10. Scripty says:

    Thanks Erik! You brought peace to my inner coder! :)

  11. sumi says:

    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

  12. mike says:

    Hi!
    I am trying to make it work… What is the default callback page for the application?
    Thanks,
    Mike

  13. Erik says:

    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.

  14. Saad Bashir says:

    Is there a way to change the default callback? As in define somewhere in fb.ui or somewhere else?

  15. Saad Bashir says:

    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

  16. Saad says:

    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

  17. Alexshr says:

    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.

  18. Erik says:

    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>

  19. Alec says:

    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.

  20. simon says:

    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?

  21. Jeff says:

    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 ?

  22. Erik says:

    Because all requests drive users to the canvas.

  23. Jeff says:

    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

  24. Dane Iracleous says:

    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”.

  25. Jeffrey says:

    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?

  26. What is this?
    ‘4d5da07acbbb0′

  27. Kiko says:

    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

  28. Kiko says:

    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();
    }
    }
    }
    ?>

  29. Kiko says:

    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();
    }
    }
    }
    ?>

  30. Miki says:

    Hi, how can we add our own button instead “Send Request” link
    what code should we add.
    Thanks

  31. phili says:

    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&notif_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?

  32. Andrew Ballester says:

    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…

  33. Nicole says:

    I was looking to add extra integration of facebook with my website. Is there any updated application code?
    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>