I found unclear on Facebook's documentation how to insert the referral code inside the "Load Facebook SDK for JavaScript" code that I already have on my website.
This is what I already have running well:
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
{literal}<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v3.3'
});
};
(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/fr_FR/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>{/literal}
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="00000000000000"
greeting_dialog_display="hide"
logged_in_greeting="Hello!"
logged_out_greeting="Bye!">
</div>
<!-- End your customer chat code -->
And this is the referral code that Facebook says on THIS page:
{
"sender":{
"user_ref":"<USER_REF>"
},
"recipient":{
"id":"<PAGE_ID>"
},
"timestamp":1458692752478,
"referral": {
"ref": "<REF_DATA_PASSED_IN_CODE>",
"source": "CUSTOMER_CHAT_PLUGIN",
"type": "OPEN_THREAD",
"referer_uri": "<WEBSITE_URL>"
}
}
Thanks for the help!
Related
This is Facebook Customer Chat's embed code:
(docs: https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin)
<!-- Messenger Chat Plugin Code -->
<div id="fb-root"></div>
<div id="fb-customer-chat" class="fb-customerchat"></div>
<script>
var chatbox = document.getElementById('fb-customer-chat');
chatbox.setAttribute('page_id', 'PAGE-ID');
chatbox.setAttribute('attribution', 'biz_inbox');
</script>
<script>
window.fbAsyncInit = function () {
FB.init({ xfbml: true, version: 'API-VERSION' });
};
(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>
Inside window.fbAsyncInit, there is FB.init, I'm confused right now, shouldn't we add appId to it? Because I've seen a lot of tutorial adding appId, but in this official docs, it seems redundant, so what's the downside of not adding appId to FB.init?
when trying to analyse my page speed using Google page speed analytics.
I see that FB messenger load a lot of js files.
so, I decided to delay FB script using setTimeOut() method.
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script defer>
jQuery(window).load(function(){
function load_fb_chat(){
window.fbAsyncInit = function() {
FB.init({
appId : 'myappid',
autoLogAppEvents : true,
xfbml : true,
version : 'v7.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/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
};
window.setTimeout( load_fb_chat, 2000 ); //or 500ms
})
</script>
but I am not sure if it's a good practice.
I would like, as a javascript newbie, update Facebook's customer chat plugin with some custom parameter in the ref field (actually cookie of the user to which I show the plugin). I cannot seem to be able to override the default that I set. Why is that? I've been stuck on this forever. I always receive the ref parameter default_ref.
Any help will be appreciated. Thanks
<!DOCTYPE html>
<head>
</head>
<script>
function updateRef(){
console.log("updating ref");
document.getElementById("chat").ref="update_ref";
console.log("tried to update ref;")
}
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxx',
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/cs_CZ/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
console.log("customer chatloading");
document.getElementById("chat").ref = "test_work_please";
console.log("finished loading chat");
console.log("ref is " + document.getElementById("chat").ref);
</script>
<body>
<div id="chat" class="fb-customerchat"
messenger_app_id="xxxxxxxxxx"
logged_in_greeting="yyyyyyy
logged_out_greeting="zzzzz"
greeting_dialog_display="fade"
ref="default_ref"
page_id="xxxxxxxxxxxx">
</div>
</body>
I just begin the facebook development, and I try to make the first app with javascript SDK.
However, when I go the page where I install the code, I have an error message saying that "does not work , try again later."
My application is in development mode and it's the good Appdata
In facebook dashboard I entered as domain: http://yofitness.fr
Someone have an idea ?
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{624205284323943}',
status : true,
xfbml : true
});
FB.ui({
method: 'send',
name: 'People Argue Just to Win',
link: 'http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html',
});
};
(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>
</body>
Change appId:'{624205284323943}', to appId: '624205284323943',
The Facebook-like button I use in my code is not working. I have done everything that was necessary: placed the JavaScript code below the body tag and the other div tag for it was placed where I wanted the button to appear, but I didn't succeed. Here is my code:
<head>
<meta charset="UTF-8" />
<title>Riparian Preserve Survey</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-responsive.min.css"type="text/css"/>
<link rel="stylesheet" href="bootstrap.css" type="text/css"/>
<script src="jquery-1.9.1.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap.js"></script>
<style>
img {
max-width: 100%;
}
body{
background-color: #A4A4A4 ;
}
</style>
</head>
<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
...
<div class="fb-like" data-href="https://www.facebook.com/GilbertTownHall"data- send="true" data-width="450" data-show-faces="false"></div>
Facebook uses an SDK i believe that is loaded first, this is on their site have you tried this ?
<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
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
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>
Try some like this:
window.fbAsyncInit = function () {
if (FB.init) return;
// init the FB JS SDK
FB.init({
appId: 'YOUR_APP_ID', // App ID from the App
//channelUrl: '//' + window.location.hostname + '/channel.html',
//This to get the user details back from Facebook
//scope: 'id,name,gender,user_birthday,email', etc
status: true, // check the login status upon init?
cookie: true, // set sessions cookies to allow your server to access the session?
xfbml: true // parse XFBML tags on this page?
});
}
At the end of HTML Body...
<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.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
Also you can use fb embeded iframe
Facebook Like Button Reference