How to authenticate to Facebook without redirect? - facebook

Could suggest a way to authorize my web application in Facebook to get access_token with no need for redirect? I found out that this in fact is possible with deprecated Facebook REST API, but I cannot register new application to use it.
Regards,
ToM

You can only accomplish this with the facebook javascript library. With the PHP library, you are stuck with redirecting them to facebook... If they cancel out on facebook, they are now off your site.
With the javascript library, you get a modal window that if they cancel out of, just stay on your page.
Here's a short blurb on how to make the javascript button appear on your page and do a simple login check:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// Initialize Facebook Connect
FB.init({
appId : 'YOUR_FACEBOOK_APP_ID_HERE',
status : false, // Check login status
cookie : true, // Enable cookies to allow the server to access the session
xfbml : true, // Parse XFBML
oauth : true
});
};
// Get Facebook Connect JS and append it to the DOM
(function() {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol+'//connect.facebook.net/en_US/all.js#xfbml=1';
document.getElementById('fb-root').appendChild(e);
}());
function fbLoginCheck(response){
if(response.status != 'unknown'){
//reload or redirect once logged in...
window.location.reload();
}
}
</script>
<a class="fb_button fb_button_medium"
onclick='FB.login(fbLoginCheck,{ scope: "user_about_me,user_location,user_birthday,email,publish_stream"})'>
<span class="fb_button_text">Join with Facebook</span></a>

Related

wall post on facebook from hybrid mobile application

I am having a hybrid mobile application(should work in android and ios). In which I need to post on facebook wall from my application. Please note its a hybrib app, so I am not supposed to use any java or c code.
I tried the following method , its working in simulator , but not in actual device. Please help me.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ' my appID',
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>
<script type="text/javascript">
$(document).ready(function(){
$('#share_button').live('click', function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'HyperArts Blog',
link: 'http://hyperarts.com/blog',
picture: 'http://www.hyperarts.com/_img/TabPress-LOGO-Home.png',
caption: 'I love HyperArts tutorials',
description: 'The HyperArts Blog provides tutorials for all things Facebook',
message: ''
});
});
});
</script>
Thanks
I ran into this. your:
document.location.protocol
which is suppose to pull in the FB SDK is actually "file:///" and thats what gets fed into the url for that FB JS library.
Manually specify http:// or https://
This didnt work for me either on safari webView on IOS so i had to hit the endpoints manually using AJAX.

how to implement facebook like on a page with test that user have liked it or not

<div class="like-button">
<div class="fb-like-box" data-href="https://www.facebook.com/pages/Annupurnas-Cooking/526672940684211?ref=hl" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
<div id="fb-root"></div>
<script type="text/javascript">
<!--
var fbAsyncInit = function() {
var APP_ID = '324859924285629';
var PAGE_ID = '526672940684211';
FB.init({
appId : APP_ID,
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.sessionChange', function(response) {
if(response.session){
//check to see if user is a fan of the page
var query = FB.Data.query( 'select page_id from page_fan where uid='+response.session.uid+' and page_id ='+PAGE_ID);
query.wait( function(rows) {
if(rows.length){
//user already likes your page
}else{
//user has not yet liked your page
}
});
}else{
//user has not yet logged in
}
});
FB.Event.subscribe('edge.create', function(response) {
//user just clicked "like" on your page
});
FB.Event.subscribe('edge.remove', function(response) {
//user just clicked "unlike" on your page
});
};
(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>
</div>
I want to implement the like button of my facebook page. I want to check that current user have liked us or not. can someone tell me how we can do this.
in the code I put my appId and facebook page ID. I tried to use it but it's told me in error that "An active access token must be used to query information about the current user.".
do someone know how I can put access-token to this. Do I need to put accesstoken for like kind of functionality.
Check here:
API -> User
You can check if a User likes a specific page by issuing an HTTP GET to /PROFILE_ID/likes/PAGE_ID. This requires the user_likes (current user) or friends_likes (current user's friend) permission.
When you have user_likes permission you can easily check against graph api:
https://graph.facebook.com/me/likes/PAGE_ID&access_token=xxxxxxxxx

How to load javascript facebook api SYNCHRONOUSLY ...?

I want to load facebook api ( javascript SDK) synchronously. I have seen this code on facebook developers.
<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR_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
});
</script>
and also on reference to another link
http://www.masteringapi.com/tutorials/facebook-javascript-sdk-best-practices/58/
is is mentioned that "But you need to make sure you don’t define FB in your own JS code or libraries!"...............
I am confused ....!
Please help me....
What you are doing looks fine.
The instruction that you've seen, "But you need to make sure you don’t define FB in your own JS code or libraries!" is simply a warning to not declare a variable named FB in your application, or you will hide the Facebook SDK.
In your code, on the very next line, you could begin making calls with FB.api or any of the other methods.
Does that help?
Add the below code after opening html tag
<div id="fb-root">
</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'Your APP ID',
status: true, // check login status
cookie: true, // enable cookies to allow server to access session
xfbml: true, // parse XFBML
oauth: true
});
};
(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>
This code will load the javascript SDK asynchronously.

persist connection using Facebook Javascript SDK

i have implemented facebook log in using Facebook javascript SDK in Jquery mobile , now the problem is i want to persist connection through out all the pages as when ever i refresh the page i need to fire FB.Login again.
Moreover do i need to include following code in every html page to access the FB object ?
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXX', // 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 here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
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);
}(document));
</script>
Yes. You should include initialization of JavaScript SDK on every page.
JavaScript SDK should set cookie automatically (as you set in FB.init call parameters) so you doesn't need to call FB.login on every page
On each page, you will want to include the Javascript SDK.
On each page in the window.fbAsyncInit = function() {};, after calling the normal FB.init() you will want to call FB.getLoginStatus() (see: https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/) which will give you the access token for you to use to access the API.
If you call init more than once the SDK responds with 'FB.init has already been called - this could indicate a problem' in your console log. To avoid that you can test for whether the FB object exists and then load and init the API if it does not.
$( document ).delegate("#my_jqm_page", "pagebeforecreate", function() {
if (typeof FB !== 'undefined') {
console.log("FB JS API is available now");
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// etc.

What is the best way to use old Facebook REST API and new Facebook Graph API on the same webpage?

The existing page has code to work with the old REST API:
jQuery(document).ready( function() {
FB_RequireFeatures(["Connect", "XFBML"], function() {
FB.init('12345678ABCDEF','/xd_receiver.html', {ifUserNotConnected: fb_user_not_connected}); // real key replaced by 12345678ABCDEF
which is to support "Login with Facebook" and "Share" button to share story on Facebook.
If the following code for new Graph API is added
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '123456', status: true, cookie: true, // real appId replaced by 123456
xfbml: true});
};
jQuery(document).ready( function() {
(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>
then the "Share" and the "Login with Facebook" stopped working. I realize the different code each calls its FB.init(), one with 2 strings and 1 object, and the other calls FB.init() with just one 1 object. Is one overriding the other FB.init()?
There are some people who think it cannot work:
http://forum.developers.facebook.net/viewtopic.php?id=66057
Can Facebook's Javascript SDK work together with the older Facebook API?
and some people who think it can:
http://forum.developers.facebook.net/viewtopic.php?pid=278718#p278718
http://github.com/mmangino/facebooker2/issues/closed#issue/18
Both APIs are available from new JS client. You're mixing the terms "API" and "JS client". You can (you should) use new client and make request to both REST and GRAPH APIs as well.