Can you spot my error?
I'm really struggling to get an open graph action approved. I want people to Share (Action) a Photo (Object) and have requested the user message and explicitly shared functions. The latest comment I have had back from Facebook is this:
We are unable to test this action due to an error within your app.
Please make sure that your action functions correctly by testing with
the Auth Dialog Preview User and re-submit.
Not very helpful!
I have tested my action with the Auth Dialog Preview User and it worked fine. I have also tested my page with the object debugger which returned the response code 200 - which apparently means all is fine (is that correct?).
Below is the code I am using on my test page and was hoping someone would be able to point out where my errors are as I can't see it:
<head>
meta tags here
<script type="text/javascript">
function Share()
{
FB.api(
'/me/NAMESPACE:share&photo=TEST PAGE URL&message=Cool photos&fb:explicitly_shared=true&access_token=ACCESS TOKEN','POST', function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setAutoGrow();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize({ width: 810, height: 1180 });
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
// Init the SDK upon load
window.fbAsyncInit = function() {
FB.init({
appId : 'APP ID', // App ID
channelUrl : '//CHANNEL FILE URL', // Path to your Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth :true
});
// listen for and handle auth.statusChange events
FB.Event.subscribe('auth.statusChange', function(response) {
if (response.authResponse) {
// user has auth'd your app and is logged into Facebook
FB.api('/me', function(me){
if (me.name) {
document.getElementById('auth-displayname').innerHTML = me.name;
}
})
document.getElementById('auth-loggedout').style.display = 'none';
document.getElementById('auth-loggedin').style.display = 'block';
} else {
// user has not auth'd your app, or is not logged into Facebook
document.getElementById('auth-loggedout').style.display = 'block';
document.getElementById('auth-loggedin').style.display = 'none';
}
});
// respond to clicks on the login and logout links
document.getElementById('auth-loginlink').addEventListener('click', function(){
FB.login();
});
document.getElementById('auth-logoutlink').addEventListener('click', function(){
FB.logout();
});
}
function loginUser() {
FB.login(function(response) { }, {scope:'publish_actions, email'});
}
</script>
<div id="auth-status">
<div id="auth-loggedout">
<img src="login_btn.png">
</div>
<div id="auth-loggedin" style="display:none">
</div>
</div>
<form>
<input class="shr-btn" type="button" value="" onClick="Share()" />
</form>
</body>
Any help would be gratefully received.
Many thanks
D
Aaarrggh. I've now had this response from Facebook:
Your code is currently configured to publish a stream story. You must
change your code so that when the test user triggers the action it
produces an open graph story. Please make the appropriate changes and
resubmit.
Can someone please let me know what I am doing wrong? I thought the code was set up to publish an open graph story - but apparently now.
If someone could point out what I am doing wrong I would be eternally grateful.
Many thanks.
D
This seems to have more to do with how you're passing in the additional parameters in this line:
'/me/NAMESPACE:share&photo=TEST PAGE URL&message=Cool photos&
fb:explicitly_shared=true&access_token=ACCESS TOKEN','POST', function(response)
You really want to do something more like:
FB.api('/me/NAMESPACE:share', 'post',
{ photo : 'TEST_PAGEURL', message : 'Cool photos' }, function(response));
The important thing here is to include your custom JSON content as the third parameter to the function. It seems like the URL parameters method might be triggering that sort of message, since it's an older implementation.
No, it is not because you are creating a story using the verb "share." I just got a story approved by Facebook where I used the verb "share." And my story was rejected earlier for the same reason as yours.
Basically you cannot post something to an album or any other kind of post when you are using an open graph story. For example the following is not allowed:
$data = $facebook->api('/me/photos', 'post', $args);//disallowed
$facebook->api(
'me/invig-test:share',
'POST',
array(
'app_id' => $configParam['appId'],
'type' => "test:photo",
'photo' => "http://samples.ogp.me/574859819237737",
'title' => "a photo",
'image[0][url]'=>"http://www.testapp.com/".$imgFile,
'image[0][user_generated]'=>'true',
'message' => $comments,
'fb:explicitly_shared'=>true,
)
);
Instead only do the "share":
$facebook->api(
'me/invig-test:share',
'POST',
array(
'app_id' => $configParam['appId'],
'type' => "test:photo",
'photo' => "http://samples.ogp.me/574859819237737",
'title' => "a photo",
'image[0][url]'=>"http://www.testapp.com/".$imgFile,
'image[0][user_generated]'=>'true',
'message' => $comments,
'fb:explicitly_shared'=>true,
)
);
Related
This question already has answers here:
Javascript Parse Facebook Login Issue
(4 answers)
Closed 6 years ago.
I want my website to login with facebook but I am seeing this error.
Given URL is not whitelisted in Client OAuth Settings: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings. Make sure Client and Web OAuth Login are on and add all your app domains as Valid OAuth Redirect URIs.
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId: 'XXXXXXXXXXXX',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.5' // use version 2.2
});
// Now that we've initialized the JavaScript SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3. Not logged into Facebook and can't tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// 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 = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
</script>
<!--
Below we include the Login Button social plugin. This button uses
the JavaScript SDK to present a graphical Login button that triggers
the FB.login() function when clicked.
-->
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
<div id="status">
</div>
</body>
</html>
You must make sure you have registered your app with the developer page
Go here
For the facebook login docs
Go here
Then when you register your app make sure whatever URL you are using as the redirect page is the same as your app is sending too.
For example
http://example.com
is not,
http://www.example.com
To settup url as the local host refer to
this post
Please make sure you are setting your
$app_id = "xxx";
$app_secret = "xxx";
$my_url ="http://localhost:3080/example.php";
All to the correct data as specified inside your app settings when you create your app on facebook's developer page.
To make this as clear as possible.
Go to your app page and enter the url of the page in your localhost.
Then go to your code and add the exact same url.
in app settings,
http://localhost
in your code
http://localhost
If there is a port number after your localhost,
in app settings,
http://localhost:8080
in your code
http://localhost:8080
If there is a file after your localhost
in app settings,
http://localhost/myfile.php
in your code
http://localhost/myfile.php
Please try this code. replace your code with this code and do not forget to change the
YOUR_FACBEOOK_APP_ID
to your own.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'xxxxxxxxxxxxx',
status: true,
cookie: true,
xfbml: true
});
};
// Load the SDK asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
function login() {
FB.login(function(response) {
// handle the response
console.log("Response goes here!");
}, {scope: 'read_stream,publish_stream,publish_actions,read_friendlists'});
}
function logout() {
FB.logout(function(response) {
// user is now logged out
});
}
var status = FB.getLoginStatus();
console.log(status);
</script>
<button onclick="javascript:login();">Login Facebook</button>
<br>
<button onclick="javascript:logout();">Logout from Facebook</button>
In my case, modifying the /etc/hosts file to map '127.0.0.1' to something like myapp.com - so that your application has a “real” URL, resolved the issue.
Same is to be added to "Valid OAuth redirect URIs" in the Client OAuth Settings.
I has the same problem .
For me the solution was to add both WWW and no-WWW versions of my site to whitelist in Client OAuth Settings.
OK. So I have no idea on how to do this but you are going to have to talk like a 3 year old to me. I know PHP, HTML, CSS and a tiny smidge of javascript. I want to be able to make a page that gets the users facebook and checks to see if they have liked my Facebook page (https://www.facebook.com/MrDarrenGriffin). If they have, a redirect will direct them to a page. However, If not, it will tell them that to go to the downloads page, they have to like the page. The liking method could be with the embedded like button in the code. After they have liked the page it will go through the check again and if they have successfully liked my page, it will redirect them to the downloads section (or a specified page).
Thanks in advance :D
You can use this code because it's so simple :
FB.api({
method: "pages.isFan",
page_id: page_id,
}, function(response) {
console.log(response);
if(response){
alert('You Likey');
} else {
alert('You not Likey :(');
}
}
);
this ll user user_likes permission
Hope this will help you
Here are the steps to do so:
1) You need to use this step by step guide to connect user to your facebook page in order to fetch user basic information
https://developers.facebook.com/docs/facebook-login/getting-started-web/
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
}
2) After knowing that user is connected using facebook you need to issue the graph GET request to find out about this user that he liked your page or not
FB.api('/me/likes/YOUR_APP_ID', function(response) {
console.log(response.data);
}
3) And then run your business logic (whether to take user to download page or other page)
Code from the tutorial above is given below too
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//www.example.com/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
$("#btnFB").show();
FB.login();
} else {
$("#btnFB").show();
FB.login();
}
});
};
// Load the SDK asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
function testAPI() {
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
FB.api('/me/likes/PAGE_ID', function(response) {
console.log(response.data);
});
}
How to get PAGE_ID?
Goto http://developers.facebook.com/tools/explorer/?method=GET&path=me%2Flikes%2F
This worked for me! :)
I have been struggling to get a facebook "post to wall" dialogue to show on my site but all it shows is code on that page.
Here is what should happen:
A visitor comes to my site and clicks a custom "Share" button I made
The visitor is then redirected them to the feed dialogue box on a different page and they share my page.
They then proceed to download what I offered.
I made a facebook app and then copied the code from the facebook developer page and filled out everything I need, but anytime I click the share it takes me to a page with all the code instead.
Well try this, load the javascript SDK:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : 'URL_TO_CHANNEL_FILE', // Channel File optional
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
Then add a listener to your button, let's say your button has the id, bt-download
<script>
$(document).on("click", "#bt-download", function(){
var obj = {
method: 'feed',
link: 'link to your webpage',
picture: "url to the picture you want size 90px x 90px",
name: 'the name you want',
caption: 'your caption',
description: 'your description',
display: 'popup'
};
function callback(response) {
if (response && response.post_id) {
alert('Post was published.');
//here you can redirect the user to the download page
} else {
alert('Post was not published.');
}
}
FB.ui(obj, callback);
});
</script>
I am trying to have the user login to facebook and then display their user id in an alert.
Yet, I get nothing returned by this code. What am I doing wrong?
<html>
<head>
<title>Login to Facebook</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP ID',
channelUrl : 'http://www.mydomain.net/zoozTest/channel.html',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
(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/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
//LOGIN FUNCTION
function login() {
FB.login(function(response) {
if (response.authResponse) {
alert('Success!');
}else{
alert('Login Failed!');
}
}, {scope: 'email'});
}
</script>
<div onclick="login();">Login with Facebook</div>
</body>
</html>
Your code, copied verbatim, works fine for me. Three things:
1: Stupid question, but you've replaced 'APP ID' with your actual app id, right? Otherwise that'll be an error
2: Check your app settings. Have you specified your app domain and 'website with facebook login' URL correctly?
3: Technically you have a race condition. If you click the 'Login with Facebook' div and attempt to run your login() function before the FB JS SDK has initialised (it loads asynchronously), you'll get an error as the global FB object won't be defined. I'd stick a console.log at the bottom of the window.fbasyncinit function to make sure FB is being defined (for testing, for production you'll likely want to either block the login from showing before Facebook is inited, or build some sort of queue that checks to see if the global FB object is defined before attempting to use it, and if not adds to a queue).
Do you have any errors in the javascript console?
I'm in the process of developing a Contest and Promotion-related Facebook app and my intent is to to create a tab on my company's page that will provide access to the app.
Once their, users can nominate local companies for awards. Later on; once the nominations are in, users can vote for a winner.
I've integrated Open Graph into my app so that I can take advantage of Object Types (Organization), Action Types (Nominate, Vote For), and Aggregations (Nominations). My main objective is to then transfer these actions onto the user's timeline.
I've used the recipebox example as my base. I've provided my code to demonstrate authentication and the post action required to submit an action type/object type combination.
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head prefix="og: http://ogp.me/ns# og_<<app namespace>>: http://ogp.me/ns/apps/<<app namespace>>#">
<meta property="fb:app_id" content="<<app id>>" />
<meta property="og:type" content="<<app namespace>>:organization" />
<meta property="og:title" content="Client 1" />
<meta property="og:image" content="<<client image path>>" />
<meta property="og:description" content="Client 1 description here ... " />
<meta property="og:url" content="<<custom client URL>>">
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
// Init the SDK upon load
window.fbAsyncInit = function() {
FB.init({
appId : '<<app id>>', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// listen for and handle auth.statusChange events
FB.Event.subscribe('auth.statusChange', function(response) {
if (response.authResponse) {
// user has auth'd your app and is logged into Facebook
FB.api('/me', function(me){
if (me.name) {
document.getElementById('auth-displayname').innerHTML = me.name;
}
})
document.getElementById('auth-loggedout').style.display = 'none';
document.getElementById('auth-loggedin').style.display = 'block';
} else {
// user has not auth'd your app, or is not logged into Facebook
document.getElementById('auth-loggedout').style.display = 'block';
document.getElementById('auth-loggedin').style.display = 'none';
}
});
// respond to clicks on the login and logout links
document.getElementById('auth-loginlink').addEventListener('click', function(){
FB.login();
});
document.getElementById('auth-logoutlink').addEventListener('click', function(){
FB.logout();
});
}
function nominate () {
FB.api('/me/<<app namespace>>:Nominate&organization=<<custom client URL>>', 'post', function(response) {
if (! response || response.error) {
alert('Error occured');
console.log(response);
} else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<div id="auth-status">
<div id="auth-loggedout">
Login
</div>
<div id="auth-loggedin" style="display:none">
Hi, <span id="auth-displayname"></span>
(logout)
</div>
</div>
<h2>Client 1</h2>
<form>
<input type="button" value="Nominate" onclick="nominate()" />
</form>
<fb:activity actions="<<app namespace>>:nominate"></fb:activity>
</body>
</html>
A test user is encountering the following error:
Requires extended permission: publish_actions
And I am encountering the following error (I am an Admin for this app):
This method must be called with an app access_token
The first error is troubling to me. I cannot select publish_actions from Apps | <My App> | Permissions | Extended Permissions. Also, remedies I've encounted suggest I re-categorize my app to Games (this does not work) and to complete my Aggregations (I did; still does not work).
How can I overcome this error?
What can I do to fix my This method must be called with an app access_token error?
Thanks in advance,
Mike
EDIT
I believe the access_token error I was encountering was due to the fact that I was testing/interacting with the app directly on the Page Tab URL; not through Facebook.
I am no longer receiving the Requires extended permission: publish_actions error; however, my testers and developers are. I know that I am encountering this error because the publish_actions permission is not requested at the initial facebook.com login prompt.
If my Developers/Testers logout of Facebook, then log back in with my prompt:
FB.login(function (response) { }, { scope:'publish_actions'});
Then this permission and app is integrated into their Facebook session.
My final question is- is there a defacto, preferred method to request this permission without logging in/out of Facebook?
I have fixed both of my errors. Thank you to those who provided me with feedback and put me on the right path.
These errors have been resolved:
1. Requires extended permission: publish_actions
2. This method must be called with an app access_token
For starters, CBroe is right. Since I require extended permissions (publish_actions) I need to specify this is my options object after the callback function in FB.login() like so:
FB.login(function (response) {
if (response.authResponse) { // The user has authenticated
authenticatedSoDoSomething();
}
else { // The user has not authenticated
notAuthenticatedSoDoSomethingElse();
}
}, { scope:'publish_actions' });
Lastly, I had no success using the JavaScript SDK to publish an action to a user's timeline via FB.api(). This is the code I was using:
FB.api('/me/<<app namespace>>:<<my action>>&<<my object>>=<<a URL>>', 'post',
function(response) {
if (! response || response.error) {
alert('Error occured');
} else {
alert('Post was successful! Action ID: ' + response.id);
}
})
I neglected to include the app access token. The app access token can be constructed by concatenating the app id, followed by a pipe, followed by the app secret.
I used the PHP SDK to fulfill this request as I wanted to keep my api secret a secret. Here is [most] of the code I used:
require_once('facebook-php-sdk/src/facebook.php');
$facebook = new Facebook(
array(
'appId' => '<<my app id>>',
'secret' => '<<my app secret>>'));
$user = $facebook->getUser();
if ($user) {
try {
$user_profile = $facebook->api('/me');
}
catch (FacebookApiException $e) {
error_log($e);
$user = null;
echo json_encode(array('success' => false));
}
}
try {
$facebook->api('/' . $user . '/<<app namespace>>:<<my action>>&<<my object>>=<<a URL>>', 'POST', array('access_token' => $facebook->getAppId() . '|' . $facebook->getApiSecret()));
}
catch (FacebookApiException $e) {
echo var_dump($e->getResult());
}
Hope this helps!
For the second one, make the call with your App Access Token like the error says; if you're already doing this and it's failing, check the app isn't set to 'Native/Desktop' mode in the app's settings in the facebook App Dashboard. If it is, the app access token is untrusted and the API acts as though you didn't provide it.
For the first, are you sure users are granting publish_actions permission to your app? A call to /me/permissions with the user's access token will show you which permissions are granted. Note that the authenticated referrals / app center login flow is separate to your app's regular flow for users that end up there other than via an authenticated referral or the app center, so check you're including publish_actions in the scope in your call to the Oauth Dialog.