I was trying to implement a simple Facebook social plugin comment box onto my website. The URL of the box is not static, since every post on my site has one of them, but is generated using PHP.
I got it working fine for a while, but suddenly it stopped doing so and now I can't get it back again. I'm not too familiar with Facebook development, so I might've made a mistake in the code.
Here's how I load the Facebook Javascript SDK (I changed some fields for anonymity):
<div id='fb-root'></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : MY_ID,
channelUrl : 'http://www.mysite.com/channel.php',
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));
</script>
And here is how I initialize the comment box:
<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=MY_ID';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class='fb-comments' data-href='http://mysite.com/post?id=<?php echo $id; ?>' data-num-posts='4' data-width='470'></div>
Here's channel.php:
<?php
header("Pragma: public");
$cache_expire = 60*60*24*365;
header("Cache-Control: max-age=".$cache_expire);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
?>
<!DOCTYPE html>
<script src="//connect.facebook.net/en_US/all.js"></script>
I pasted the scripts at the end of the page in the body. Right now, nothing is showing up at all— no errors, just blank. Any help about getting this to work would be greatly appreciated.
Sorry guys, but the whole thing was caused by a stupid mistake of mine: I had a Firefox addon that was blocking the commenting box. It actually works fine. I apologize for my mistake.
Related
I inserted fb messenger plugin code in my website. Whenever I am clicking this plugin, the language changes. I am not using VPN. I also checked my IP address and it is located in my country. Even on mobile device, the language changes.
This helped me. I changed URL in SDK code the js.src parameter from:
js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
To:
js.src = 'https://connect.facebook.net/en/sdk/xfbml.customerchat.js';
Notice that in the first URL there is /en_US/ and in the second there is only /en/. Now I have Facebook chat in english. Still better than random foreign language. I'm following this thread for better solution.
My code:
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v4.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/sdk/xfbml.customerchat.js';
//js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="{Your page id}"
theme_color="{Your theme color}"
logged_in_greeting="Hi! How can we help you?"
logged_out_greeting="Hi! How can we help you?">
</div>
Here is my solution
Set up a new Chat plugin again, and choose English UK instead of default English us. It worked for me. check this image Click to View
Their latest Chat Plugin v14 is unstable, switch to an older version. I'm on v6 and there's no language issue.
<!-- Messenger Chat Plugin Code -->
<div id="fb-root"></div>
<!-- Your Chat Plugin code -->
<div id="fb-customer-chat" class="fb-customerchat">
</div>
<script>
var chatbox = document.getElementById('fb-customer-chat');
chatbox.setAttribute("page_id", "000000001");
chatbox.setAttribute("attribution", "biz_inbox");
</script>
<!-- Your SDK code -->
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v6.0' // <----- Change version here
});
};
(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>
If the problem is still occurs, you can override the src like this, add
?locale=en_US or any language you like at the end of url
https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js?locale=en_US
Has anyone had success using the Facebook SDK in your react web (not native) project? There doesn't seem to be any good documentation on it.
Specifically. Where to I call the init function?
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.9'
});
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'));
</script>
If I add it on every page, FB.AppEvents.logPageView() does not load/register back to Facebook ( I don't see it when debugging events). If I add the init code on my main app.js, and then just add FB.AppEvents.logPageView() on individual pages I sometimes get an console error that FB.AppEvents can't be found.
What is the best practice for integrating the Facebook SDK in a react web app?
Did you have app-id and set it in your code?
https://developers.facebook.com/apps/
There may be many approaches, I am currently using that approach to do this:
Add the Facebook SDK for JavaScript in index.html page where you are placing your whole app component. Also add <div id="fb-root"></div> after the start of body tag in the same index.html file.
<body><div id="fb-root"></div><div id="root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.9'
});
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'));
</script></body>
The above snippet initialises the window.FB variable once your app component mounted. You can use this variable to do window.FB.AppEvents.logPageView() and any other stuff such as accessing graph API.
There is one issue that can be arises and that is when the component is mounted, things works fine, but once, its un-mounted and you can come back to this component, things may not work fine such as fb comments or like plugin. To tackle this issue you have to put the following line: if (window.FB) {window.FB.XFBML.parse();} in ComponentDidMount() life cycle method of every component in which you are accessing facebook stuff. It will re-parse the dom after mounting your component.
I am trying to start with facebook development, following this link: https://developers.facebook.com/docs/javascript/quickstart/v2.2?locale=en_GB
so I pasted this code inside the body tag:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '12323432423',
xfbml : true,
version : 'v2.1'
});
};
(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'));
</script>
Then I added this as mentioned in the walkthrough:
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
My question is, is the appId the same as page Id? I am trying to deal with my page on facebook, and to get people to like it or post to iT. Am I going the right way?
This code is not working, I am getting nothing on my page.
No, App ID is an App ID, you need to create one here: https://developers.facebook.com/apps
Btw, dont forget to add the data-href parameter with your Page URL in the Like Button div.
I added Facebook Comment Box to my site manually. I created an app and pasted the code on my template files.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '730627806953221', // 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(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Then I added this:
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="430" style="max-width: 100%;"></div>
It seems to work, when a user comments it displays correctly. However when I try to reply to someone who left a comment it doesn´t stay there. I´m trying to reply as a brand not as myself.
Why could this be?
I've added a facebook comment box on my website, but its only loading around 40% of the time. The other 60% nothing happens. I've tried to do some troubleshooting and came up with that, the times its not loading the height of the box is set to 0px, but when its loading it says 160px, as its supposed to.
Here is all the code related to the commentbox.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
The following is right after the body tag.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '389788207743820', // App ID
channelUrl : 'file:///C:\Users\ts10027\Documents\Mina webbplatser\recensionsida\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
});
};
(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 = "http://connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<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/sv_SE/all.js#xfbml=1&appId=389788207743820";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
and this is placed where I want my box
<div class="fb-comments" data-href="http://www.stadskoll.nu/restaurang/harrys.php" data-num-posts="2" data-width="565px" data-height="160"></div>
Thanks in advance
If that's the code you're actually using, there are a few things you need to change:
channelUrl : 'file:///C:\Users\ts10027\Documents\Mina webbplatser\recensionsida\channel.html', // Channel File
This has to be on a public URL, just move the file somewhere on the server where it can be accessed by anybody.
Next, you have to and you're including the JS SDK two times? You might want to double check that: https://developers.facebook.com/docs/reference/javascript/