so far I am following the facebook doc to get started to connect webapp to facebook api. but i am lost somewhere.
"<script>"
$(document).ready(function() {
$.ajaxSetup({
cache: true
});
$.getScript('//connect.facebook.net/en_US/sdk.js', function() {
FB.init({
appId: '{app-id}',
version: 'v2.5' // or v2.0, v2.1, v2.2, v2.3
});
$('#loginbutton,#feedbutton').removeAttr('disabled');
FB.getLoginStatus(updateStatusCallback);
});
});
"</script>"
where and how should i wright the fql query
what is the access token, does it changes over time for same page.
where should i give the access token to get the data from facebook.
<html>
<head>
<meta charset="utf-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
</head>
<body style="background-color:#cfeae3;">
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<your app id>',
xfbml : true,
version : 'v2.5'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function getData(){
FB.getLoginStatus(function(response) {
if (response.status == 'connected') {
city = $('#city').val(); FB.api("<query>",function(responses){
}else if (response.status === 'not_authorized') {
alert("not auth");
document.getElementById('response').innerHTML = 'not logged in' ;
} else {
alert("not conne");
document.getElementById('response').innerHTML = 'not connected';
}
});
}
</script>
<div class="container">
<div id="tfheader" align="center">
<input type="text" class="tftextinput" name="q" id= "city"/>
<input id="btn" class="tfbutton" type="submit" onclick="getData()" />
</div>
</body>
</html>
Related
I have a code that works in one web, and when I try it in another web it doesnt work. The code should build a login button but the button is not displayed because it seems that the app id is not sent. The code:
<div id="fb-root"></div>
<?php
defined('_JEXEC') or die;
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img class='loading' src='http://fshf.org/images/loading.gif' alt='loading...' style='margin-left:261px; margin-top:40px' />";
</script>
<link href="modules/mod_facebook/tmpl/css/style.css" rel="stylesheet" type="text/css">
<script>
$(document).ready(function() {
$("#close").click(function(){
$("#erresira").remove();
$("#popup").remove();
});
$("body").prepend( "<div id='erresira'></div>" );
var window_h = $(window).height()/2;
var window_w = $(window).width()/2;
$("#popup").css({top:window_h,left:window_w});
$("#popup").animate({
left: "-=230px",
width: "+=460px",
top: "-=127px",
height: "+=254px"
}, 0 );
});
</script>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '205862336256764',
channelUrl : 'http://livebast.infoalbania.org/modules/mod_facebook/tmpl/channel.html',
status : true,
cookie : true,
xfbml : true
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
allowed();
} 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 allowed() {
FB.getLoginStatus(function(response) {
var page_id = "184393808323569";
var user_id = response.authResponse.userID;
var uid = response.authResponse.userID;
var loadUrl = "http://livebast.infoalbania.org/modules/mod_facebook/tmpl/ajax.php";
$("#result").html(ajax_load).load(loadUrl+"?user_id=" + uid );
});
}
</script>
<div id="result"></div>
<div id="popup">
<div id="login"> <img src="<?=$params->get('image');?>" />
<p><strong>
<?=$params->get('content');?>
</strong></p>
<div id="appp">
<fb:login-button show-faces="true" width="230" max-rows="10"></fb:login-button>
</div>
<div id="like">
<fb:like href="https://www.facebook.com/LiveBast" width="330" show_faces="false" send="false"></fb:like>
</div>
</div>
<div id="close" class="close"></div>
</div>
the second page (the one where the code does not work is: livebast.infoalbania.org and is on a PLESK server)
can this be an issue of a misconfiguration of the subdomain?
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>
I am using the following code for facebook authentication.
<html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '498085136....',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
(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));
//LOGIN FUNCTION
function login() {
FB.login(function(response) {
if (response.authResponse) {
alert('Success!');
}else{
alert('Login Failed!');
}
}, {scope: 'email'});
}
</script>
<div onclick="login();">Login with Facebook</div>
</body>
</html>
I dont know what's wrong with that code. When i check my error console, it shows FB is not defined..
Thanks in advance.
Make your html tag like this
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
I have developed a web page as follow, would you please help me why this code does not work?
When i liked the page, alert in FB.Event.subscribe('edge.create' does not display!?
http://www.mandanemedia.com/freelancer/
<div >
<div id='subscribe' style='padding:10px; background:#fff;'>
<center>
<img src="fbbutton.jpg" style="width:290px; height:88px;"/>
</center>
<fb:like-box href="http://www.facebook.com/pages/MandaneMediacom/275554465891715" width="292" show_faces="true" border_color="#fff" stream="false" header="false"></fb:like-box>
</center>
</div>
</div>
<div id="fb-root"></div>
</body>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId:'275554465891715',
status:true,
cookie: true,
xfbml: true
});
FB.Event.subscribe('edge.create', function(response) {
alert('You liked the URL: ' + response);
});
};
(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#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Beeing new with the facebook thing. How do you get the user information after the log in?
Here is the code:
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
(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>
<p><fb:login-button autologoutlink="true"></fb:login-button></p>
</body>
I red that I have to subscribe to the auth.login event and then use the FB.api... great but how do you do that?
I tried the following:
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
FB.auth.login{
FB.api('/me', function(response) {
alert(response.name);
});
}
};
(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>
<p><fb:login-button autologoutlink="true"></fb:login-button></p>
</body>
Thanks for the help. And sorry if I look stupid...
Once you initialize the facebook sdk (using FB.init) you can start using it for requests, events, etc.
The documentation talks about 5 Auth Methods. Which one you need depends on what you want to do and if the user already authorized your application and the permissions you are about to use.
If the user is not logged in to your application you need to use login method:
FB.login(function(response) {
if (response.authResponse) {
// logged in
}
else {
// not logged in
}
});
If he is already logged in, or you don't know what his status use getLoginStatus:
FB.getLoginStatus(function(response) {
if (response.status === "connected") {
// the user is logged in and has authenticated your app
FB.api("/me", function(apiresponse) {
console.log("api result: ", apiresponse);
});
}
else if (response.status === "not_authorized") {
// the user is logged in to Facebook, but has not authenticated your app
}
else {
// the user isn't logged in to Facebook.
}
});
To make api requests use the api method as in the example I gave you.
For the very beginners: I had to put the piece of code Nizan gave me and add it after the FB.init call as following:
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
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
alert("You are logged in");
}
else if (response.status === "not_authorized") {
// the user is logged in to Facebook, but has not authenticated your app
}
else {
alert("You are not logged");
}
});
};
(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>
<p><fb:login-button autologoutlink="true"></fb:login-button></p>
</body>
</html>