atm i m trying to get the facebook api to work, i stuck at the oauth
<!DOCTYPE html>
<head>
<script src="http://connect.facebook.net/en_US/all.js"></script>
</head>
<body>
<fb:login-button autologoutlink="true" onlogin="OnRequestPermission();">
</fb:login-button>
<script language="javascript" type="text/javascript">
FB.init({
appId: '143655195699763',
status: true,
cookie: true,
xfbml: true
});
</script>
</body>
</html>
As far as i try to login i get a error
An error occurred. Please try again later.
Any idea?
Also if i use that one, i still get the same error message ... maybe it have something todo with my appID?
<!DOCTYPE html>
<head>
<script src="http://connect.facebook.net/en_US/all.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '395527397147712', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
</script>
<script>
function fb_publish() {
FB.ui(
{
method: 'stream.publish',
message: 'Message here.',
attachment: {
name: 'Name here',
caption: 'Caption here.',
description: (
'description here'
),
href: 'url here'
},
action_links: [
{ text: 'Code', href: 'action url here' }
],
user_prompt_message: 'Personal message here'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
}
</script>
<input name="" type="button" onClick="fb_publish()">
</body>
</html>
I'm not sure if this is the cause, but in the SDK Docs examples you have two functions one is fb.init (you have it) and the other one is an anonymous function that calls itself to load the script that you are attaching directly to the DOM, maybe you should load the script via the anonymous function; the code:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.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
});
// Additional initialization code here
};
// 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>
Alos, make sure to hide properly the #fb-root element because in IE the SDK can cause issues. More info here
Related
I have the code below that allows the user to sign up to our app using the Facebook SDK API. It is working well but I want to ask the user to grant us a permission for their picture,birthday,address,email,gender,location and other information.
window.fbAsyncInit = () => {
//SDK loaded, initialize it
FB.init({
appId : 'my-app-id',
xfbml : true,
version : 'v3.2'
});
//check user session and refresh it
FB.getLoginStatus((response) => {
if (response.status === 'connected') {
//user is authorized
document.getElementById('loginBtn').style.display = 'none';
document.getElementById('logoutBtn').style.display = 'block';
connectAPI(response);
} else {
}
});
};
//add event listener to login button
document.getElementById('loginBtn').addEventListener('click', () => {
//do the login
FB.login((response) => {
if (response.authResponse) {
//user just authorized your app
document.getElementById('loginBtn').style.display = 'none';
}
}, {
scope: 'email', //===========change
return_scopes: true,
auth_type: 'rerequest'
});
}, false);
document.getElementById('logoutBtn').addEventListener('click', () => {
FB.logout((response) => {
if(response.status === 'unknown'){
document.getElementById('loginBtn').style.display = 'block';
$('.btn-logout').hide();
}
});
}, false);
// 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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//successful log in
function connectAPI(respo) {
console.log(respo);
}
The output is like this:
But I am expecting the output to be like this:
I've tried changing this line:
scope: 'email'
to:
scope: 'email,name,picture,birthday,address,email,gender,location',
But the display of the pop out window is like this:
Where should I properly insert my scope parameters?
There is no permission called "name" or "picture", read this: https://developers.facebook.com/docs/facebook-login/permissions
Also, there is no address permission and the location permission is actually called user_location. Same for birthday and gender. Try with the correct ones and don´t use email twice:
scope: 'email,public_profile,user_birthday,user_gender,user_location'
Don´t just invent permissions, the API reference tells you exactly which ones exist ;)
I've been working on this for a few days and I can't find what's missing. Does anyone have any advice?
It seems like its missing something but I have no idea what it would be.
I'm not receiving any errors. The share button works (to share to your own wall) but the invites don't appear to do anything at all.
I've replaced my appid with X's.
<html>
<head>
<title>App Name</title>
</head>
<body>
<div id="fb-root"></div>
<script>
var publish = {
method: 'stream.publish',
display: 'popup', // force popup mode
attachment: {
name: 'Connect',
caption: 'The Facebook Connect JavaScript SDK',
description: (
'A small JavaScript library that allows you to harness ' +
'the power of Facebook, bringing the user\'s identity, ' +
'social graph and distribution power to your site.'
),
href: 'http://app-address.com/'
}
};
function publish1() {
FB.ui(publish);//, Log.info.bind('stream.publish callback'));
}
</script>
<button class="btn" id="send-to-many">Send to Many</button>
<button onclick="publish1()">Click</button>
</body>
<script>
window.fbAsyncInit = function() {
console.log('Initing facebook...');
FB.init({
appId: 'xxxxxxxxxxxxxxx',
status: true,
frictionlessRequests: true,
cookie: true,
xfbml: true
});
console.log('... done');
};
(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);
}());
document.getElementById('send-to-many').onclick = function() {
FB.ui({
method: 'apprequests',
message: 'This is a test of the App-Name invite.'
}, requestCallback);
function requestCallback(response)
{
if(response && response.request_ids) {
// Here, requests have been sent, facebook gives you the ids of all requests
//console.log(response);
location.href='home';
} else {
// No requests sent, you can do what you want (like...nothing, and stay on the page).
}
}
}
</script>
</html>
Your code is looking fine. There must be a error in your facebook app setting. For invite function you have to give 'Canvas URL' & 'Secure Canvas URL' in your facebook app setting.
You can also try with my codes below. This is a very simple code to implement.
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'APP_ID',
cookie:true,
status:true,
xfbml:true
});
function FacebookInviteFriends()
{
FB.ui({
method: 'apprequests',
message: 'Your Message diaolog'
});
}
</script>
//HTML Code
<div id="fb-root"></div>
<a href='#' onclick="FacebookInviteFriends();">
Facebook Invite Friends Link
</a>
Here you have to write one more javascript code for breaking the iframe. So that the link 'll not open inside the facebook. You also have to write this same js code in your home page or any other page of your website, that you want your app to redirect.
<script type='text/javascript'>
if (top.location!= self.location)
{
top.location = self.location
}
</script>
For any further doubt feel free to write here.
I had a similar problem and found that you have to click the DONE button. This is a form and the DONE button submits the form.
I have tried putting together some code based on some other SO questions and various web tutorials.
The error I am getting is right at the end when I try and post to my friend's walls.
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<p><input type="button" onclick="sendRequestViaMultiFriendSelector(); return false;" value="Recommend friends for another chance to win!" /></p>
<div id="response"></div>
<script>
FB.init({
appId : 'xxxxxxxxxx',
status : true,
cookie : true,
oauth: true
});
function sendRequestViaMultiFriendSelector() {
FB.ui({method: 'apprequests',
message: 'My Great Request'
}, requestCallback);
}
function requestCallback(response) {
// Handle callback here
if (response.request && response.to) {
var request_ids = [];
for(i=0; i<response.to.length; i++) {
var temp = response.request + '_' + response.to[i];
var friend_id = response.to[i];
request_ids.push(temp);
//send message in here
var opts = {
message : 'Message',
name : 'Name',
link : 'http://www.facebook.com/pages/xxxxx/xxxxxxxxxxxxxxx',
description : 'Description here',
picture : 'http://www.example.com/img/some.jpg'
};
FB.api('/'+friend_id+'/feed', 'post', opts, function(response) {
if (!response || response.error) {
// This is the error I am getting:
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
// end send message
}
var requests = request_ids.join(',');
} else {
alert('Didn't send recommendation to friends');
}
}
</script>
The code is actually working great, it worked as soon as I granted myself the access token in graph api explorer.
Just need to set up my auth dialogue now, lots of fun!
Just thought I'd better answer this incase anyone else runs into the same situation.
I have a bug while using FB.ui, although I'm doing everything by the book.
I want to a button so users can share the page on their wall.
When I click the button, I get a facebook popup window that says:
An error occurred, Please try again later.
Can you see what's wrong?
Thanks!
Here's my code:
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init
({
appId:'MYAPPID',
status:true,
cookie: true,
xfbml:true
});
function shareProject2()
{
FB.ui(
{
method: 'feed',
name: 'Facebook Dialogs',
link: 'http://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.',
message: 'Facebook Dialogs are easy!'
},
function(response) {
if (response && response.post_id) {
getPermission();
} else {
alert('Post was not published.');
}
});
return false;
}
</script>
<a href="#" onclick="shareProject2();" >Share</a>
Have you tried passing the session from the server to the client JavaScript
This would be done in php as:
<?php
require 'facebook.php';
$facebook = new Facebook(array(
'appId' => $appId, // Your App Id
'secret' => $secret, // Your App Secret
'cookie' => true,
));
$session = $facebook->getSession();
?>
<script>
FB.init
({
appId:'MYAPPID',<?php
echo (!empty($session)) ? 'session: ' . json_encode($session) . ',' : '' ?>
status:true,
cookie: true,
xfbml:true
});
...
</script>
This bit of documentation has not been as helpful as you might think. I understand that I have to hang a display parameter on the end of the URL, but I'm not sure how to invoke a login window like that. Here's what I have now:
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">
// initialize the library with the API key
FB.init({ apiKey: '{{ facebook_api_key }}', status: true, cookie: true, xfbml: true});
function facebookConnect(form){
function handleResponse(response){
form.submit();
}
FB.login(handleResponse,{perms:'publish_stream,user_about_me,status_update,email,offline_access'});
}
</script>
This works fine in a desktop browser, but I can't figure out how to get the 'touch' or 'wap' modes for dialogs.
I'm using django-socialregistration if that's of any relevance.
Logging into Facebook using a touch dialog used to work a while ago, but that same old code doesn't seem to work anymore.
However,
You can redirect a user to the login URL, and facebook will do the rest depending on the platform. The following snippet will login the user, and redirect back to your current page if set.
Update: You also need to edit your 'Basic App Settings' > 'Select how your app integrates with Facebook' and check 'Mobile Web' for this to work.
window.location = "http://www.facebook.com/dialog/oauth/"
+ "?" + "scope=" + "publish_stream,user_about_me,status_update,email,offline_access"
+ "&" + "client_id=" + YOUR_APP_ID_GOES_HERE
+ "&" + "redirect_uri=" + YOUR_CURRENT_PAGE_URL
+ "&" + "response_type=token";
The display:touch property can still be used in FB.ui() as follow (for instance, posting on a wall):
// Make sure you call FB.init() before FB.ui()
FB.ui({
app_id: YOUR_APP_ID_GOES_HERE,
method: 'feed',
name: "post title",
link: "http://link-to-what-you-are-sharing/",
picture: "your_image.jpg",
description: "post description",
display: 'touch'
},
function callback(r){
if ( (r && r.id) || (r && r.post_id) ){ alert('posted');}
else{ alert('failed'); }
});
Why are you wrapping the response handler inside a function?
Do something like :
function handleStatusChange(response) {
if (response.authResponse) {
console.log(response);
}
}
window.fbAsyncInit = function() {
FB.init({ appId: 'YOUR_APP_ID',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('auth.statusChange', handleStatusChange);
};
Taken from https://developers.facebook.com/docs/guides/mobile/web/