facebook customer chat SDK with vuejs - javascript

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?

Related

FB Customer Chat Plugin doesn't appear

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>

Facebook Javascript API fan_count

I am new to Javascript and am try to follow the Facebook steps to display fan_count (likes) on my webpage. I have done the following but for the life of me can't work out how the count is displayed.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '231179987472162',
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>
<h1>Hello, world!</h1>
<script>
FB.api(
'/cityviewshopping',
'GET',
{"fields":"fan_count"},
function(response) {
// Insert your code here
}
);
</script>

I installed the facebook chat plugin and found the Uncaught error h - sdk.js 108

I developed a website using magento ver.1.9.3 and used a basic theme named RWD.
Then I have to paste this code into Header (this code is derived from https://developers.facebook.com)
<div class="fb-customerchat" page_id="my-page_id" minimized="true"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'my-App_id',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.12'
});
};
(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/th_TH/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Then there is an error. Uncaught h> sdk.js: 108 At frame PostmessageRelay
{throw u},0);return false}};return t.__wrapper}function r(t){try{return t&&t.callee&&t.callee.caller?t.callee.caller.name:""}catch(u){return""}}function s(t,u){return function(v,w){var x=u+":"+(n||"[global]")+":"+(v.name||"[anonymous]"+r(arguments));return t(j(v,"entry",x),w)}}if(l){setTimeout=s(setTimeout,"setTimeout");setInterval=s(setInterval,"setInterval");j.setWrapper(p,"entry")}return{guard:p,unguard:q}}f.exports={create:k}}),null);

facebook login button does not show up on my page

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.

Facebook Javascript SDK, how to know when async script has been loaded?

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.

Categories

Resources