I'm currently trying to allow user to connect to my site with their Facebook account but I have some issues.
First of all, you have to know that I already added a Like button with this code:
<div id="fb-root"></div>
<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/fr_FR/all.js#xfbml=1&appId=myappid";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">
var urlfb = document.location.href;
$(document).ready(function(){
$('fb\\:like').attr('href', urlfb);
});
</script>
So I saw the post of Facebook on how to add Facebook Login to his website but each time I launch the page where I pasted the FB code, there is this famous error message: FB.init has already been called - this could indicate a problem.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'myappid', // 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
});
What do I have to do to remove this error ? I tried to remove my Like button and no more error but I want to keep this like button, so what do I have to delete to make it works ?
Any ideas ?
Thanks
Adding #xfbml=1&appId=myappid to the end of the SDK URL makes it automatically initialze itself – so just remove that part, change
js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=myappid";
into
js.src = "//connect.facebook.net/fr_FR/all.js";
Related
My Send-to-messenger plugin is not appearing on my website.
Here is my config:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxx',
autoLogAppEvents : true,
xfbml : true,
version : 'v3.0'
});
};
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-send-to-messenger"
messenger_app_id="xxxxx"
page_id="vvvvv"
color="blue"
size="large">
</div>
The html generated by this code on this page: https://www.weekendr.eu/bonsplans seems ok, but the button would still not appear.
Some elements which may help :
I'm on prod env
My website has https: https://www.weekendr.eu
My app is published and online
I'm admin and connected to FB besides
I allow third-party cookies
Thanks !
I can see your code and found you are missing to subscribe event.
FB.Event.subscribe('send_to_messenger', function(e) {
// callback for events triggered by the plugin
});
Please find full code below :
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v3.2'
});
FB.Event.subscribe('send_to_messenger', function(e) {
// callback for events triggered by the plugin
console.log(e);
});
};
(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 = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-send-to-messenger"
messenger_app_id="<Your App ID>"
page_id="<Your Page ID>"
data-ref="1"
color="blue"
size="large">
</div>
In extra, you need to follow below steps before you write above code:
1) Add your domain into the white list (Go to your facebook page -> setting)
2) Create webhook in your server and write below code (Code is in PHP. You can use any language)
For node js: https://developers.facebook.com/docs/messenger-platform/getting-started/webhook-setup
<?php
if($_SERVER["REQUEST_METHOD"] == "POST") {
//Write code to listen webhook request
} else {
$VERIFY_TOKEN = '1234';
$mode = $_REQUEST['hub_mode'];
$token = $_REQUEST['hub_verify_token'];
$challenge = $_REQUEST['hub_challenge'];
if ($mode && $token) {
// Checks the mode and token sent is correct
if ($mode === 'subscribe' && $token === $VERIFY_TOKEN) {
// Responds with the challenge token from the request
console.log('WEBHOOK_VERIFIED');
echo $challenge;
http_response_code(200);
} else {
// Responds with '403 Forbidden' if verify tokens do not match
http_response_code(403);
}
} else {
http_response_code(403);
}
}
?>
3) Goto apps settings and verify your webhook
Setting URL :
https://developers.facebook.com/apps/<Your App ID>/messenger/settings/
Now you should be able to view the "Send to Messenger" button
Note: If app is in development then Admin, developer & tester can only see this button.
You need to whitelist your domain (https://www.weekendr.eu) in the Messenger Profile for your page:
https://developers.facebook.com/docs/messenger-platform/reference/messenger-profile-api/domain-whitelisting
I'm assuming you are replacing all the xxx and vvv with your actual app ID and Page ID, as well.
In my case, the issue is because my Ad blocker (uBlock) blocks the call to facebook. Disabling uBlock solve the issue.
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
I have used the Social Plugin in the past to place an HTML newsfeed on a website. I'm trying to do the same thing, but I'm not getting the feed to display. In fact, if I visit https://developers.facebook.com/docs/plugins/activity the demo is not displaying. Could this be something with my browser, or a bug in the plugin? Any guidance is much appreciated!!
I have this immediately after the body tag, and I have the html pasted in it's proper place.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the app dashboard
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(){
// If we've already installed the SDK, we're done
if (document.getElementById('facebook-jssdk')) {return;}
// Get the first script element, which we'll use to find the parent node
var firstScriptElement = document.getElementsByTagName('script')[0];
// Create a new script element and set its id
var facebookJS = document.createElement('script');
facebookJS.id = 'facebook-jssdk';
// Set the new script's source to the source of the Facebook JS SDK
facebookJS.src = '//connect.facebook.net/en_US/all.js';
// Insert the Facebook JS SDK into the DOM
firstScriptElement.parentNode.insertBefore(facebookJS, firstScriptElement);
}());
</script>
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I am new to developing websites with Facebook SDK. So please bear with me.
Below is my simple code for verifying that I am logged into Facebook.
For some reason I always get the 'not_autherized' response, even though I am the only developer of my app. The app number I provide is correct.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'censored app id', // App ID from the app dashboard
status : true, // Check Facebook Login status
cookies : true,
xfbml : true // Look for social plugins on the page
});
FB.getLoginStatus(checkLoginStatus);
function checkLoginStatus(response) {
if (response && response == 'connected') {
alert('User is authorized!');
} else {
alert('User not authorized!!!');
}
};
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(d, s, id) {
if (d.getElementById(id)) return;
var js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
var fjs = d.getElementsByTagName(s)[0];
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
Is there anything I have overlooked?
Much appreciated :)
A friend helped me with this. He very helpfully pointed out something that Facebook has neglected to document.
When you create a new facebook application, then it is NOT automatically authorized by the admin and developers. An authorized application is one that exists in the "Account Settings->Apps" list. If it is not in this list, then it is not authorized.
This means that you need to call FB.login() at some point in your code in order to popup the user authorization window.
Mind you, this should be called from a button. Otherwise, the popup could be blocked.
Hope this helps someone else but me.
Cheers :)
How can I resolve the resize of facebook app on IE ?
the FB.Canvas.setSize() is not working.
Thanks!
Since there's very little to go on in your question. No example url, no code example. I can only guess. So here's where to start.
1) Be sure to include the Javascript SDK inside of script tags.
<script>
// 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));
</script>
2) Be sure to include the fb-root div inside of the body
<body>
<div id="fb-root"></div>
...your html here...
</body>
3) Be sure to do the FB.init() and FB.Canvas.setSize() after the javascript SDK has had a chance to load. Meaning do it inside of your window.fbAsyncInit
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.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
});
};
4) Make sure you have specified your APP ID and also the correct location for a valid ChannelUrl