Can I use Facebook's fb:friend-selector in an iframe? - facebook

I'm trying to use Facebook's fb:friend-selector FBML tag, but my application is running in an iframe. Is it possible to use this tag in an iframe? If so does anyone have any examples?

Yes, this is definitely possible, but you have to use Facebook Connect and XFBML. Specifically, you want to use the fb:serverfbml tag to get fb:friend-selector working. I have an iframe app whereby I use all of this and the fb:friend-selector in the standard "invite friends to your app" context, and it works great.
Here is the body of my template file, which gets output inside the body of my iframe:
<fb:serverfbml style="width: 650px;">
<script type="text/fbml">
<fb:fbml>
<fb:request-form
action="http://example.com/invite/sent"
method="POST"
invite="true"
type="My App"
content="Try out my app!
<fb:req-choice url='http://your-facebook-canvas-url'
label='<?php echo htmlspecialchars("Accept button text",ENT_QUOTES); ?>'
/>
" >
<fb:multi-friend-selector
showborder="false"
actiontext="Invite your friends to try My App."
exclude_ids="<?php echo $excludeIds; ?>"
rows="3"
/>
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
In the footer of the page, I have the standard Facebook Connect code, which will load and render the fb:serverfbml contents:
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(
["CanvasUtil"],
function(){
FB.XdComm.Server.init('/xd_receiver.html');
FB.CanvasClient.startTimerToSizeToContent();
}
);
</script>
<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init("Your Facebook API Key", "/xd_receiver.html"); });
</script>
That should be all you need (fill in your own options where applicable, of course). You'll have to set up Facebook Connect to work with a cross-domain receiver file. I suggest following the rendering XFBML steps.

The question in this thread is still relevant but the answer is out of date. You should use the new javascript SDK. This should replace the second code snippet posted by zombat
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({appId: 'your app id',
status: true,
cookie: true,
xfbml: true});
FB.Event.subscribe('auth.sessionChange', function(response) {
if (response.session) {
// A user has logged in, and a new cookie has been saved
} else {
// The user has logged out
}
});
</script>
more info here: http://www.clickonchris.com/2010/11/facebook-javascript-sdks/

Since that are a lot of questions about the friend-selector within an iframe.
Guys the correct sintax now is <fb:serverfbml width="650px">

one MAJOR and IMPORTANT point that gets missed is that many of you (including me) stick in scripts just about anywhere... but the "FB" load.js file needs to be loaded IMMEDIATELY after the body tag.
at least this is what I found to make everything work and humm accordingly. I found it on a post on some other site (wasn't sure if I should post it here or not...) but it came after spending countless hours, doing the above aforementioned - as well as following every other 1,2, 3 step punch into getting the iframe to size properly...
and now i've gotten it to work :)

Related

Facebook Login pop-up domains, ports, and protocols must match

No matter what I do I get repeated javascript errors in chrome after the facebook-login box pops up.
I am using just the bare minimum login script provided on the FB example site. I've googled this till I'm blue in the face and can't seem to find a solution that actually works for the current version of the Javascript API. Here's my code:
My Facebook Login Page
</head>
<body>
<div id="fb-root"></div>
<script>
FB.init({
appId:'MYAPPID', cookie:true,
status:true, xfbml:true,
channelUrl:'http://www.MYDOMAIN.com/channel.html'
});
</script>
<fb:login-button>Login with Facebook</fb:login-button>
</body>
I of course have MyAPPID and myDomain with the proper info.
Any help/insight would be appreciated as this is driving me nuts and I have quite a few hours into it. Thanks all!

FB Like box only shows on one page

I have the following code to display the FB Like box in a file called notify.html.
<div id="fb-root" class="fb_like"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<fb:like-box href="http://www.facebook.com/platform" width="270" height="250" show_faces="true" border_color="black" stream="true" header="true">
</fb:like-box>
This file is included in all my other pages such that everything in notify.html shows up in a sidebar for all pages.
However, the FB like box only shows up on one page,, and that happens to be the page where I also have the FB registration form.
Why does it not show up in other pages?
The FB registration code on the one page the like box shows on is
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'0000000000000', cookie:true,
status:true, xfbml:true
});
</script>
<fb:registration
fields="[{'name':'name'},{'name':'emailEdu','description':'Your .edu Email','type':'text'},{'name':'captcha'}]"
redirect-uri="http://myurlhere.com">
</fb:registration>
You need the FB.init method once on every page you want to use the api with. If you only have the code from that first example and nothing else, its not working because you haven't initialised the FB object. On the registration code you have the FB init, which is why it suddenly starts working.
Doesn't look like you're exactly copying the FB code. From their code generator on the page you referenced, you should be including the following:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like-box href="http://www.facebook.com/platform" width="292"
show_faces="true" border_color="" stream="true" header="true"></fb:like-box>
-- but your script tag is missing the #xfbml stuff
Also use firebug or similar to see if you are getting any JS errors. Also check that you're not double loading the FB libs
Added I think the problem is that your xffbml tags are not being parsed on the other pages. Hopefully fixing the script include tag will fix it...

XFBML Send Invitation Preview Dialog Box got cut off by iframe size

