Im trying to make wallpost from my fb app. My code (bellow) wont give eny erros but it just wont publish anything to wall. Can someone help me? =P
Application file (index.php):
<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1234567890', // 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>
Post to Facebook
<script>
function postToFacebook() {
var body = 'Reading Connect JS documentation';
FB.api('/me/feed', 'post', { body: body, message: 'My message is ...' }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response);
}
});
}
</script>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID GOES HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(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>
</body>
</html>
And channel file in server (channel.php):
<?php
$cache_expire = 60*60*24*365;
header("Pragma: public");
header("Cache-Control: max-age=".$cache_expire);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
?>
<script src="//connect.facebook.net/en_US/all.js"></script>
Why are You trying to init Facebook scripts twice?:)
Here's an example of a working code :
How to get FB.api('/me/feed', 'post', ... to work?
Mind You, the user needs to authorize the app first before You can make FB.api calls.
You can do that by using FB.login e.g:
http://developers.facebook.com/docs/reference/javascript/FB.login/
and check if the user actually connected to Your app by using FBgetLoginStatus():
http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
Hope this helps
Related
I've just tried to make a fecebook login for my website and trying to test the following in local..which is located localhost inside a project folder name 'facebooklogin'
<html>
<head></head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxxxx',
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) {
console.log(response);
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login();
} else {
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() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
</script>
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
</body>
</html>
but it shows the error in console.. what is proper way of redemption from this issues in local machine...?
And what will be the App Domain if I wanna test it in local..? I tried with 'localhost' or 127.0.0.1 but it shows alert like this
It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
So I found a tutorial on Facebook Login Integration at: http://www.excellencemagentoblog.com/facebook-login-integration-website
I followed it step by step and Google Chromes Developer Tools give me an error after clicking Facebook Login saying:
Uncaught TypeError: object is not a function index.php:53
onclick
The button html is like this:
<a class="btn btn-success" href='#' onclick='login();'>
<i class="icon-facebook"></i>
Facebook Login
</a>
The script is as follows, I really can't tell what is wrong because the function is defined within the script.
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : ' 163289720517425', // App ID
channelURL : '', // Channel File, not required so leave empty
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : false // parse XFBML
});
};
// logs the user in the application and facebook
function login(){
FB.getLoginStatus(function(r){
if(r.status === 'connected'){
window.location.href = 'php/fbconnect.php';
}else{
FB.login(function(response) {
if(response.authResponse) {
//if (response.perms)
window.location.href = 'php/fbconnect.php';
} else {
// user is not logged in
}
},{scope:'email'}); // which data to access from user profile
}
});
}
// Load the SDK Asynchronously
(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);
}());
</script>
Not too sure of the problem you're having here....cuz even when I boiled it down to just the function with an alert....it still didn't work???? Meaning it had nothing to do with facebook.
Anyways....this is how I would do it....
You're doing a cross domain request...so you have to register your domain....
Also....FB provides a javascript SDK, so no need to use both PHP and Javascript as you were trying...
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '163289720517425', // App ID from the app dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms!!
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
$('.btn-success').click(login);
};
// 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/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function login(){
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});}
I'm trying to integrate a Facebook login with my website, and I'm testing out my Facebook login right now through a local host. This is the code I've generated from following the instructions on the Facebook JavaScript SDK guide.
<html>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '*************', // App ID
channelUrl : 'http://localhost', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connected
testAPI();
} else if (response.status === 'not_authorized') {
// not_authorized
login();
} else {
// not_logged_in
login();
}
});
};
function login() {
FB.login(function(response) {
if (response.authResponse) {
// connected
testApi();
} else {
// cancelled
console.log('Login failed!');
}
});
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
}
(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>
<script src="//connect.facebook.net/en_US/all.js"></script>
</body>
</html>
It's saying that it failed to load resource: file://connect.facebook.net/en_US/all.js It's basically failing GET all.js. What's wrong?
My Facebook App Dashboard has localhost as the AppDomain and Site URL as http://localhost.
Try following code.
(function(){
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = 'http://connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
2018 Updated Answer:
1) The test HTML file can't be loaded as file:// it needs to be loaded under a web server (eg: http://localhost/test.html )
2) Disable script/ad blockers. Most of them see the FB SDK as "evil" and block it.
I want to send message to multiple users. I don't know what I did wrong.
But it can run only JavaScript Test Console.
this is my code:
<html>
<body >
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY APP ID',
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true, // parse XFBML tags on this page?
oauth: true // enable OAuth 2.0
});
};
(function(d, debug){
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" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));
function sendmsg(){
FB.ui({
method: 'send',
to: ['100000793830311','100002551899151'],
name: 'test msg',
link: 'http://www.google.com'
});
}
</script>
<button onclick="sendmsg();">SEND</button>
</body>
Method send doesn't allow multiple user ids in the to field.
Code allows only one id. Users can enter additional recipients in the dialog.
I used the example from the facebook documentation but after granting facebook permission to connect I cannot get any user info from the user object. The user is defined but all its attributes are null. Here is my code:
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '161718123880158', // App ID
channelUrl : '', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
logging : true
});
FB.api('/me', function(user) {
if (user) {
var image = document.getElementById('image');
image.src = 'http://graph.facebook.com/' + user.id + '/picture';
var name = document.getElementById('name');
name.innerHTML = user.name
}
});
};
// 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>
<div class="fb-login-button" scope="email,user_checkins">Login with Facebook</div>
<div align="center">
<img id="image"/>
<div id="name"></div>
</div>
</body>
</html>
The output is undef for name and empty image
It's because you haven't got an active access token. If you do a put a console.log(user) and examine the response it shows the error.
What is the 'Website with Facebook login' field set to in your app settings? It needs to match the URL that you are developing on.
Try wrapping the FB.api call in a FB.getLoginStatus callback function, like this:
FB.getLoginStatus(function() {
FB.api('/me', function(user) {
//your code here
});
})