Inviting Friends into Facebook Application (update)

Those are hard times. Facebook discontinued support for Notifications.send method March 1, 2010. Calling this method returns error code 3 (Unknown method). Instead, developers are directed to use other communication channels. From those some are not yet even a part of facebook-actionscript-api yet (dashboard) other not published from facebook (invites) and those that may work via api are experimental and may change any day (activities).

Excluding streams as communication channel, the only usable way, these days, to acquire some new facebook application users is using <Fb:request-form> (part of FBML). When your application is IFrame, you may find interesting that you are able to use FBML within your HTML files. In order to make this happen, you have to use <Fb:serverFbml> (renders the FBML on a Facebook server inside an iframe). Now, lets see how to open request form in your Facebook Iframe application:

First thing you need is Cross Domain Communication Channel file . It is simple static file, you should name it xd_receiver.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Cross-Domain Receiver Page</title>
</head>
<body>
    <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?2" type="text/javascript"></script>
</body>
</html>

now your application index.html file with request form:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
	window.onload = function()
	{
		FB_RequireFeatures(["XFBML"], function()
		{
			FB.Facebook.init("*YOUR*API*KEY*HERE*", "xd_receiver.htm");
		});
	};
</script>

<fb:serverFbml style="width: 750px;">
	<script type="text/fbml">
		<fb:fbml>
			<fb:request-form action="http://www.google.com" method="POST" invite="true" type="TestApp" 
				content="Join my app &lt;fb:req-choice url=&quot;http://apps.facebook.com/facebookyoztest/&quot; label=&quot;Go Test app&quot; /&gt;">
				<fb:multi-friend-selector showborder="false" actiontext="Invite your friends to use Test app.">
			</fb:request-form>
		</fb:fbml>
	</script>
</fb:serverFbml>
</body>
</html>

Place both files in the same folder (or specify xd_receiver.htm path correctly in FB.Facebook.init() function). Now make sure you setup your application correctly:

Canvas Callback URL: http://facebook.yoz.sk/Test/
Connect URL: http://facebook.yoz.sk/Test/
Base Domain: yoz.sk
Canvas URL: http://apps.facebook.com/facebookyoztest/
FBML/iframe: iframe
Application Type: Website

Now request form should be generated when you visit canvas url.

Important:

  • Your application must be iframe type
  • URLs used in this article are not to be used in your apps
  • This article was written and is valid on March 9, 2010

Using Invitations in light popup (iframe)

If you need to show invitation module over your application, you can use this procedure. If you plan to open iframe over flash app make sure your flash is in wmode transparent or opaque so iframe can overlay it… index.html

...
<script type="text/javascript">
<!--
	function showInvite(){
		document.getElementById('invite').style.display = 'block';
		document.getElementById('invite').src = "invite.html";
	}
		
	function hideInvite(){
		document.getElementById('invite').style.display = 'none';
		document.getElementById('invite').src = "about:blank";
	}
//-->
</script>
...
<button onclick="showInvite()">show invite</button>
<button onclick="hideInvite()">hide invite</button>
<iframe id="invite" width="584" height="513" style="display:none"></iframe>

invite.html

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
	<style type='text/css'>
	<!--
		body {margin:0px;overflow:hidden;}
		html, body {width:100%;height:100%;outline:none;}
	-->
	 </style>
</head>
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
	window.onload = function()
	{
		FB_RequireFeatures(["XFBML"], function()
		{
			FB.Facebook.init("d5702b09b56c330a5a4c85ab7b2635bd", "xd_receiver.htm");
		});
	};
</script>
<fb:serverFbml style="width: 584px;">
	<script type="text/fbml">
		<fb:fbml>
			<fb:request-form action="http://facebook.yoz.sk/testapp/invite_callback.html" method="POST" invite="true" type="TestApp"
				content="Join my app &lt;fb:req-choice url=&quot;http://www.yoz.sk/phpinfo.php&quot; label=&quot;Go Test app&quot; /&gt;">
				<fb:multi-friend-selector max="1" cols="3" rows="3" showborder="true" actiontext="Invite your friends to use Test app."/>
			</fb:request-form>
		</fb:fbml>
	</script>
</fb:serverFbml>
</body>
</html>

invite_callback.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk" dir="ltr">
<head>
	<script type="text/javascript">
	<!--
		window.parent.hideInvite();
	//-->
	</script>
</head>
<body></body>
</html>

Continue reading:

88 comments so far

  1. Andreas December 14, 2010 18:04

    Thanks – really great – 1.5 frustrating days are over – good job! 🙂
    A~

  2. PVieira December 16, 2010 15:14

    Josef,

    Just tryied many ways here but i’m having problems to make this invitation visible.

    I copy your code, only removed the buttons to show and hide invitation (i want to make those buttons inside my flash app).
    Then, i call it with: ExternalInterface.call(“inviteFriends”);

    Nothing shows up..

    In my file i have this parameters:
    var params = {
    allowScriptAccess: “sameDomain”,
    wmode: “transparent”
    };

    Everything seems ok to me, can you remember something else that’s preventing iframe from appear?

    Once again, thanks a lot.

  3. Jozef Chúťka December 16, 2010 16:36

    PVieira,
    hm make sure to import all jevascript, setup facebook app settings to your domain… in order to try javascript you do not need flash, use blank page to make your javascripts work and once all is ready insert flash

  4. PVieira December 16, 2010 17:08

    Hm.. Yes, i’ve tryed without flash and with the 2 buttons and what’s happening is that when i click on “show invite” this frame appears but it’s empty. The problem must be with invite.html right?

    In this line i have to change the first parameter?
    FB.Facebook.init(“d5702b09b56c330a5a4c85ab7b2635bd”, “xd_receiver.htm”);

  5. PVieira December 16, 2010 18:29

    The problem is really with invite.html. I’ve already changed API KEY to the one of my app.

    Tell me something Jeff, if i try to access directly invite.html the page shows blank, i can only see the javascript being called. If i copy exactly the same code from you, only changing the API KEY, it should show something, right?

  6. PVieira December 16, 2010 19:03

    I’m here from hours and still no solution.

    Is there any way to just click on my app button and show some html pop up with this friends invitation?

  7. PVieira December 16, 2010 19:44

    Idiot.. The problem was my app settings.
    Now i just need to put this working as a light popup on top of my flash app.

  8. Jozef Chúťka December 17, 2010 12:02

    PVieira I am glad you made it, please write here what was the problem with facebook settings, it may help others

  9. Pepe December 29, 2010 16:31

    Hi Jozef,
    thanks for your share
    I’ve problem about light popup version, I couldn’t show invitation page on swf or blank page. I’ve just copied your code. By changing only app key, I’m calling it with ExternalInterface.call(“functionname”) but it’s not working. Is there any app setings that i need to do for light popup invitation.

  10. Jozef Chúťka December 29, 2010 18:22

    Hi Pepe,
    you should go through !ALL! comments here I believe you will be able to find your answer. Now I do not have sufficient info about your issue… read e.g. http://blog.yoz.sk/2010/03/inviting-friends-into-facebook-application/comment-page-2/#comment-4039

  11. Tihom December 30, 2010 07:39

    Hi,

    I tried the example listed above: http://apps.facebook.com/facebookyoztest/

    If I click on the skip button or if I invite someone, I get the following error “The page you requested was not found”

    Do you have any ideas on how to fix it?

  12. Jozef Chúťka December 30, 2010 12:35

    Hi Tihom,
    here is the docs for fb:request-form http://developers.facebook.com/docs/reference/fbml/request-form , when you click skip button you should get redirected into same url as when clicked submit.

  13. Tihom December 30, 2010 21:22

    Thanks Jozef,

    Unfortunately that didn’t work.

    According to the documentation on http://developers.facebook.com/docs/reference/fbml/request-form the action field indicates “The place where a user gets redirected after submitting the form through the fb:request-form-submit button or when they click Skip this Step. By default the user is directed to http://apps.facebook.com/yourapp/null. ”Note: This default behavior may not be preserved.”

    I looked at the html source code for the example listed above: http://apps.facebook.com/facebookyoztest/

    The action field is populated with “http://www.google.com” but it doesn’t get redirected to google. It goes to “page not found”.

    From what I can tell the example doesn’t work. I am getting a similar experience on my own app.

    thanks in advance

  14. Jozef Chúťka January 3, 2011 11:38

    Tihom,
    you are right, it makes request to http://apps.facebook.com/yourapp/null that requests yourdomain.com/null inside the iframe. So, what you have to do is to create folder “null” or rewrite requests:

    GET /null?fb_sig_in_iframe=1&fb_sig_base_domain=onconference.yoz.sk&fb… HTTP/1.1
    Host: onconference.yoz.sk
    Referer: http://apps.facebook.com/onconference/null

  15. liam fairfield January 25, 2011 12:56

    it is the best thing eva

  16. Ben March 14, 2011 03:15

    the ‘action’ in fb: request form works in firefox, but otherwise it doesnt work in safari, IE, or chrome. it redirectes to a 404 in those cases , but in firefox it goes to the proper page I specified.

    not sure what to do, been working on this for a while.

  17. Jozef Chúťka March 15, 2011 10:54

    @Ben,
    this article is more than a year old now and facebook changes its api to frequently. In your case I would start with reading http://developers.facebook.com/docs/reference/fbml/request-form/

    if your action issue remains, fill the bug in facebook bugzilla

  18. Prateek March 26, 2011 10:23

    Hello,

    I tried this code fro our iframe app but it doesn’t work.Please suggest to solve it

    Here is the code

    window.onload = function () {
    FB_RequireFeatures([“XFBML”], function () {
    FB.Facebook.init(“68f297ee06dff32df49957a1e88db423”, “xd_receiver.htm”);
    });
    };

    When i call this page.it shows a blank page.
    Thanks in advance.

  19. Prateek March 26, 2011 10:26

    sorry here is the complete code.

    window.onload = function () {
    FB_RequireFeatures([“XFBML”], function () {
    FB.Facebook.init(“68f297ee06dff32df49957a1e88db423”, “xd_receiver.htm”);
    });
    };

    I have made xd_recieve.htm in the root folder.
    Thanks

  20. Jozef Chúťka March 27, 2011 10:07

    Hi Prateek,
    your code looks good. I believe you missed something elsewhere, make sure html code and attached scripts are correct, receiver placed, facebook settings correct. If still no success read carefuly the article again and go through the comments here. It just works

  21. Ren April 2, 2011 19:36

    Hi,

    I copy pasted your code and changed only the App ID. Everything works well except when you clicke the Send Invite button, parts of the right side of the popup goes behind the right column of the page.

    Thanks in advance.

  22. Jozef Chúťka April 4, 2011 10:33

    Ren
    would different fb:serverFbml width help you?

  23. Dave April 4, 2011 14:16

    Hi Jozef!

    I’m really greatful to you for this little tutorial, I managed to get it work on my own project. The only bug is, that the show invite button only works in Chrome, nor IE or FF. I’m dumbstruck right here, do you have any ideas about this bug?

  24. Ren April 4, 2011 14:35

    HI Jozef,

    Thanks for the reply. Tried experimenting with the width but no luck. Also, When I paste the code, (with the things that should be changed changed), the app gets cut off and since this is the last item in the app, this one gets cut off.

    Any ideas?

    Thanks in advance!

  25. Jozef Chúťka April 4, 2011 23:47

    Hi Dave,
    how do you know it does not work? what exactly does it mean? is it not rendered or facebook api is not called after the click?

  26. Jozef Chúťka April 4, 2011 23:50

    Ren
    can you send a screenshot? I am not sure what part is being cut. Because, what I understand is, that you do not have enough room to display form in the html page… that could be handled by css… there is also condensed version of this form:
    http://developers.facebook.com/docs/reference/fbml/multi-friend-selector_(condensed)/
    more docs:
    http://developers.facebook.com/docs/reference/fbml/multi-friend-selector/

  27. Ren April 5, 2011 00:53

    Hi Jozef,

    Here is the screenshot, it is being cut off to the right http://www.pba-online.net/invite.jpg

    I’m using it on an iframe app.

  28. Jozef Chúťka April 5, 2011 09:32

    Ren, it seems like the invitation form (iframe) is generated smaller then the popup that is rendered in it. You should make the invitation form wider:
    http://blog.yoz.sk/examples/FacebookInvitation/previewInvitation.png

    take a look at source code on
    http://apps.facebook.com/onboard_yoz_sk (click invite friends)

  29. Ren April 6, 2011 00:09

    Hi Jozef,

    Thanks for the reply.

    I will be using the invite friends functionality on a fan page which is limited to 520px.

    Is there a workaround?

  30. Jozef Chúťka April 6, 2011 20:30

    Ren, I understand… sorry, no elegant solution comes to my mind 🙁
    one not very elegant would be to define wider element size within some scrolled wrapper (div + overflow)

  31. Ranjeet Ranjan April 12, 2011 22:44

    Nice code i got success

  32. nimisha April 16, 2011 11:08

    Hi Jozef,

    Great post. I’m using the “light popup (iframe)” to display multi-friend-selector over a flash app and its working fine.

    Trying to get a list of users/number of invites that app user sent out. Any leads/examples to get something like sent_request_ids? I’m assuming I’ve to extend invite_callback.html to do more than just hide the iframe

    Thank you in advance!

  33. nimisha April 17, 2011 02:14

    Btw, I found the solution to my question above. If anyone else is interested in getting the list of invited ids in an iframe light pop-up .. you can do this – it’s pretty straight forward once you look for ‘ids’ and not ‘sent_request_ids’

    I’m more comfortable with php than html 🙂 so changed the invite_callback.html to invite_callback.php and added this,

    if (isset($_POST[‘ids’])) {
    count($_POST[‘ids’]);
    }
    I’ve to say this blog post is the best resource and should replace FB’s documentation or lack of documentation

  34. Gaurav May 4, 2011 15:25

    Thanks for all,

    But i am facing with callback problem. you can check my app on url http://apps.facebook.com/fbpagestournament/. Everythingn is working fine but the redirection of url after sending the reqest or cancel button not working fine. Please can you suggest where i am wrong. I am using both the methods suggested by you.
    you can check on
    1) http://apps.facebook.com/fbpagestournament/
    2) http://apps.facebook.com/fbpagestournament/index.html

    Please provide me appropriate solution of my problem . thanks in advance.

  35. Jozef Chúťka May 4, 2011 20:39

    @Gaurav, make sure to read documentation, there may have been some things changed:
    http://developers.facebook.com/docs/reference/fbml/request-form/ (+ html example)
    http://developers.facebook.com/docs/reference/fbml/multi-friend-selector/

  36. Nguyen Truong Thin October 3, 2011 04:12

    Thank you very much

  37. heba January 14, 2012 09:05

    hi all ,
    sorry i face a problem here . you can see no users appear
    can you help me
    http://apps.facebook.com/jazerah/
    the web site
    http://maktabat-online.org/al-jazera%20journal/index_aljazerah.html

  38. hclusEOilusEo May 10, 2012 11:01

    500 Internal Server Error

Leave a comment

Please be polite and on topic. Your e-mail will never be published.