i been stressed with this thing all day. so i made a invitation apps on my facebook fans page, to get people suggest or invite to their fans about my fan page.
my xfbml code are like this
<div id="fb-root" style="overflow:auto;">
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId : '2071839326xxxxx',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<fb:serverFbml width="520">
<script type="text/fbml">
<fb:request-form
action="http://www.facebook.com/pages/Nikolius-Web-Development-Tutorial/190882787595987"
method="POST"
invite="true"
type="Nikolius-Web"
content="Undang Temen bergabung di Nikolius-Web <fb:req-choice url='http://www.facebook.com/pages/Nikolius-Web-Development-Tutorial/190882787595987' label='Go' />"
>
<fb:multi-friend-selector actiontext="Undang Temen bergabung di Nikolius-Web" rows="3" cols="3" showborder="true" />
</fb:request-form>
</script>
</fb:serverFbml>
</div>
the problem is when i click the send invitation button, and a dialog confirmation comes up. the dialog box got cut off in the right side like in this picture
any ideas how to resolved this problem. when i see the manchester united fan page that have the same apps, the dialog box just show normaly. already tried this whole day but still struggle to get this right. :(
sorry for my english. hope you guys know what i mean.
FBML is being deprecated very soon. I would suggest rewriting your app using the latest Facebook APIs. It's possible that the latest dialogs don't crop while shown as a page tab app.
You can replace the width in tag fb:serverFbml width="520" to fb:serverFbml width="420" that will be work as required.

Invite a friend via Facebook is failing all of a sudden

I have the Facebook invite feature on a site that I am working on and all of a sudden it stopped working. Here is what I have:
window.fbAsyncInit = function() {
FB.init({ appId: '145554402127660', status: true, cookie: true, xfbml: true });
};
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<fb:serverFbml width="565px">
<script type="text/fbml">
<fb:fbml>
<fb:request-form method='POST' invite=true
type='Our site'
action='http://somesite.com/step3'
content='this is the place you want to be'>
<fb:multi-friend-selector cols=3
actiontext="Invite your friends to join you our site"
/>
</fb:request-form>
</fb:fbml>
</script>
</fb:serverFbml>
This worked before, but now for some reason I always get this error:
1 XFBML tags failed to render in 30000ms.
Any ideas on what is happening and why this stopped all of a sudden? Also, if there is a new way of doing this, maybe with the Graph API, I would highly appreciate info about it.
got namespace xmlns:fb="http://www.facebook.com/2008/fbml" ?
the answer is here - Facebook FXBML since Yesterday not rendering (IFRAME Canvas)
You'll have to call FB.XFBML.parse after FB.init is complete.
The newest way of doing this is through the Requests 2.0 Dialog, part of the Graph API. It's about 2 months "old". It works through the javascript API.
http://developers.facebook.com/docs/reference/dialogs/requests/
http://developers.facebook.com/blog/post/464

XD Proxy Facebook

I am using the facebook connect to login into my website.
In my html page i writen the code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test JOpenID </title>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'180065668680582',
cookie:true,
status: true,
xfbml:true
});
</script>
<fb:login-button perms="email,user_checkins">
Login with Facebook
</fb:login-button>
</body>
</html>
So when i click on Login with Facebook button a window pop up and ask to fill the username and password. Till this time everything works properly. Problem persist when i click allow button to enter into the destination web-site. A pop up window appear and disappear also. The till of the window was XD proxy and at the url it is ::
http://static.ak.fbcdn.net/connect/xd_proxy.php#cb=f183a80ac008141&origin=http%3A%2F%2F174.129.214.219%2Fff715e2f856e19&relation=opener&transport=flash&frame=f1d4f8afdf94ebe&result=%7B%22perms%22%3A%22email%2Cuser_checkins%22%2C%22selected_profiles%22%3A100001492618815%2C%22session%22%3A%22%7B%5C%22session_key%5C%22%3A%5C%222.pRXlnxq8Ig6QwZyJsG732w__.3600.1294326000-100001492618815%5C%22%2C%5C%22uid%5C%22%3A%5C%22100001492618815%5C%22%2C%5C%22expires%5C%22%3A1294326000%2C%5C%22secret%5C%22%3A%5C%225pe7qxMU_7DitJucmcyftA__%5C%22%2C%5C%22access_token%5C%22%3A%5C%22180065668680582%7C2.pRXlnxq8Ig6QwZyJsG732w__.3600.1294326000-100001492618815%7C_QjDI7eTUD32QVvapbsqxn-r4DE%5C%22%2C%5C%22sig%5C%22%3A%5C%22aa66a1d8b234ebe863e386bb8a6520e7%5C%22%7D%22%7D
As per my requirement is concerned i need after allow the facebook is should allow me to enter to the destination site which i already registered. But it only onen a window and disappear in a second.
What is the issue and how to solve tell me in details...
Thanks
don't use
FB.init({ apiKey: 'API_KEY' });
and use
FB.init({ appId: 'APP_ID', status: true, cookie: true, xfbml: true });
To fix it in Opera, just att the following after FB.init():
if($.browser.opera ) // it uses jQuery library here!
{
FB.XD._transport="postmessage";
FB.XD.PostMessage.init();
}
I've been experiencing the same issue in IE9, and it seemed to stem from upgrading to Flash Player 10. I'd lost hope in trying to fix it since finding an open bug at Facebook covering it. But Henson has posted an answer that fixed it for me. In the JavaScript in my site master I removed the lines
FB.UIServer.setLoadedNode = function (a, b) {
//HACK: http://bugs.developers.facebook.net/show_bug.cgi?id=20168
FB.UIServer._loadedNodes[a.id] = b;
};
and now it works. (N.B. I have not checked to see if the IE8 issue those lines were intended to overcome returns.)