Facebook Like Javascript SDK only works on localhost - facebook

I am using FB Javascript SDK to check that a user like my page or not. It's works on localhost but when I upload this on Server the code does not works. My code is below:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'My 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
});
FB.getLoginStatus(function(response) {
var page_id = "My Page ID";
if (response && response.authResponse) {
var user_id = response.authResponse.userID;
var fql_query = "SELECT uid FROM page_fan WHERE page_id = "+page_id+"and uid="+user_id;
FB.Data.query(fql_query).wait(function(rows) {
if (rows.length == 1 && rows[0].uid == user_id) {
alert('Liked');
} else {
alert('Not Liked');
}
});
}
});
};
// 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/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
It works on localhost and show an Alert but not on Server

You need to add your internet domain to your application sites whitelist.
Go to http://developers.facebook.com
Open YourApp Settings
Add Platform
Write your Site URL

Related

Facebook APi Post to page always not allowing to post always unauthorized?

I am having problem integrating the facebook post to wall for pages (not user).
I have already authorized the app for all the scoop.
Scoop lists:
user_about_me,user_activities,user_birthday,user_checkins,user_education_history,user_events,user_groups,user_hometown,user_interests,user_likes,user_location,user_notes,user_online_presence,user_photo_video_tags,user_photos,user_relationships,user_relationship_details,user_religion_politics,user_status,user_videos,user_website,user_work_history,email,read_friendlists,read_insights,read_mailbox,read_requests,read_stream,xmpp_login,manage_friendlists,manage_notifications,status_update,offline_access,publish_checkins,publish_stream,rsvp_event,manage_pages
I have accepted all grant access scopes and I have successfully connected and get the users data I have save into the database the info of users available pages:
page id and page access token
Whe I am posting a test message It say's : #200) The user hasn't authorized the application to perform this action
here is my login script for fb:
window.fbAsyncInit = function() {
FB.init({
appId:'MY_APP_ID', cookie:true,
status:true, xfbml:true,oauth : true
});
};
(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));
//FB.Event.subscribe("auth.logout", function() {window.location = '/logout'});
$('#facebook_login').click(function(e) {
FB.login(function(response) {
if(response.authResponse) {
parent.location ='http://mywebsite.com/users/oauth_fb';
}
},{scope: 'user_about_me,user_activities,user_birthday,user_checkins,user_education_history,user_events,user_groups,user_hometown,user_interests,user_likes,user_location,user_notes,user_online_presence,user_photo_video_tags,user_photos,user_relationships,user_relationship_details,user_religion_politics,user_status,user_videos,user_website,user_work_history,email,read_friendlists,read_insights,read_mailbox,read_requests,read_stream,xmpp_login,manage_friendlists,manage_notifications,status_update,offline_access,publish_checkins,publish_stream,rsvp_event,manage_pages'});
});
After connecting facebook account I will logout automatically my facebook account with my script:
<script>
window.fbAsyncInit = function() {
FB.init({
appId:'MY_APP_ID', cookie:true,
status:true, xfbml:true,oauth : true
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
FB.logout(function(response) {
window.location = '';
});
}
});
};
(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>
And here is my script for posting (this is for offline posting so user already logged out on facebook):
$oauth_uid = 'PAGE_ID_FROM_DB';
$oauth_token = 'PAGE_TOKEN_FROM_DB'
$post_url = '/'.$oauth_uid.'/feed';
if ($oauth_uid) {
$msg_body = array(
'access_token' => $oauth_token,
'message' => 'tesing post to my page',
);
try {
$postResult = $facebook->api($post_url, 'post', $msg_body );
} catch (FacebookApiException $e) {
echo $e->getMessage();
}
}
How to fixed this issue ? I don't see anything wrong with my script , why I can post to my personal facebook account while I can't post on my facebook page ?
Please help..
Thank you.

Error in facebook app

I am using javascript sdk to update status in facebook. This is my code
window.fbAsyncInit = function() {
FB.init({
appId : 'id', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code heres
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.')
}
});
};
// 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 = "http://connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
but i am getting An error occurred message while opening this page.please give a solution to solve this.Or any one else can share the app id which is working fine

