I have problem with adding a chat to the website. The code below works on one page, but doesn't work on another. The domain is added to the whitelist. Does anyone have any idea why this could happen?
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/pl_PL/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="********"
theme_color="#000000"
logged_in_greeting="Lorem Ipsum"
logged_out_greeting="Lorem Ipsum"></div>
Related
I just want to implement a Facebook customer chat feature with my vuejs application.
This is my full code in the index.html file.
<body>
<div id="app" page_id="PAGE_ID" minimized="false" class="fb-customerchat"></div>
<!-- Include after Vue (before closing body) -->
<script src="https://unpkg.com/vue-fullpage.js/dist/vue-fullpage.min.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.11'
});
};
(function(d, s, id){
console.log('d',d,'s',s,'id',d)
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>
<!-- built files will be auto injected -->
</body>
I am sure that my page_id and app_id is correct.
I don't know what's wrong with the code. I can't see any error in the console log also.
I implement exact same thing in a normal html file. It works 100%
<body>
<div
class="fb-customerchat"
page_id="PAGE_ID"
minimized="false"
></div>
<script>
window.fbAsyncInit = function () {
FB.init({
appId: 'APP_ID',
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/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
})(document, 'script', 'facebook-jssdk');
</script>
</body>
I don't know why this is not working with the vue.js.
Is that something with webpack building or something else?
I have included the code i needed to be able to show the facebook login button on my page. But the button does not show up, could you please read my code and tell me if you see any problems with it? Thank you
<!DOCTYPE html>
<html>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
vappId : '486506335043368',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.10'
});
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>
<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.10&appId=486506335043368";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-login-button" data-max-rows="1" data-size="large" data- button-type="continue_with" data-show-faces="false" data-auto-logout- link="false" data-use-continue-as="false"></div>
</body>
</html>
I think there are 2 possible problems:
1)You need to change js.src assignment to: js.src="https://connect.facebook.net/en_US/all.js";
2)I think Facebook does not support calls from a local file, the script has to be run on a file with an http:// or https:// URI.
See this answer.
I do include facebook snippet like so
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'someAppId',
cookie : true,
xfbml : true,
version : 'v2.8'
});
};
(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, somewhere in my code, i will be doing something like
FB.foo.bar();
How i know when the script has done loading and therefore the FB object does exists?
That is what window.fbAsyncInit is for, the JavaScript SDK is loaded when you hit that callback function. You can use FB right after FB.init.
I am trying to implement my Facebook share button in my modal window with AngularJS. The share button shows the first time when I refresh the page, but the button is gone after I change my route to somewhere else and back to the modal window route page. How keep the Facebook button?
Here is my code:
<!--under my modal window <div>-->
<div class="fb-share-button" data-href='http://goose-dev.elasticbeanstalk.com/gameInfo/{{gameId}}'></div>
<!--outside the modal window -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'API KEY',
xfbml : true,
version : 'v2.4'
});
};
(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>
I am trying to get a facebook like button onto my site and it's not showing up at all:
I have this in my body:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '62722122135',
status : true,
xfbml : true
});
};
<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_GB/all.js#xfbml=1&appId=293758545460";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And then I am trying to put this in my footer div towards the bottom of my site:
<div class="fb-like-box" data-href="https://www.facebook.com/edgehilluniversity?fref=ts" data-width="200" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="false" data-show-border="false"></div>
Remove <script>
});
};
/*from there*/(function(d, s, id) {
And change
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=293758545460"
to
js.src = "http://connect.facebook.net/en_GB/all.js#xfbml=1&appId=293758545460"