As instructed by this page, I include the SDK snippet into my page, except that since I don't have any Facebook APP and I was just trying to build a custom share button on my page, I leave parameter "app-id" as null. To test if it is up and running, on console I execute
FB.getLoginStatus(function(response){
console.log(response)
})
while I am logged in FB. However, it returns undefined, which means there is no response. What is wrong? Is this because I didn't assign a "app-id"?
It depends on where you're calling getLoginStatus from and in what order. It needs to be inside your fbAsyncInit function:
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.4'
});
FB.getLoginStatus(function(response){
console.log(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'));
That should load the SDK, initialize everything, then get your login status.
Related
I am trying to add Facebook User Authentication, for Graphcool. For React, they have provided a snippet to initialize the SDK. However, since I am using React Native, "document" is not a variable. There is no tutorial for React Native on this. Any workarounds?
_initializeFacebookSDK() {
window.fbAsyncInit = function() {
FB.init({
appId : FACEBOOK_APP_ID,
cookie : true, // enable cookies to allow the server to access the session
version : FACEBOOK_API_VERSION // use Facebook API version 2.10
});
};
(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'));
}
User Facebook's FBSDK library for react-native and follow the installation and initialization implementations provided by them.
https://github.com/facebook/react-native-fbsdk
When I look for "items to fix to upgrade" area for my Facebook application I see returns like:
Api Upgrade Tool Return
However, I am using the latest sdk as follows:
Html:
<script src="/Content/scripts/facebook/sdk.js" type="text/javascript"></script>
Javascipt:
window.fbAsyncInit = function () {
FB.init({
appId: '<%=ConstantValues.FACEBOOK_CLIENT_ID%>',
xfbml: true,
version: 'v2.8'
});
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'));
and making calls with get as follows:
var fb = new FacebookClient(accessToken);
dynamic fbUser = fb.Get("me?fields=email,first_name,last_name,birthday,location,gender");
What am I missing and why am I getting that returns in my api calls?
(I use ASP.NET, C# and Facebook Nuget package v7.0.6 and despite all changes I made my application version is still 2.2)
I'm trying to add a facebook share to my react application. There is a lot of detail on Stackoverflow around adding FB.XFBML.parse()
How ever i'm a lint error "FB is not defined". What is the best way to load FB?
edit
window.fbAsyncInit function added.
"use strict";
var React = require('react');
var Router = require('react-router');
var Link = Router.Link;
var ThanksPage = React.createClass({
componentDidMount: function() {
(function (d, s, id) {
const fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
const js = d.createElement(s); js.id = id;
js.async = true;
js.src = '//connect.facebook.net/fr_CA/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
FB.XFBML.parse();
};
},
render: function() {
return (
);
}
});
module.exports = ThanksPage;
You can only use FB after FB.init:
componentDidMount() {
window.fbAsyncInit = function() {
//SDK loaded, initialize it
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.6'
});
//JS SDK initialized, now you can use it
FB.XFBML.parse();
};
//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'));
}
Also, make sure to use this with a server (public or localhost), don´t just open the html file in your Browser. You should also consider putting the Facebook stuff in a separate file, so you can use it in future projects. But first, make sure it works and make sure you understand what´s happening.
Keep in mind that you may need to use FB.XFBML.parse in componentDidUpdate too. You have to make sure the JS SDK is loaded already for that. componentDidMount will only get called once, and if you go to another route and back to this component, it will be cached and you need to parse Social Plugins again.
More information about the JS SDK: http://www.devils-heaven.com/facebook-javascript-sdk-login/
You can get rid of the linting error by using /*global FB*/ at the head of your files, or (much better) by defining FB in the .eslintrc file (if using ESLint):
"globals": {
"FB": true
}
You are trying to execute
FB.init();
FB.XFBML.parse();
When the SDK is not even loaded, so, of course, you will get the undefined reference error.
You are missing the callback
window.fbAsyncInit = function() {
// Example: Standard initialization code:
FB.init({
appId : '{your-app-id}',
status : true,
xfbml : true,
version : 'v2.4' // or v2.0, v2.1, v2.2, v2.3
});
FB.XFBML.parse();
};
This code loads the SDK asynchronously so it does not block loading
other elements of your page. This is particularly important to ensure
fast page loads for users and SEO robots.
The URLs in the above code are protocol relative. This lets the
browser to load the SDK over the same protocol (HTTP or HTTPS) as the
containing page, which will prevent "Insecure Content" warnings.
The function assigned to window.fbAsyncInit is run as soon as the SDK
is loaded. Any code that you want to run after the SDK is loaded
should be placed within this function and after the call to FB.init.
For example, this is where you would test the logged in status of the
user or subscribe to any Facebook events in which your application is
interested.
Furthermore, you should set the callback before loading the SDK
window.fbAsyncInit = function() {
// Example: Standard initialization code:
FB.init({
appId : '{your-app-id}',
status : true,
xfbml : true,
version : 'v2.4' // or v2.0, v2.1, v2.2, v2.3
});
FB.XFBML.parse();
};
(function (d, s, id) {
const fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
const js = d.createElement(s); js.id = id;
js.async = true;
js.src = '//connect.facebook.net/fr_CA/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
If you want to add any social share buttons to your react pages then you can try out npm module react-share which is very easy compared to native APIs by FB, Twitter etc.
Sample react-share code snippet at https://samvikshana.weebly.com/blog/react-share-social-share-widgets
Having issues getting the Share Dialog to work properly. My code is as follows (in slim):
doctype html
html
head
title test page!!!
javascript:
window.fbAsyncInit = function () {
FB.init({
appId: 'xxx',
xfbml: true,
version: 'v2.2'
});
};
(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'));
body
h1 Facebook custom share button test
a href='#' Testing!!
javascript:
document.getElementsByTagName('a')[0].addEventListener('click', function() {
FB.ui({ method: 'share', href: 'http://www.washingtonpost.com' }, function(resp) {});
return false;
});
My app setting on Facebook (development app) are setup correct (Site URL is set to http://localhost:3000/).
In summary, everything works except for the message that the user can type into the dialog here:
That value never shows up when the post reaches the user's timeline feed:
I think I'm following the documentation correctly. What am I missing?
This appears to be a bug in sdk!
https://developers.facebook.com/bugs/395435640603415/
I added the facebook like button which I generated on the developer`s site, but the problem is that when when I change my url the like button counter changes:
url : http://localhost/ci/ --> 7 likes
url : http://localhost/ci/fr/--> 0 likes
sdk:
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'xxx', // App ID from the App Dashboard
channelUrl : 'http://localhost/ci', // Channel File for x-domain communication
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));
like button init from https://developers.facebook.com/docs/reference/plugins/like/:
<script>(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&appId=xxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
How can i have the same counter for each page?
you have not tried HTML tag?
<div class="fb-like" data-href="http://URL_SAME" data-send="true" data-width="450" data-show-faces="true"></div>
with same url in data-href ???