Popup.js file:
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : ******, // App ID from the app dashboard
status : true, // Check Facebook Login status
xfbml : false // Look for social plugins on the page
});
};
// Load the SDK asynchronously
(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 = "https://connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
Manifest File:
{
"manifest_version": 2,
"name": "Charts",
"description": "Demo",
"version": "1.0",
"content_security_policy": "script-src 'self' 'unsafe-eval' https://connect.facebook.net; object-src 'self'",
"permissions": [
"https://connect.facebook.net/en_US/all.js"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
When I upload the folder which contains the files from my desktop to chrome as an extension I get to errors. However when i open the extension and inspect it i get the following errors:
"Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' https://connect.facebook.net"."
and
"Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains. about:blank:1"
Any help would be greatly appreciated.
The first error is from Chrome. You need to set content_security_policy but indeed you did. The strange is that your content_security_policy directive totally works for me:
"content_security_policy": "script-src 'self' https://connect.facebook.net; object-src 'self'",
The second error is from Facebook. Because you cant allow a "chrome-extension" pseudoprotocol in the Facebook app settings you should use a login method like this:
https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/v2.0
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.
I want to do is get basic information about a FB Page (total page likes, posts posted by the page). Using the Facebook Javascript SDK I am running into problems.
window.fbAsyncInit = function() {
FB.init({
appId: '12345', //My app id
xfbml: true,
version: 'v2.5'
});
/* make the API call */
FB.api(
"/128155725517",
'GET',
// {"fields":"id,name"},
function(response) {
if (response && !response.error) {
console.log(response);
}
}
);
};
(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'));
And the response I get is:
/**/ FB.__globalCallbacks.f1084b047c({"error":{"message":"An access token is required to request this resource.","type":"OAuthException","code":104,"fbtrace_id":"HUcIot7YeoH"}});
My question is this: Can I request from the Graph API WITHOUT a user access token? Do they have to log in to get an access token for me to read info from the Graph API? Can I create a token that will always work, no matter if the website visitor is logged into FB?
Thanks in advance.
Without login, you can only use an "App Access Token". It is just a combination of App ID and App Secret - but you should never use it in client code, of course. If the Page is restricted by age or location, you need to use a User Token or Page Token.
More information about Tokens and how to generate them:
https://developers.facebook.com/docs/facebook-login/access-tokens
http://www.devils-heaven.com/facebook-access-tokens/
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
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>