I am Unable to take the Permissions Dialog as well as Login to Facebook here is my code:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID', // App ID
channelUrl : 'http://connect.facebook.net/en_US/all.js', // 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.statusChange', handleStatusChange);
};
function handleStatusChange(response) {
document.body.className = response.authResponse ? 'connected' : 'not_connected';
if (response.authResponse) {
// console.log(response);
FB.api('/me/likes/171099129606813', function(response) {
if ( response.data.length === 1 ) { //there should only be a single value inside "data"
console.log('You like it');
} else {
console.log("You don't like it");
}
});
}
else
{
FB.login(function(response) {
if (response.status == 'connected') {
//console.log(response);
FB.api('/me/likes/171099129606813', function(response) {
console.log(response);
});
} else {
alert('Not Logged In');
// user is not logged in
}
}, {scope: 'email,user_likes'});
}
}
// 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 data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
still its not taking me to authentication page it is changing the class name of body but not working on fb login
It took me today a while to understand that window.fbAsyncInit method is not fired on some mobile browsers (in fact on all mobile devices in my company). What you need to do is to add sth like this:
var called = false;
window.fbAsyncInit = function () {
if (called) return;
called = true;
// here the fb code
}
if (!called) window.fbAsyncInit();
This happened to me as well. The FB.login function was nested in a callback. In my case the browser was blocking the popup page from facebook. When I unblocked popups, it came up fine.
Related
Im trying to post to a facebook friend wall after a friend is selected.
Im using friend's selector from https://codersgrave.com/
I have this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Facebook Friend Selector Basic Example - Coders' Grave</title>
<!-- Add Facebook Friend Selector CSS -->
<link type="text/css" href="friend-selector/jquery.friend.selector-1.2.1.css" rel="stylesheet" />
<!-- Add jQuery library -->
<script type="text/javascript" src="js/libs/jquery-1.6.2.min.js"></script>
<!-- Add Facebook Friend Selector JS -->
<script type="text/javascript" src="friend-selector/jquery.friend.selector-1.2.1.js"></script>
<!-- Friend Selector Integration -->
<script type="text/javascript">
jQuery(document).ready(function($) {
var id = 0;
$(".bt-fs-dialog").fSelector({
max: 1,
onSubmit: function(response){
id = response[0];
alert(id);
FB.ui({
method: 'feed',
link: 'https://developers.facebook.com/docs/dialogs/',
caption: 'My text',
to: id,
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
});
}
});
});
</script>
</head>
<body>
<!-- Facebook Integration -->
<script src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '1399631740271365', // Facebook Application 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) {
if (response.authResponse) {
$(".connect").attr("class", "logout").text("Logout");
$(".fs-dialog-container").show();
$(".logout").click(function(){
FB.logout(function(response) {
location.reload();
});
});
} else {
}
});
};
// 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));
jQuery(document).ready(function($){
$(".connect").click(function(){
FB.login(function(response) {
if (response.authResponse) {
location.reload();
} else {
// User cancelled login or did not fully authorize
}
}, {scope: 'user_groups'});
});
});
</script>
Connect
<br />
Click here
</body>
</html>
I can select the friend, the dialog box shows ok, and finally my alert showing: "'Post was published.'" also displays, but still if i enter to my friend's wall, i can't see my post.
I have also tried posting to my own wall, and it's the same.
Any ideas?
Thanks
I am looking to create facebook login system in my website using javascript SDK. I am able to login as per details mentioned in facebook website. I am trying to enter data in mysql database primarily email ID of users. I am unable to do so despite different options. Need help. also how to disappear login button once user is logged into the system. Please help. below is the basic code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXX',
channelUrl : '//XXXX',
status : true,
cookie : true,
xfbml : true
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login();
} else {
FB.login();
}
});
};
(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) {
$.post('send.php', {'name':response.name});
alert('Good to see you, ' + response.email + '.');
});
}
</script>
<fb:login-button show-faces="true" autologoutlink="true" scope="user_about_me,email" width="200" size= "large" max-rows="1"></fb:login-button>
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"> </div>
</body>
</html>
This is how I've set up my login/registration flow. On the index.html page there is a link. Once it is clicked you are sent to a second page where your login status is checked and the fb login/registration box is shown if you're not registered or logged in.
What I've done is made the tag invisible on the page until after the login status is checked? Once it's checked I want it to become visible if the user isn't logged in or registered, but it's not becoming visible.
What is the best way to hide the visibility of the register/login box until login status is checked. I don't want to use facebooks login() function because I don't want a pop up window. I want to use the XFBML tag. Below is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script >
<base href="http://spilot.koding.com/">
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : '3967205****88', // App ID
channelUrl : '//http://spilot.koding.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
});
// get login status
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connected
} else if (response.status === 'not_authorized') {
// not_authorized
document.getElementByName("login").style.visibility = visible;
} else {
// not_logged_in
document.getElementByName("login").style.visibility = visible;
}
});
};
// 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 id="fb-root" name="login" style="visibility:hidden">
<script src="https://connect.facebook.net/en_US/all.js#appId=396720557089188&xfbml=1"></script>
<fb:registration
fields="name,birthday,gender,location,email"
redirect-uri="http://spilot.koding.com/signedRequest.php" width="530">
</fb:registration>
</div>
</body>
</html>
This was the solution that worked for me. I decided to use the registration plugin instead. I put the iframe in a div and set the div's visibility to "hidden", then in the init code where it checks log in status, I call a function that uses document.getElementById().style.visibility ="visible" to grab the div and change its visibility. Make sure everything that needs quotes around it has them, that was one of my original mistakes.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script >
<base href="http://spilot.koding.com/">
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : '396720557******', // App ID
channelUrl : '//http://spilot.koding.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 init code here
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connected
} else if (response.status === 'not_authorized') {
// not_authorized
///log function will change div visibility to "visible"
log();
} else {
// not_logged_in
log();
}
});//closes fb.getLoginStatus
};// closes fbAsyncInit
// 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));
//change div visibility to visible
var log = function(){
document.getElementById('login').style.visibility = "visible";
}//closes function log()
</script>
//put iframe inside a div and set the div's visibility to hidden.
<div id ="login" style = "visibility:hidden" >
<iframe src="https://www.facebook.com/plugins/registration?
client_id=396720557089188&&
redirect_uri=http://spilot.koding.com/signedRequest.php&
fields=name,birthday,gender,location,email"
scrolling="auto"
frameborder="no"
style="border:none"
allowTransparency="true"
width="100%"
height="330">
</iframe>
</div>
</body>
</html>
I tried out the Javascript SDK in an html file, everything worked fine. Then moved the same code to a .xhtml file & it completely stopped working.
The code as follows:
Moved from file test.html to file test.xhtml & it stopped working
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></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 : '365436556863538', // App ID
channelUrl : '//'+window.location.hostname+'/channel', // 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
});
// listen for and handle auth.statusChange events
FB.Event.subscribe('auth.statusChange', function(response) {
if (response.authResponse) {
FB.api('/me', function(response){
if (response.name) {
$("#username").html("<img src='https://graph.facebook.com/" + response.id + "/picture'/><div>" + response.name +"</div>");
}
})
$('#auth-loggedout').hide();
$('#auth-loggedin').show();
} else {
// user has not auth'd your app, or is not logged into Facebook
$('#auth-loggedout').show();
$('#auth-loggedin').hide();
}
});
// respond to clicks on the login and logout links
document.getElementById('auth-loginlink').addEventListener('click', function(){
FB.login(function(response) {
// handle the response
}, {scope: 'email'});
});
document.getElementById('auth-logoutlink').addEventListener('click', function(){
FB.logout();
});
}
</script>
<div id="auth-status">
<div id="auth-loggedout">
Login
</div>
<div id="auth-loggedin" style="display:none">
(logout)
</div>
</div>
<div>
<div id="username"></div>
</div>
</body>
</html>
I could just find this in the console window:
Uncaught SyntaxError: Unexpected identifier
window.script1342849602887=1;
I found some code on here for NON-PHP Revealing HTML when the Like button is clicked however, not working for me. The code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
body {
width:520px;
margin:0; padding:0; border:0;
font-family: verdana;
background:url(repeat.png) repeat;
margin-bottom:10px;
}
p, h1 {width:450px; margin-left:50px; color:#FFF;}
p {font-size:11px;}
#container_notlike, #container_like {
display:none
}
</style>
<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
FB.login(function (response) {
if (response.session) {
var user_id = response.session.uid;
var page_id = "167544069999229";
var fql_query = "SELECT uid FROM page_fan WHERE page_id = " + page_id + "and uid=" + user_id;
var the_query = FB.Data.query(fql_query);
the_query.wait(function (rows) {
if (rows.length == 1 && rows[0].uid == user_id) {
$("#container_like").show();
//here you could also do some ajax and get the content for a "liker" instead of simply showing a hidden div in the page.
} else {
$("#container_notlike").show();
//and here you could get the content for a non liker in ajax...
}
});
} else {
// user is not logged in
}
});
});
</script>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId: '270349276366373',
status: true,
cookie: true,
xfbml: true
});
</script>
<div id="container_notlike">
YOU DONT LIKE
</div>
<div id="container_like">
YOU LIKE
</div>
</body>
</html>
I have changed the APPID and PageID as necessary but not working and it keeps trying to bring up a pop up window.
It will eventually contain dynamic content in vb.net aspx file, so PHP isnt available to me.
Any ideas, can it be done server side through a SOAP or REST request?
you have to wait until the script is loaded and the FB va is init, try this flow...
if you have problem with login
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
// fired when script is loaded
window.fbAsyncInit = function() {
FB.init({
appId : '', // 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
});
//do some stuff here (Login)
};
// Load the SDK Asynchronously
(function(d){
var js;
var id = 'facebook-jssdk'
var 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>