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 <fb:req-choice url="http://apps.facebook.com/facebookyoztest/" label="Go Test app" />">
<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 <fb:req-choice url="http://www.yoz.sk/phpinfo.php" label="Go Test app" />">
<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:
I’m getting this Error:
“Method Not Allowed
The request method POST is inappropriate for the URL /.”
The request form generates normaly, everything seems to be working fine but after I confirm the invitation I get this error message with the google logo on top.
Do u have an idea why this is happening?
Thanks.
Hi Alberto,
change action=”http://www.google.com” (just example usage in my code) to whatever you want facebook redirects your users to after confirming. The error message comes from google, it has nothing to do with facebook now, everything works just fine
Yes….my mistake!
Cheers. Great post!
hi! great post!
i do your steps but the only result i got was “05″, i mean nothing, just the 05
Hi Patricio,
does this one work for you? http://apps.facebook.com/facebookyoztest/ , if true, you must have missed something … if you can not figure out what send me your app link
Hello, same problema that Patricio, I am just getting “02 03 04
05 14 15 16 24 25 26″ literraly (they appears in time one after another).
A few questions besides:
1)In the step you say “make sure you setup your app correctly”, I suppuuse you mean in the facebook dev app page right? I mean, My app facebook works correctly as far it is configured, maybe should a I change something more?
Thanks in advance.
@Daniel,
- where exactly does these numbers appear?
- do they also appear on http://apps.facebook.com/facebookyoztest/ or does this app work for you?
- yes, by setup I meant facebook developer setup for your app, base domain, canvas callback etc.
Hello, thanks for your response, not they just appears int he top page, nothing more.
Anyway, I use other code and works, it is almost the same, I am going to find real difference and post it for Patricio and others.
Your app, works just fine.
Thanks you.
Hello,
I wanted to know whether it is possible to implement the above functionality in flex using graphapi?!
Thnx
;->
@pravish, inviting window content is generated by facebook and its HTML. Sure you can init redirect / iframe popup to show from flex. This does not have nothing to do with graph api nor rest api, it is fbml content.
Hi Jozef,
great series of articles.
I got your example above working just fine.
But now I want to make sense of it and call the javascript from flash.
I changed the javascript function to:
function inviteFriends()
{FB_RequireFeatures(["XFBML"], function()
…
And there is a flex button that calls this small function:
import flash.external.ExternalInterface;
public function sendInvites(event:Event):void{
ExternalInterface.call(“inviteFriends()”);}
But I cannot get it to work porperly:
I either achieve to get close to nothing besides my app content jumping a few hundered pixels downward (Firefox 3.6.3) or I manage to receive this error message (Chrome 5.0):
Object not found!
The requested URL was not found on this server.
The link on the referring page seems to be wrong or outdated.
Please inform the author of that page about the error.
If you think this is a server error, please contact the webmaster.
Am stupid for thinking that this could possibly workout?
Thank you for any words of advice.
Kind regards, Bruce
Update: I have the PopUp working in Chrome right now. Yeyh!
However the invitation(s) do not find their way to the reciepient(s).
Do you happen to know why this might be?
I do not get any sort of message. But somehow the invitations just do not get there.
Best wishes and thanks for any sort of help!
Bruce
@Bruce I do not have any idea why invotations are not send/received, its all on facebook side. Anyway I am extending this article adding iframe-popup usage
@Bruce, please follow the article additions and in flash it should be
ExternalInterface.call(“inviteFriends”)
+ do not forget to allowscriptaccess
Hi Jozef,
thank you for the instant help.
I really like the extension of the article a lot.
Anyone else experiencing that the FB popup pushes the flash movie downwards?
I wanted to let you know that I couldn’t get the Facebook users to actually receive any sort of invitations yet but I am working hard on it and will I keep you posted.
Thank you very much!
Bruce
Hi again,
I am sorry but I have one more question.
Could it be that some sort of application settings (such as authorization or the fact that the app has not yet been published/released on Facebook) prevent the invitations/notifications from being delivered properly?
Thank you very much again.
Kind regards, Bruce
@Bruce just thinking loudly if it can be the fb app setting developer mode enabled what keep invitations from beeing send?
By pushing downwards you mean visible iframe? If so, you have to add position:absolute to the iframe style
Hi Jozef – thank you.
The developer/sandbox mode setting is not enabled, if that is what you meant.
But the positioning indeed did the trick. Great!
OK. Of course it had to me being kind of stupid.
The invitations do actually get to the fb users. But they however never show up in the upper left notifications area. Instead the displayed on the lower right hand side under the Requests category.
See here for further details on the issue: http://bugs.developers.facebook.com/show_bug.cgi?id=10479
Great Tutorials/Articles/Blog/Stuff/Work!
Thanks for the hands on support and sorry for me not realizing the obvious.
Im having problems with the example, i dont know why, but the
….
I guess that the fb:serverFbml is not beeing parsed, any help about it? May it be a problem with the
FB_RequireFeatures(['XFBML'], function()
{
FB.Facebook.init(‘f02e3e23ff29f2a79c637d7213cba9ec’, ‘xd_receiver.htm’);
});
How can I ensure that is logged on?
Jozef Chúťka -> Your example works fine for me, could you help me please?
Thanks in advance, and great article!!
@Matias I guess you are missing xmlns:fb=”http://www.facebook.com/2008/fbml” in main html node
Bruce – thank you for pointing out where the invites/requests show on a users page, I have spent hours trying to work this out only to find out that my code was fine but nobody knew where to find the invitations!
Facebook should really sort that out!
Thanks.
Jozef, Im not missing the declaration, i tryed with
And works fine… i dont know the problem with my code… i have a localhost server, may it be the problem?
Regards!!
This is my code:
Clubbing Barcelona Invitation
window.onload = function()
{
FB_RequireFeatures(["XFBML"], function()
{
FB.Facebook.init(“f02e3e23ff29f2a79c637d7213cba9ec”, “./xd_receiver.htm”);
});
};
Hi this is some sample text.
tryed with:
And:
Srry by the comments :S….
I tryed with the fb:fan tag and works fine….
Regards!
Hi Jozef,
I really love your header/image-app. Cool stuff!
Is there any chance that you tell me where you got it and how to integrate it into existing pages?
thanks anyways.
best wishes and kind regards,
bruce
Q:Do you have an example of how to post an invite request via XFBML from actionscript?
Do you have to put fb:request-form in a fb:js-string and put that in a javascript popup you call from Flash via external interface?
Thank you very much,
Two
—
A: Hi Two, there is no way you can send invite notifications for now, the api method is obsolete, however you can use popup window (or javascript popup if you use javascript sdk). for popup window you can use code from invite.html in this article
Hi
Thanks for this tip. It works on almost all browsers, but Chrome for mac crashes when I try to load the invitation window over flash. Any ideas?
@Carol X., sory no ideas, you should file a bug to facebook bugzilla
Hi there, im having issue with this example, everything is working fine in firefox and chrome, but under IE8 the ‘loading’ image just appears and its loading forever and nothing more is happening, do you know solution to this problem?
nvm fixed that.
Hi Flidais, this article is 6 month old now, facebook changes its api very often and very often there are some bugs in it. I suggest you to:
1. make sure to use latest facebook javascript sdk
2. try the same application/javascript next day (yes it starts working by itself sometimes)
take a look at my invite page… nothing shows up! can someone tell me why plz?
srry the page is here
http://kisamesama.byethost13.com/invite.php
@kisamesama it seems like you have changed the invite html content, please try copy-paste my one
Hi Jozef,
really cool stuff.
Two questions though:
1) Does the method explained in this tutorial still work? I only get the invitiations window (in chrome, ie and ff NOT in safari) BUT invites are not received.
2) What for is this URL url="http://www.yoz.sk/phpinfo.php
in your invite.html (light popup version)?
Thanks a load!!!
understood it all by myself.
note to me
1. think
2. ask
…
Hi Jozef, really great article. The most useful article I have read in ages! This has helped a load. Everything works except I keep getting the error once I have sent an invite:
Method Not Allowed
The requested method POST is not allowed for the URL myServer/invite_callback.html.
Any idea what could be causing this? I get it even when my example is exactly the same as yours (apart from changing the URLs where needed). Could it be something to do with my server settings?
Thanks!
Tim
Sorry to bother you. I managed to solve the problem by changing the extension of invite_callback from .html to .php as per this article:
http://forum.dreamhosters.com/troubleshooting/39300-The-requested-method-POST-is-not-allowed.htm
Thanks again for post Jozef. Great stuff.
Hi there, thanks again for your post,
I’m facing somes issues with the light popup (iframe), if i precise “invite.html” for the src attribute of the iframe in the “index.php” nothing happens, but if i precise all the url of my site it works “http://www.matmuze.com/inivte.html” but if i do that, i have some problems in the callback script, due to cross domain.
I would like to know if it’s possible to display the invite.html in the iframe and to keep the same domain than the main app.
Thank you for your help, i’m really stuck right now.
Matt
Hi mathieu, how exactly does your crossdomain issue behaves? it should not be an issue if your iframe is on the same domain as a wrapping page. Make sure to inspect te callback result… does your main iframe contain directly your callback or is it wraped inside iframe of iframe…
Thanks for your post! Helped me a lot!
Hi Jozef,
I see that this method is iframe specific. Would it work on a canvas setup as well? if not, any clues how to achieve the popup on a canvas page?
regards,
goliatone
Hi goliatone,
canvas = iframe vs. FBML. in fbml version it should work with the same code starting from fb:request-form
Hi Jozef Chúťka,
I am creating an application for facebook and I am implementing the code to invite friends, but it redirects me, it is assumed that the code should be so or not?
action = “url of my canvas”
method = “POST”
invite = “your friends”
type = “invite”
content = “Try out my app!
url=’
I can help with this. THANKS
Hi Pinto,
here is a documentation for request-form element:
http://developers.facebook.com/docs/reference/fbml/request-form
that should clarify it
Hi Jozef
I am creating an application and I am using iframe code to invite your friends, everything works fine until you click on the button I omitted from the table some markets to invite contacts from email, no redirects me, telling me an error that: Could not find the requested page.
Look you did click on a link expired or you wrote the wrong address. Some web addresses are case-sensitive.
*
Back to home page
*
Back to previous page.
so I changed the address to which I redirect I get the same error and look at your application and now has the same error. idk if I can help with the solution of this error.
many thanks in advance and hopefully I can lend a hand with this error.
Hi David,
sory but I am not sure what is the problem, could you explain it again please?
Just make sure all your redirects goes to your domain defined within facebook settings
hi Jozef
I am creating an application and I am using iframe code to invite friends, everything works good, but when i give click on the button for skip send invitation to other friends for e-mail , no redirect to the page that I have in the section “action” on the code, in the screen show “Could not find the requested page.”
I am using the next code for redirect:
<fb:request-form
action="http://apps.facebook.com/ligabrasil/"
method="POST"
invite="true"
type="Test_de_la_app"
content='Acepta la prueba de redireccion <fb:req-choice url="http://apps.facebook.com/ligabrasil/" label="Prueba ya!."
In the configuration of the facebook, I don’t put anything in the section “advance” and “web site”.I hope this time the more clear my error, thanks
David, try making your url redirects not on facebook.com
Thanks – really great – 1.5 frustrating days are over – good job!
A~
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.
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
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”);
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?
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?
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.
PVieira I am glad you made it, please write here what was the problem with facebook settings, it may help others
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.
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
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?
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.
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
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
it is the best thing eva
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.
@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
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.
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
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
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.
Ren
would different fb:serverFbml width help you?
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?
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!
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?
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/
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.
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)
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?
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)
Nice code i got success
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!
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
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.
@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/
Thank you very much
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
500 Internal Server Error