facebook popup blocking on feed share

I have the following feature where the user can share a feed. The below code gets block by pop up blockers on most browsers. I've seen several post on stack overflow about this issue. One recommended using the onclick which i've tried. I've noticed that if my facebook sdk fails i don't get the popup block. What is the best plan of attack. I'm using php.
<a class="facebook" href="#" onclick='loadSdk(); return false;'></a>
<script>
function loadSdk(){
window.fbAsyncInit = function() {
FB.init({
appId : '123', // App ID
channelUrl : 'http://mysite.com/facebook', // Channel File
// status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
if (typeof facebookInit == 'function') {
facebookInit();
}
FB.api('/me', function(user) {
if (user) {
var image = document.getElementById('image');
image.src = 'https://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));
}
function facebookInit(){
var publish = {
method: 'feed',
message: '',
name: '',
caption: '',
description: (
),
link: 'http://mysite.com/',
picture: 'http://mysite.com/fblogo.png',
actions: [
{ name: '123', link: 'http://www.mysite.com/' }
],
user_message_prompt: 'Share your thoughts'
};
FB.ui(publish, null);
}
</script>
Currently you are loading the SDK onclick – why?
You want to execute the function that opens a popup – facebookInit in your case – onclick.

redirect_url should be an absolute url

I am installing FB reg on my web app (and testing locally).
I am putting up this:
<div class="auth">
<script language="javascript">
$(function(){
var root = $('#fb-root');
if ((!root) || (!root.length)){
$('body').append('<div id="fb-root"></div>');
}
window.fbAsyncInit = function() {
console.log('fbAsyncInit');
FB.init({
appId : '111...', // App ID
channelUrl : 'http://www.wonderlandlabs.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
});
};
// 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));
})
... and getting this error:
"'redirect_uri' should be an absolute url."
Why is this so?

Detect if a user liked my fanpage

EDIT:
Finally after a long search, I found a solution to this:
heres my code:
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<fb:like href="http://developers.facebook.com" send="true" width="450" show_faces="true"></fb:like>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script>
FB.Event.subscribe('edge.create', function(href, widget) {
//alert('like '+href);
document.getElementById('download').style.visibility = 'visible';
});
FB.Event.subscribe('edge.remove', function(href, widget) {
//alert('dislike '+href);
document.getElementById('download').style.visibility = 'hidden';
});
</script>
<div id="download">Download</div>
</body>
</html>
This works as I wanted, but on page load by default the Download is shown, how do I detect on page load whether the user liked my page or not?
OLD QUESTION
I am having a website where I have some files for users for download, and have a like button next to it. I just want that download button to be visible only if the current user liked my page.
I am new to FB open graph and JS SDK, I tried following code(pasted in my website) :
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXXXXXXX',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
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
}
});
} else {
// the user is logged in to Facebook,
// but has not authenticated your app or
// the user isn't logged in to Facebook.
FB.login(function(response) {
if (response.authResponse) {
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
}
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});
}
});
};
(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));
Even though I am logged in FB and using same browser, it always returns me with following error(firebug debug log)
code:2500
message : "An active access token must be used to query information about the current user."
I dont know much about FB API, am I doing something wrong?
Here's an edit of your code that should work:
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXX',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
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
}
});
} else {
// the user is logged in to Facebook,
// but has not authenticated your app or
// the user isn't logged in to Facebook.
FB.login(function(response) {
if (response.authResponse) {
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
}
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});
}
});
};
(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));
To explain a bit, what I added was a function which checks whether a user has authorized your app yet (FB.getLoginStatus) and within the success handler of that function, I've added your API call. Within the else of this function, I've added a call to FB.login which will prompt un-authorized users to auth your app. If they successfully do this, your API call is made, if they chose not to, I've just left in the example console.log call, but you could replace that with anything you wanted.
Now, in order to track whether a user has liked your page or not, you need to make use of the FB.Event.subscribe function by tracking the 'edge.create' event.