This is the code that I'm using to load the SDK:
window.fbAsyncInit = function() {
FB.init({
appId : "<APP_ID>",
status : true,
cookie : true,
xfbml : true
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
And this is called when the user clicks the invite button:
function inviteFriends(){
FB.ui(
{
method: 'apprequests',
message: 'invites you to play'
},
function(response){ console.log(response) } // temporary to verify
)
}
The user experience is like described in https://developers.facebook.com/docs/concepts/requests/#ux , but when the receiver logs in the notification disappears after Facebook loading.
Searching for an answer, I found these:
Notification for facebook app requests not showing up
http://facebook.stackoverflow.com/questions/11279765/facebook-pagetab-request-dialogue-notification-shows-and-goes
http://facebook.stackoverflow.com/questions/9689927/ios-fb-request-dialogs-not-working-properly
http://facebook.stackoverflow.com/questions/9812572/facebook-sdk-javascript-request-dialog-disappearing-on-receiver-side
http://facebook.stackoverflow.com/questions/8823362/invite-friends-for-a-website-app-fb-ui-apprequests
http://facebook.stackoverflow.com/questions/10209281/handle-facebook-apprequest-notification
http://facebook.stackoverflow.com/questions/8979826/facebook-notification-from-my-app-appears-and-disappears
But:
sandbox mode is disabled;
the canvas app url is defined, as well as the secure canvas app url;
the app type is defined as Web.
What am I missing?
Facebook was testing what would happen if user-to-user requests did not show up on the notifications jewel. They explain it here:
https://developers.facebook.com/bugs/532388000129311
The test has apparently concluded, and things should go back to normal soon, at least for now.
This still happens when your canvas app is not properly set up. See the answer here:
Facebook notification from my app appears and disappears
Related
I have the following elements:
a facebook account
an App set up in developers.facebook.com (and added it to my user)
my own website on my server
In my website I implement via Javascript
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = '//connect.facebook.net/en_GB/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
FB.init({
appId: 'XXXXX', // here my App Id
cookie: true,
xfbml: true,
version: 'v2.9'
});
FB.AppEvents.logPageView();
};
That works fine and I can eg make calls like
FB.getLoginStatus(function(r) {
if(r.status === 'connected') {
FB.api('/ZZZZZ/campaigns',function(response) {
// do something!
console.log(response); // (§)
});
}
});
I get the following output at (§):
{"error":{"message":"Unsupported get request. Object with ID 'ZZZZZ' does not exist, cannot be loaded due to missing permissions, or does not support this operation. Please read the Graph API documentation at https://developers.facebook.com/docs/graph-api","type":"GraphMethodException","code":100,“fbtrace_id":“#########"}}
Here XXXX = my App Id, and ZZZZZ = my Business Account Id. They all definitely exist! And as the user that set it all up, my up until that stage logged in user should have all the necessary permissions.
What is going on? How do I make this work?
If you know, please try to provide me concrete code. (All the guides online that I have found are frustratingly vague, which is the reason I am posting this question here.) Thanks in advance!
Further Question: does //connect.facebook.net/.../sdk.js suffice in geneneral to interface with Business Manager via my Api? Or Do I need to download this strange Javascript API SDK und use require, and all that horribly messy stuff?
I'm working with Facebook js SDK "Go Live Dialog" for live streaming, every thing works fine until the last step when I want to publish the stream and I can't publish because there is a CORS error, it is:
XMLHttpRequest cannot load https://graph2.facebook.com/v2.5/10154376393778843?access_token=EAAOAPyi8mX....&suppress_http_code=1. Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values '*, https://www.facebook.com/', but only one is allowed. Origin 'https://www.facebook.com/' is therefore not allowed access.
the issue is due to graph2.facebook.com is sending CORS header twice:
Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: https://facebook.com/
and Google Chrome accepts only one.
I opened it as a bug on facebook but until now their answers is to "disable CORS security" on my browsers, a bad solution if I want to make my app public for every one.
The code for the app is this:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '452751035113070',
xfbml : true,
version : 'v2.8'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<button id="liveButton">Create Live Stream To Facebook</button>
<script>
document.getElementById('liveButton').onclick = function() {
FB.ui({
display: 'popup',
method: 'live_broadcast',
phase: 'create',
}, function(response) {
if (!response.id) {
alert('dialog canceled');
return;
}
console.log('stream url:' + response.secure_stream_url);
FB.ui({
display: 'popup',
method: 'live_broadcast',
phase: 'publish',
broadcast_data: response,
}, function(response) {
console.log("video status: \n" + response.status);
});
});
};
</script>
also here here: https://plnkr.co/edit/Aq0hkCTh5suXfOl6qKuN?p=preview .
To make a real try you should start an streaming using wowza or similar, if not, the publish button is disabled and the problem occurs when I click the publish button.
did someone know how to handle it to allow all users to use the script and to force them to use other browsers or to disable the security options? or I need to wait until facebook fix it?
I Disable a Chrome extension and it works.
The extension is: JetBrains IDE Support 2.0.9
this is strange because every post talk about you can't have 2 CORS directives and I think the server keeps sending 2 directives or maybe the server send just 1 and this extensions modify the headers...I don't know, but now ir works.
THis is my first time trying to use the Facebook javascript SDK so please bear with but I am having issues trying to retrieve an email address from the Facebook API. I have the code below in my site:
<script>
window.fbAsyncInit = function() {
FB.init({`enter code here`
appId : 'my id',
xfbml : true,
version : 'v2.5'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I think I have connected successfully to the api as when I add a like button for testing:
<div
class="fb-like"
data-share="true"
data-width="450"
data-show-faces="true">
</div>
it seems to load in all buttons from the api.
WHen I try to retrieve a users name however I get an error message saying "undefined". Here is my code for attempting to retrieve username
jQuery(".test123").click(function(){
FB.api(
'/me',
'GET',
{"fields":"id,name,email"},
function(response) {
alert('Your name is ' + response.name);
}
);
I've doublechecked on the Graph API and it seems im using the correct method so not sure what the problem could be and all other articles i've seen seem to make the same call or something similar and more simple like:
FB.api('/me', function(response) {
alert('Your name is ' + response.name);
});
But nothing has worked for me yet.
You need to authorize the user with FB.login first:
FB.login(function(response) {
if (response.authResponse) {
//user just authorized your app
}
}, {scope: 'email,public_profile'});
Here´s a tutorial: http://www.devils-heaven.com/facebook-javascript-sdk-login/
...and here´s the official page for FB.login: https://developers.facebook.com/docs/reference/javascript/FB.login/
Without authorization, you can´t get any user data.
I am fetching the wall post from my FB page using Javascript API as below.
$(document).ready(function(){
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxxxxxx',
xfbml : true,
version : 'v2.1'
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
//console.log('Logged in.');
}
else {
FB.login(function(response) {
if (response.authResponse) {
var access_token = FB.getAuthResponse()['accessToken'];
console.log(response);
FB.api('/153466xxxxxxxx/posts', function(response) {
console.log(response);
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: ''});
}
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
});
however, this needs the user to login and allow permissions to the app. Is it possible for me, using PHP FB SDK, to fetch the wall post from my account ONLY and show it on my webpage without asking the users to login to their Fb account.
Any help will be appreciated.
For a Facebook Page it´s quite easy, all you need is an App Access Token:
https://developers.facebook.com/docs/facebook-login/access-tokens/
http://www.devils-heaven.com/facebook-access-tokens/
The Facebook SDKs will use an App Token automatically if no user is logged in, but you can also just add the Access Token. Be careful though, don´t use the easy way to create an App token, which is just a combination of App ID and App Secret:
var accesstoken = APPID + '|' + APPSECRET;
Now if you use that one on the client with JavaScript, your App Secret will be visible to everyone, which is very bad. I would suggest using PHP for this, either with the PHP SDK or simple CURL calls. If you really want to use JavaScript only, just visit the first link i posted and check out how to generate an App Token with a Graph API call:
GET /oauth/access_token?
client_id={app-id}
&client_secret={app-secret}
&grant_type=client_credentials
For a User Profile it´s a lot harder, because you do need a User Token for that. And even an Extended User Token is only valid for 60 days. After that, you need to refresh it manually. But User Profiles should not be used for that anyway.
Is something like this possible?
I have a client launching an online magazine for his business. He wants to add a facebook like button (for the magazine fanpage) on his current corporate site and ask users to 'like it' in order to be taken to the magazine website. Can it be done? Are there drawbacks to this approach? For example, the same user will have to 'like it' every time they want to access the magazine site?
Thank you for any suggestion, I'm pretty new to facebook.
You can redirect a user on clicking a like button using the Javascript SDK and FB.Event.Subscribe
FB.Event.subscribe('edge.create', function(response) {
window.parent.location = 'http://www.google.com';
});
edge.create is called when ever a user likes something on the page
response is the url that has just been liked.
If there are multiple like buttons on the page you could use an if statement with the response to make sure the page only redirects for a particular like button
Here's the full javascript code and a like button
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
FB.Event.subscribe('edge.create', function(response) {
window.parent.location = 'http://www.google.com';
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/<?php if(isset($fb_user['locale'])){echo $fb_user['locale'];}else{echo'en_US';}?>/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<fb:like href="http://www.google.com" send="false" width="450" show_faces="true"></fb:like>