I am using the Facebook JS code for retrieving a list of pages of which I am assigned to as an admin. I get list of all such pages but one page is somehow not showing up. I have checked all the permissions and roles, using proper app id, also the app is showing active on that page but still somehow it is not showing up in the list and I need that page for getting page access token. Also I am using manage_pages permissions in Facebook JS function.
So can someone please suggest a probable reason for the page not showing up in the list. The code I am using is below (which is completely facebook code except my app ID).
<script>
window.fbAsyncInit = function()
{
FB.init({
appId : 'xxxx6xx89xx5xxx', // app id is correct i have checked
xfbml : true,
version : 'v2.12'
});
};
(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 subscribeApp(page_id, page_access_token)
{
console.log('Subscribing page to app! ' + page_id);
FB.api(
'/' + page_id + '/subscribed_apps',
'post',
{access_token: page_access_token},
function(response)
{
console.log('Successfully subscribed page', response);
}
);
}
// Only works after `FB.init` is called
function myFacebookLogin()
{
FB.login(function(response)
{
console.log('Successfully logged in', response);
FB.api('/me/accounts', function(response)
{
console.log('Successfully retrieved pages', response);
var pages = response.data;
var ul = document.getElementById('list');
for (var i = 0, len = pages.length; i < len; i++)
for (var i=0; i < response.data.length; i++)
{
var page = pages[i];
var li = document.createElement('li');
var a = document.createElement('a');
a.href = "#";
a.onclick = subscribeApp.bind(this, page.id, page.access_token);
a.innerHTML = page.name;
li.appendChild(a);
ul.appendChild(li);
}
});
}, {scope: 'manage_pages'});
}
</script>
<button onclick="myFacebookLogin()">Login with Facebook</button>
<ul id="list"></ul>
Tell me if i missed something in the comments, but afaik it can only be those things:
You have more than 25 Pages, so you need to use the limit parameter or paging. Test it with the limit parameter: FB.api('/me/accounts', {limit: 100}, function(response) ...
You don´t have sufficient permissions for the Page
It´s a bug and you should report it to Facebook
Related
I want to add Facebook login to my website, My script is working fine but I am not sure this way is correct or not, can you someone verify and suggest If I am doing wrong. And I have few questions.
Script:
function statusChangeCallback(response)
{
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
console.log('still not authorized!');
} else {
console.log("not connected, not logged into facebook, we don't know");
}
}
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
cookie : true,
xfbml : true,
version : 'v2.8'
});
checkLoginState();
FB.AppEvents.logPageView();
};
(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 checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', { fields: 'name,email,gender' }, function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
window.location.replace('http://www.example.com');
});
}
Button display:
<div class="fb-login-button" data-onlogin="checkLoginState()" data-max-rows="1" data-size="medium" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="false" data-login-text="Sign in with Facebook"></div>
After successful login, I want to redirect to members-only.php by passing id, email. In the above script I have written window.location.replace('http://www.example.com'); instead example.com, can i give my php file name?
appId can be seen by every body, will that be fine? or we need to keep it as secret?
If the user is coming for the first time, what details we need to register in our database? and from second time how can we identify that user?
Thanks in advance.
window.location.replace('http://www.example.com/members-only.php');
It is no problem to make the App ID public. Just be careful with Access Tokens and the App Secret. They are not meant to be public.
You only need the ID to identify the user. The rest is up to you, if you want to cache it.
Having looked at this: Implement Facebook API login with reactjs
I am trying to create a Reactjs component for Facebook login.
I am using ES6 and I keep getting: "Cannot read property 'parentNode' of undefined"
Code:
'use strict';
import React from 'react';
import addons from 'react/addons'
export default class Login extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.checkLoginState = this.checkLoginState.bind(this);
this.statusChangeCallback = this.statusChangeCallback.bind(this);
this.testAPI = this.testAPI.bind(this);
}
render() {
return (
<div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="false"></div>
);
} // Render
componentDidMount() {
window.fbAsyncInit = function() {
FB.init({
appId : 'xxx',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.3' // use version 2.1
});
// Now that we've initialized the JavaScript SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3. Not logged into Facebook and can't tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
this.statusChangeCallback(response);
}.bind(this));
}.bind(this);
// 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'));
}
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
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 + '!';
});
}
// This is called with the results from from FB.getLoginStatus().
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.
this.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.';
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
checkLoginState() {
FB.getLoginStatus(function(response) {
this.statusChangeCallback(response);
}.bind(this));
}
handleClick() {
FB.login(this.checkLoginState());
}
} // Component
Any idea?
Thanks
Found the solution.
You have to add at least: <script></script> in your template, outside your component.
This error is caused because the code trying to do something with <script> but he can't found it.
On the second line of the code snippet below, the variable fjs is being initialized to an undefined value, which is then references in fjs.parentNode.
// Load the SDK asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
// ... code ...
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
I am trying to integrate javascript sdk for facebook with salesforce. I followed all instruction given on the link : http://developers.facebook.com/docs/howtos/login/getting-started/
but I am not able to login. I copy pasted same code in facebook developer consol and it works fine. Now I am confused, am I missing out something while integrating with salesforce or salesforce do not support javascript sdk for facebook?
Create a VF page with the below code. Insert your app id in the below page and you should be good to go. I have added the sdk in the static Resource.
<apex:page >
<div id="fb-root"></div>
<script type="text/javascript" src="/resource/jQueryLatest"></script>
<script>
var j$ = jQuery.noConflict();
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'yourappId', // App ID from the App Dashboard
channelUrl : '/resource/alljs', // Channel File for x-domain communication--- added the sdk in static resource.
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true // parse XFBML tags on this page?
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK's source Asynchronously
// Note that the debug version is being actively developed and might
// contain some type checks that are overly strict.
// Please report such bugs using the bugs tool.
(function(d, debug){
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" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));
j$(document).ready(function(){
j$("#loginButton").click(function(){
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.');
}
});
});
j$("#getAllFriends").click(function(){
FB.api('me/friends', function(response){
// console.log('the response ' + response.data[]);
for(var i =0; i< response.data.length;i++){
try{
var html = '<div>'+ response.data[i].name +' </div>';
j$("#jsonDiv").append(html);
}catch(e){
console.log('error name ' +response.data[i-1].name);
console.log('error ---' + e);
}
}
});
});
});
</script>
<input type="button" id="loginButton" value="login to FB"></input>
<input type="button" id="getAllFriends" value="Get Friends"></input>
<div id="jsonDiv"></div>
</apex:page>
I'm trying to add Facebook Login to my website using the Facebook Javascript SDK.
Everything seems to work, but the login popup opens with annoying scrollbars when asking for permissions (I'm already logged in Facebook). I tested it with Firefox 16, IE 9. Other sites that uses the Facbook login in a popup don't have the same behavior on my machine.
Perhaps they use a different approach?
Here is my code.. it's pretty simple, and you can just copy/paste in an html page to test it. Just set your APP-ID.
<html>
<body>
<img src="images/facebooklogin.png" id="login-fb" onclick="login();" />
<script type="text/javascript">
window.fbAsyncInit = function(){
FB.init({
appId : 'APP-ID',
status : true,
cookie : true,
xfbml : false
});
};
// 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 login()
{
facebookPerms = [
'user_photos', 'email', 'offline_access', 'user_relationships', 'read_stream',
'user_about_me', 'user_birthday', 'user_education_history', //'publish_stream',
'user_hometown', 'user_interests', 'user_location', 'user_likes',
'user_religion_politics', 'user_activities', 'user_work_history'
];
//Get the facebook login status
FB.getLoginStatus(function(response) {
if (response.session) {
// logged in and connected user, someone you know
ajaxLogin();
} else {
//Display the facebook login dialog
FB.login(function(response) {
if (response.authResponse) {
// user is logged in and granted some permissions.
// perms is a comma separated list of granted permissions
ajaxLogin();
} else {
// user is not logged in, display the error dialog box
errorNotLogged();
}
}, {
//Ask for permissions of Facebook
scope: facebookPerms.join(',')
});
}
});
}
</script>
</body>
</html>
I'm using this code, but it returns empty data array. My access_token has all permissions. I know PAGE_ID, now i need to get events from this page.Thanks
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 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
});
// Additional initialization code here
};
// 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));
var interval = setInterval(function() {
if (typeof FB != 'undefined') {
clearInterval(interval);
FB.api('/' + PAGE_ID +'/events?access_token=' + ACCESS_TOKEN, function(response) {
//do something with response
});
}
}, 20);
</script>
It's not clear from your code how you are obtaining the access_token - are you using the access token for the page\account for which you need to retrieve the events? The way I have been doing it (not sure where I picked up this technique) for page events is to loop through the user accounts to get the access token for the page in question. Something like this (php)
$accounts = $facebook->api('/me/accounts');
foreach($accounts['data'] as $account){
if($account['id'] == $page_id){
$page_access_token = $account['access_token'];
}
}
My first access_token for my APP which i get from http://developers.facebook.com/tools/explorer/ was wrong. (Maybe it's only for test mode) Because i couldn't get events by this access_token.
On http://developers.facebook.com/docs/authentication/applications/ was written:
App Access Tokens generally do not expire. Once generated, they are valid indefinitely.
To obtain an App Access Token, perform an HTTP GET on:
https://graph.facebook.com/oauth/access_token?client_id=YOUR_APP_ID&client_secret=YOUR_APP_SECRET&grant_type=client_credentials
I got access_token using HTTP GET, by this access_token i get events from facebook page: https://graph.facebook.com/PAGE_ID/events