I have added facebook SDK in my web project, and i am printing all the values through id but i have one doubt.How to get the dynamic id value through jquery or javascript.
My Code
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
var fullname = document.getElementById('admin_name').innerHTML = response.name;
});
//Displaying through html
<span id="admin_name"></span> and it's printing successfully.
But when i wants to get the id value through jquery or javascript it's coming null or empty.
//Jquery Code
$(document).ready(function () {
var adminName = $("#admin_name").text();
alert(adminName);
});
My Complete Login As Facebook Code
function statusChangeCallback(response)
{
console.log(response);
if (response.status === 'connected') {
testAPI();
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {FB.init({
appId : '12345678910',
cookie : true,
xfbml : true,
version : 'v2.2'
});
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// 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;
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function testAPI() {
FB.api('/me', function(response) {
var fullname = document.getElementById('admin_name').innerHTML = response.name;
});
}
And Calling through FB Login Button
<fb:login-button max_rows="1"
size="large"
show_faces="false"
auto_logout_link="false"
onlogin="checkLoginState();">Login with Facebook
</fb:login-button>
Your problem is one of timing. The dom is going to grab what value is currently there, not one that will be there soon. At the time $(document).ready is called, your FB.api has not. Therefore, it will return null. Call the function after your FB.api is called.
Programmatically:
Stick your alert code in a function
alertMe = function(){
$(document).ready(function () {
var adminName = $("#admin_name").text();
alert(adminName);
});
}
and call that function when your FB API is done doing its thing
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
var fullname = document.getElementById('admin_name').innerHTML = response.name;
alertMe(); //send the call for the alert
});
Related
I am trying to embed the Facebook login functionality to grant users access to my website. My issue is that the script auto-triggers the login (and the redirect to the "/views/test_view.php") but I only want this triggered when someone clicks the facebook button.
As you can see in the code I tried to add a on-click event and override the standard function in the login button but it didn't work.
Any ideas on how to change the script to only be executed "on click" would be greatly appreciated! Thanks!
<script>
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId: '1783721038549063',
xfbml: true,
version: 'v2.6'
});
FB.getLoginStatus(function(response) {
statusChangeCallback(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function testAPI() {
window.location.href = "/views/test_view.php";
};
window.onload = function() {
document.getElementById("facebook").onclick = function checkLoginState() {};
function wait() {
console.log("wait called");
}
}
</script>
<fb:login-button id="facebook" auto_logout_link=true scope="public_profile,email" size=large onlogin="wait():">
</fb:login-button>
<div id="status">
</div>
Found the solution:
first load the FB api
them wrap everything else in the onclick listener
window.fbAsyncInit = function() {
FB.init({
appId : '1783721038549063',
xfbml : true,
version : 'v2.6'
});
};
(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'));
window.onload = function() {
document.getElementById("facebook").onclick = function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
}
function statusChangeCallback(response)
{
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected')
{
// Logged into your app and Facebook.
testAPI();
}
else if (response.status === 'not_authorized')
{
// The person is logged into Facebook, but not your app.
FB.login(function(response)
{
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
});
}
else
{
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
FB.login(function(response){
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
});
}
}
function testAPI() {
window.location.href= "/views/landing_view.php";
}
</script>
I have created an app on Facebook. I want to refer that app to a friend so for that I want to display the list of friends. I'm getting only user info but not the friend list.
I have used the below code, please help me get the friend list.
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxxxxxxx',
xfbml : true,
version : 'v2.4'
});
function onLogin(response) {
if (response.status == 'connected') {
FB.api('/me?fields=first_name', function(data) {
var welcomeBlock = document.getElementById('fb-welcome');
welcomeBlock.innerHTML = 'Hello, ' + data.first_name + '!';
});
}
}
FB.getLoginStatus(function(response) {
// Check login status on load, and if the user is
// already logged in, go directly to the welcome message.
if (response.status == 'connected') {
onLogin(response);
} else {
// Otherwise, show Login dialog first.
FB.login(function(response) {
onLogin(response);
}, {scope: 'user_friends, email'});
}
});
};
(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 getFriends() {
alert("in friends");
FB.api('/me/friends', 'GET',{},
function(response) {
if (response.data) {
console.log(response.data);
$.each(response.data,function(index,friend) {
console.log(friend.name +'has id:'+friend.id);
// alert(friend.name);
});
} else {
alert("Error!");
}
});
}
You don't even request the friends in your code. Since Graph API v2.0, you'll only receive the friends which are also using your app, and not all friends.
Use
FB.api('/me?fields=first_name,friends', function(data) { ... });
In App Friends
FB.api("/me/friends",function(res) {
console.log(res)
});
doc
Inviable Friends(only in Game)
FB.api("/me/invitable_friends",function(res){
console.log(res)
});
doc
I had referred many articles but It couldnt solve this issue. Im trying to get the user feeds from facebook.How can i get it.
Here is my code:
var newMod = angular.module('newapp', []);
newMod.controller('mainCtrl', function ($scope) {
window.fbAsyncInit = function () {
//SDK loaded, initialize it
FB.init({
appId: 'your app id',
xfbml: true,
version: 'v2.3'
});
//check user session and refresh it
FB.getLoginStatus(function (response) {
if (response.status === 'connected') {
//user is authorized
document.getElementById('loginBtn').style.display = 'none';
getUserData();
} else {
//user is not authorized
}
});
function getUserData() {
FB.api('/me', function (response) {
document.getElementById('response').innerHTML = 'Hello ' + response.name;
document.getElementById('dialog_div').style.border = '1px solid red';
document.getElementById('dialog_div').innerHTML = response;
});
}
};
//load the JavaScript SDK
(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'));
$scope.loginClick = function () {
FB.login(function (response) {
if (response.authResponse) {
//user just authorized your app
document.getElementById('loginBtn').style.display = 'none';
getUserData();
}
}, { scope: 'email,public_profile', return_scopes: true });
}
});
my html code:
<body ng-app="newapp">
<div ng-controller="mainCtrl">
<button id='loginBtn' ng-click="loginClick()" >FacebookLOGin</button>
<div id="response"></div>
<div id="dialog_div"></div>
</div>
from getuserdata() Im able to get the user details. Now how to access the user feeds. I had tried to use the below code but it outputs empty array.
FB.api("/me/feed",function(response){
if(response !="" ){
// access the feed data
}
})
Can anyone explain me the way to get the user feeds after user login.
I got to know the mistake that was done.
Here the session will be expired when the person tries to access the feeds.
So include the FB.api('/me/feed',function(response){}) in the code section FB.login(function(response) {})
Now the session will be able to access the userfeeds.
Your app needs the user_posts to get the user's feed. The /user/feed doc explains that pretty well. In any case, you need to implement facebook login, ask for user_posts permission from your user and go from them to get the user's feed.
I wish to track users which were presented with the Facebook Login dialog popup, and chose to close it (by clicking "cancel" or just closed the popup window).
I am using Facebook SDK and invoking FB.login()
From the docs it's unclear, but it does appear there might be some way to track this, so, if anyone here knows how, or can help, it would be appriciated. Thanks!
complete code:
var facebook = (function(){
// Configuration
var serverDomain = '365scores.com',
appID = '158698534219579';
// 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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function(){
FB.init({
appId : appID,
cookie : true, // enable cookies
xfbml : true, // parse social plugins on this page
version : 'v2.0' // use version 2.0
});
FB.getLoginStatus(FBLoginStatus);
FB.Event.subscribe('auth.authResponseChange', FBLoginStatus);
};
function FBLoginStatus(response){
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if( response.status === 'connected' ){
// Logged into your app and Facebook.
//connected(response);
$(document).trigger('connection', ['facebook', response]);
}
else if( response.status === 'not_authorized' ){
// The person is logged into Facebook, but not your app.
}
else{
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
}
};
function checkLoginState() {
FB.getLoginStatus(function(response) {
FBLoginStatus(response);
});
}
function connected(res){
console.log( res )
console.log('FACEBOOK CONENCTED');
/*
FB.api('/me', function(response){
});
*/
}
return FBLoginStatus;
})();
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.');
}
});
All I want is to use alert to display the name of the logged in user and prompt the user to login if not logged in.
Please help, I've been online for about 4 hrs not getting the facebook graph api
this is the code from facebook.com
i do not know exactly how to manipulation this code. i have tried to add three lines towards the end...
<script>
function statusChangeCallback(response){
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
document.getElementById('status').innerHTML = 'Please log ' + 'into this app.';
} else {
document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.';
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '1608304139394721',
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse social plugins on this page
version : 'v2.0' // use version 2.0
});
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// 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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML ='Thanks for logging in, ' + response.name + '!';
name=response.name;
alert(name);
});
}
</script>
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();"></fb:login-button>
I added these 2 lines to the code above but it doesn't even login. Also, it doesn't alert the user's name.
name=response.name;
alert(name);
Your code is valid and works fine, in JavaScript code is being executed line after line while it stops executing whenever there's an error(s) on the current line which is being executed, your error is:
as you can in your code your alert(name) comes after that line which occurred that error
Solution
pretty simple add an element (div) with id status to your document to avoid that error
<div id="status"></div>
or use jQuery as a DOM selector