The instructions are extremely simple and easy
I have generated the following code through the "Customer Chat Plugin Setup"
<!-- Load Facebook SDK for JavaScript -->
<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 = '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="124030157608968">
</div>
but the chat icon does not appear.
Any suggestions?
Can You try to change
js.src attribute to:
js.src =
"https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12"
This can be a temporary issue Live Chat Disappeared #Nov 19, 2018, 10:07 AM
Related
Working solution
Found the answer on this article by Simoa Hava
Problem
We have implemented the Facebook customer chat using GTM. While version 2.11 worked fine, v2.12 doesn't work as it doesn't allow me to add the code below
Implementation guidelines
<!-- Load Facebook SDK for JavaScript -->
<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 = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
page_id="xxxxxxxxxxxxxx"
theme_color="#921710"
logged_in_greeting="Hi! Got any questions? Ask us anything, or get stuck in for more inspiration!"
logged_out_greeting="Hi! Got any questions? Ask us anything, or get stuck in for more inspiration!">
</div>
The error I get is
Invalid HTML, CSS or JavaScript found in template.
Previous working code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxx',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.11'
});
};
(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'));
jQuery('body').append('<div class="fb-customerchat" page_id="xxxxxxxxxx" minimized="false"> </div>');
</script>
Updated code with jQuery - Still shows error
<!-- Load Facebook SDK for JavaScript -->
<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 = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your customer chat code -->
jQuery('body').append('<div class="fb-customerchat" page_id="xxxxxxxxxxx" theme_color="#921710" logged_in_greeting="Hi! Got any questions? Ask us anything, or get stuck in for more inspiration!" logged_out_greeting="Hi! Got any questions? Ask us anything, or get stuck in for more inspiration!" minimized="true"></div>');
Any help will be much appreciated :)
i want to integrate a fb like box in a smarty tpl file. At this time only the iframe solution works fine, but there is no language support and that's why I want to use the new solution for the box.
The following code does not render the box in the tpl:
<div class="fb-page" data-href="https://www.facebook.com/myfbpage"
data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/myfbpage">
My Facebook Page</blockquote>
</div></div>
Is there a solution?
The Language of the Facebook Page Plugin is defined by the version of the Facebook JS-SDK that is loaded on your page
<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/de_DE/sdk.js#xfbml=1&version=v2.5&appId=119010228291102";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
This will render the Page Plugin in German and
<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/en_US/sdk.js#xfbml=1&version=v2.5&appId=119010228291102";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Will render it in english.
Just replace the locale in the URI to the locale you want to use on this page.
I am trying to add a Facebook Page Plug-in to my web page. I am not using any content managing systems, just plain HTML & CSS. I keep receiving the following error
"GET file://connect.facebook.net/en_US/sdk.js net::ERR_FILE_NOT_FOUND"
Here is my code. I have directly copied this from the Facebook Developers page, so I'm not sure why I'm receiving an error.
<body>
<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/en_US/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook">Facebook</blockquote></div></div>
Add "https:" as a prefix of the js.src string "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5".
Because it's currently looking for a local file :)
how to implements facebook comments plugin in our website?
i'm following this code for showing the comments, but why the comments plugin still not showing?
inside tag body, i'm put 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/id_ID/sdk.js#xfbml=1&appId=<client-id>&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
and in my page, i'm put this code :
<div class="fb-comments" data-href="http://developers.facebook.com/docs/plugins/comments/" data-numposts="5" data-colorscheme="light"></div>
why still not showing?
I am trying to use the facebook like plugin which has a like and send button.The source code of my page is as follows-
<html>
<body>
hello
<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/en_US/all.js#xfbml=1&appId=138876406236026";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-send"></div>
</body>
Why is it not working?
it wont work on your local system ,you should put it in your website ,
ex: www.sample.com ,
The facebook social buttons work locally on a computer.When you put them online on your website,they will work :)