I am using the fb:serverfbml tag to render a multi-friend-selector inside an IFrame.
I am using the new javascript API. I have been trying ALL DAY to get it working.
When I click on the underlines 'selected' link (to filter by the selected friends) the whole page refreshes and the selected friends disappear.
Does the multi-friend-selector just not work with the javascript API?
<fb:serverfbml>
<script type="text/fbml">
<fb:request-form action="http://apps.facebook.com/rollingrazor/" target="_top" method="POST" invite="true" type="Blah blah blah"
content="Blah blah! <fb:req-choice url="http://apps.facebook.com/rollingrazor/" label="Let me check my friends" />">
<fb:multi-friend-selector showborder="false" actiontext="Invite your friends" rows="5" cols="5" bypass="cancel" target="_top" />
</fb:request-form>
</script>
</fb:serverfbml>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function () {
FB.init({ appId: 'xxxxxxx', status: true, cookie: true,
xfbml: true
});
};
(function () {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
} ());
</script>
Can someone give me a working example using new javascript API with a multi-friend-selector?
I couldn't get it working with the new JS API so I am using the old JS API for the multi friend selector and the new one for everything else. It's annoying but according to their developer roadmap some new friend request features (hopefully an API call) will be released in June. I plan on creating my own invite widget at that point.
Related
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '197724456937488', status: true, cookie: true, xfbml: true});
// this will fire when any of the like widgets are "liked" by the user
FB.Event.subscribe('edge.create', function(response) {
document.getElementById('likepost').style.display = "";
document.getElementById('falsebox').style.display = "none";
document.getElementById('fb').style.display = "";
});
FB.Event.subscribe('edge.remove', function(response) {
console.log('This was UNliked from this page: ' + window.location);
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<div id="fb" style="display:none">
<fb:like-box href="<?php echo $detail['Post_FB'] ;?>" width="292" height="100" show_faces="false" stream="false" header="false"></fb:like-box>
</div>
<div id="link" style="display:none">
<fb:like href="http://design-pro.co.cc/appleworld/post.php?id=<?php echo $id?>" send="false" width="450" show_faces="true" font=""></fb:like>
</div>
Use this as your starting point for reference: http://developers.facebook.com/docs/reference/javascript/FB.init/
First thing to notice is how FB.init() call is wrapped in:
window.fbAsyncInit = function() {
...
};
You are already setting 'status' to true in your init call, so you should be able to subscribe to an event which will return the status value, which tells you the user's login status.
Check out: http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
Your FB.Event.subscribe(...) call should also be inside the same window.fbAsyncInit() call.
Once you verify that user is logged in, you can check for fan status. You still have to use the old REST API, since Facebook hasn't ported this over to Graph API: http://developers.facebook.com/docs/reference/rest/pages.isFan/
Please note: We are in the process of
deprecating the REST API, and will be
adding equivalent support to the Graph
API for this method. You should
continue to use this method until we
announce support in the Graph API.
Hope this points you in the right direction.
This tutorial might also help: http://thinkdiff.net/facebook/graph-api-javascript-base-facebook-connect-tutorial/
I originally posted this question on the FB Developer forums, but received no response...so figured someone here might be able to help.
When using the FB Social Plugins I have seen several articles outlining the following code (this is just a general example as the fb:like attributes can vary of course):
Code:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '#############', //configure FB App ID
status: true,
cookie: true,
xfbml: true
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="www.domain.com" show_faces="false" width="450" font="arial"></fb:like>
I am wondering the following:
1) When using most of the social plugins (Ex: Like, Activity, Recommendations, etc) is there a need to include both the full SDK script and the second script tag?
In other words could one just include the following on their site:
Code:
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="www.domain.com" show_faces="false" width="450" font="arial"></fb:like>
2) Are there any advantages of including both?
3) If you do not include the full script is there any reason to register for an App ID?
Thanks for any clarification that you may be able to provide!
Customer can sign in to my web app via normal login and facebook connect. So far so good.
<fb:login-button autologoutlink="true" perms="email,user_birthday,status_update,publish_stream"></fb:login-button> <div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: '<xsl:value-of select="$FACEBOOK_APP_ID" />', status: true,
cookie: true, xfbml: true});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
</script>
But when they come to logout, I want the customer to click on the logoff link at my website. How can I programmatically logout facebook connect? Possibly via json backend?
I don't want customer to click facebook button to logoff.
I did try out with some ways, example: to reset the facebook connect cookie created at my website and it works, but when I try to login to facebook again at second time, it fails.
I know delete cookie logout is simply not clean (fb autologoutlink=true is still showing I haven't logout.)
I can't let customer to click logout twice, I want them to use my web app logout link as a single logout controller.
I am using ASP classic. Any solution?
If the user has logged in via Facebook, call this JS snippet when the user logs out of your site (depending on how you implement logout, one possible way is to use onclick="", or if you redirect to the "logged out" template, include it there):
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR_APP_ID', status: true, cookie: true, xfbml: true});
FB.logout(function(response) {});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
You can use this simple code:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'APPID HERE', cookie:true,
status:true, xfbml:true
});
</script>
and this:
<fb:login-button autologoutlink="true" length="short" background="white" size="large" data-show-faces="true" perms="email,user_birthday,status_update,publish_stream">Login with Facebook</fb:login-button>
I have implemented Facebook Open Graph Protocol Full Integration following the Facebook developers site and here http://www.websitedesign411.com/blog/facebook-open-graph-protocol-full-integration-walkthrough.
I got the Facebook Like Buttons to show here http://giantmango.com/news using
<fb:like href="<?php the_permalink() ?>" layout="button_count" show_faces="false" width="200" action="like" colorscheme="light"></fb:like>
On the same domain, I am using the exact code, but on a different theme and the Facebook Like Buttons are not showing here http://giantmango.com/testartwork-2237
Any ideas on how to solve this problem would help very much.
It looks like you are missing your Facebook javascript initialization code.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
I have an iframe Facebook application (using Facebook's new JavaScript API) that needs to allow the user to invite their friends to the app after entering a contest. I have the following markup in a div on the page (application name and Canvas Url redacted):
<fb:serverFbml>
<fb:request-form
method="POST"
invite="true"
type="{Name of My Application}"
content='Your text goes here. %3Cfb%3Areq-choice%20url%3D%{a url-encoded link to my Canvas URL}"/>'
label="Authorize My Application">
<fb:multi-friend-selector showborder="false" actiontext="Invite your friends to use My Application.">
</fb:multi-friend-selector>
</fb:request-form>
</fb:serverFbml>
From what I understand, if you need to use FBML tags in an XFBML/iframe app, you just drop them into an fb:serverFbml element and Facebook takes care of it. Sure enough, my first impressions seem to be false. Instead of dropping in the form, I just get an empty white box, with the fbml seemingly untouched.
The design of this application assumes (probably incorrectly) that I don't need to authenticate the user to let them invite their friends. Is there a way to accomplish this, or do I need to require them to log in first? Facebook's documentation is (of course) vague on this.
EDIT: My FB.init() as requested:
$("body").prepend("<div id=\"fb-root\"></div>");
FB.init({
apiKey: "{My apiKey is here}",
appId: "{My appId is here}",
status: true,
cookie: true,
xfbml: true
});
Ok, I got it to work. Here is how it looks for me :
<fb:serverfbml>
<script type="text/fbml">
<fb:fbml>
<fb:request-form action='my_url' method='POST'
invite='true'
type='Poll'
content='This is an invitation! <fb:req-choice url="my_url" label="Accept and join" /> '>
<fb:multi-friend-selector showborder='false' actiontext='Select friends to send the poll' cols='5' rows='3' bypass='cancel' max="8">
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
and the JS injection code looks like this :
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'YOUR APP ID HERE',
status: true,
cookie: true,
xfbml: true
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
So,
1) You dont need your APP KEY, only your APP ID in the JS code.
2) The XFBML needs to be wrapped inside a SCRIPT tag.
This example works too:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"></script><fb:serverfbml>
<script type="text/fbml">
<fb:fbml>
<fb:request-form action='my_url' method='POST'
invite='true'
type='Poll'
content='This is an invitation! <fb:req-choice url="my_url" label="Accept and join" /> '>
<fb:multi-friend-selector showborder='false' actiontext='Select friends to send the poll' cols='5' rows='3' bypass='cancel' max="8">
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
Set APP_ID in http://connect.facebook.net/en_US/all.js#appId=[APP_ID]&xfbml=1