<html xmlns="http://www.w3.og/1999/xhtml" xmlns:fb="http://facebook/2008/fbml">
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
<fb:login-button onlogin="update_user_box();"></fb:login-button>
<script>
function update_user_box(){
user_box = document.getElementById("user");
user_box.InnerHtml = "<span>"
+"<fb:profile-pic uid='loggedinuser' facebook-logo=true></fb:profile-pic>"
FB.XFBML.Host.parseDomTree();
}
FB.init("APP_ID","xd_reciever.htm");
</script>
<div id="user"></div>
This is my script. Actually i want to fetch the profile picture of logged in user from facebook connect. But this is not working, I got this script from http://mashable.com/2008/12/11/facebook-connect-blog/ and i can't find what's my error. How to get it correct to work like-what i want?
This should work for you...
// assume we are already logged in
FB.init({appId: 'YOUR_APP_ID', xfbml: true, cookie: true});
function showProfile(response) {
if (response.authResponse) {
//user is already logged in and connected
var userInfo = document.getElementById('user');
FB.api('/me', function(response) {
userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name;
});
}
}
// run once with current status and whenever the status changes
FB.getLoginStatus(showProfile);
FB.Event.subscribe('auth.statusChange', showProfile);
(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);
}());
Then have two div's for the login button and for storing the profile info.
<div class="fb-login-button" autologoutlink="true"></div>
<div id="user"></div>
Related
Is there a way to use the Facebook's Video Embed xfbml.ready in a file:// protocol?
I haven't been able to use this code using that protocol, and I need to see if that is possible, since I'm developing a PhoneGap and currently is not working for me.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{APP-KEY}',
xfbml : true
});
FB.init(config);
FB.Event.subscribe('xfbml.ready', function (msg) {
console.log('READY');
};
(function() {
var e = document.createElement('script');
e.src = 'https://connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
i have two Facebook plugins(like and comment box) on my page.
when i login with on plugin it not logins another plugin automatically until i refresh page.
for example : when i login by clicking on like button,my comment box remains in logout state until i refresh page.
please suggest me something good for that problem
my code is as follow
<script>
window.fbAsyncInit = function () {
FB.init({ appId: 'My app ID', status: true, cookie: true, xfbml: true });
FB.Event.subscribe("xfbml.render", function (targetUrl) {
$("#myh1").html("Facebook Loaded");
//alert('edge.create');
setTimeout(aaa, 500);
});
FB.Canvas.setDoneLoading(function () {
alert("Done loading");
});
FB.Event.subscribe('comment.remove', function (response) {
alert('The status of the session is: ' + response.status);
});
};
(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);
} ());
function aaa() {
$("#content_1").mCustomScrollbar({
scrollButtons: {
enable: false
}
});
}
</script>
<div class="fb-like" data-send="false" data-href="http://www.facebook.com /AiLiveCaptions" data-width="298" data-show-faces="true">
</div>
<div class="fb-comments" data-href="http://www.facebook.com/AiLiveCaptions" data-num- posts="8" order_by="reverse_time" data-width="280"></div>
You can use
FB.XFBML.parse();
to render XFBML markup in a document on the fly.
FB Documentation
Is there any way to send apprequests if your application is a website?
I reported a bug on facebook http://developers.facebook.com/bugs/182553325173000 but I do not know if this is possible or not
yes you can do this by adding the JS API,
before <body> add:
<script type="text/javascript">
function inviteFriends(){
var receiverUserIds = FB.ui({
method : 'apprequests',
message: 'YOUR CUSTOM MESSAGE',
},
function(receiverUserIds) {
console.log("IDS : " + receiverUserIds.request_ids);
}
);
}
</script>
after the <body> include the API (asynchronous method):
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true //enables OAuth 2.0
});
};
(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);
}());
</script>
and call it:
or
You can do that with the Javascript SDK
it is in the documentation:
https://developers.facebook.com/docs/reference/dialogs/requests/
It's possible, as the other answers have shown, but the user will be brought to your canvas app when they accept the requests
I am using facebook credits api and using its pay method, following is my code:
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
'appId' : '<?php echo $app_id; ?>',
'session' : <?php echo json_encode($session); ?>, // don't refetch the session when PHP already has it
'status' : true, // check login status
'cookie' : true, // enable cookies to allow the server to access the session
'xfbml' : true // parse XFBML
});
// whenever the user logs in, we refresh the page
FB.Event.subscribe('auth.login', function() {
window.location.reload();
});
FB.Canvas.setAutoResize();
};
(function() {
FB_RequireFeatures(["CanvasUtil"], function() {
FB.CanvasClient.scrollTo(0, 0);
window.FB = null;
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);
});
}());
</script>
<script type="text/javascript">
function placeOrder() {
var order_info = { "title":"Music Mood Points",
"description":"Get Music Mood Points to purchase avatars",
"price":"10",
"product_url":"abc"
};
// calling the API ...
var obj = {
method: 'pay',
order_info: order_info,
purchase_type: 'item'
};
FB.ui(obj, callback);
}
var callback = function(data) {
if (data['order_id']) {
writeback("Transaction Completed! </br></br>"
+ "Data returned from Facebook: </br>"
+ "<b>Order ID: </b>" + data['order_id'] + "</br>"
+ "<b>Status: </b>" + data['status']);
} else if (data['error_code']) {
writeback("Transaction Failed! </br></br>"
+ "Error message returned from Facebook:</br>"
+ data['error_message']);
} else {
writeback("Transaction failed!");
}
};
</script>
function writeback(str) {
$('.get_points').html(str);
}
</script>
And here is button to click:
<input type="button" onclick="placeOrder();" value="GET More POINTS NOW" />
So when I click the button , it says in a facebook popup: Your application is not responding correctly.
So is there some thing missing in code or some thing that need to specify from application settings. Do any one have any idea. Any little thing you can tell is appreciated.
thanks in advance
When you place an order Facebook is making an backend call to your server (to the path set in the application setting page (under credit section).
That error means your application is not replying correctly to that initial call (there are actually two that will take place)
See http://developers.facebook.com/docs/creditsapi/
for more including sample code for your backend.
I've developed a simple website using facebook connect, and it has been working fine for the last month or so. Underneath the fb:login-button code is a fb:facepile. It has worked as expected until today, when instead of showing friend's pictures it displays the facebook homepage. Here is a screenshot of the problem http://i.stack.imgur.com/nZsbq.png
Here is the relevant code. It worked at one time, so I'm really confused what happened to cause this weird error. Any help would be greatly appreciated.
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '<?php echo $appkey; ?>', status: true, cookie: true, xfbml: true});
/* All the events registered */
FB.Event.subscribe('auth.login', function(response) {
// do something with response
login();
});
FB.Event.subscribe('auth.logout', function(response) {
// do something with response
logout();
});
};
(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);
}());
function login(){
document.location.href = "<?php echo $base_url.'/facebook/'; ?>";
}
function logout(){
document.location.href = "<?php echo $base_url.'/logout/'; ?>";
}
</script>
I cannot copy the two XFBML tags that follow the javascript. They are fb:login-button and fb:facepile
It is a reported bug but it seems that nobody at Facebook care about it. Very strange and disapointing for such big web company.
http://forum.developers.facebook.net/viewtopic.php?id=90734
You can report this bug by upvoting at the follwoing webpage :
http://bugs.developers.facebook.net/show_bug.cgi?id=15490
It looks like <fb:facepile></fb:facepile> is finally working again. The bug was marked as resolved on the Facebook bugtracker and is currently working as expected on my development server.