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
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?
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!
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>
Is my Facebook canvas app displaying the login dialog automatically upon arrival? I want it to butI have been fighting this for quite some time. I have Page Tab Apps that feed off of the same canvas URL and these are indeed displaying the login dialog for the app automatically in in a pop-up.
I clear my browsers cookies when I test.
I am using Javascript and the Facebook SDK to build my app with a GoDaddy Website Builder; can I use PHP with this website builder?
My app- https://apps.facebook.com/{My_App}/
Code in HEAD section
<meta property="og:type" content="emoticon_app_x:app">
<meta property="fb:app_id" content="{My App ID}">
<meta property="og:title" content="Emoticon App. X">
<meta property="og:description" content="Easy to use copy and paste emoticons for Facebook.">
<meta property="og:url" content="https://apps.facebook.com/{My_App}">
<meta property="og:image" content="https://nebula.wsimg.com/b270c0b24507a5a9018ec56c54957962?AccessKeyId=E136FD740FAB2A181ED3&disposition=0&alloworigin=1">
<meta name="google-translate-customization" content="c7ecf59b1c239b7f-e83518b06897476f-g415c0e55e9c88e54-17">
<meta charset="UTF-8">
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{My App ID}',
status : true,
xfbml : true,
version : 'v2.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 = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
console.log('Logged in.');
}
else {
FB.login();
}
});
</script>
end HEAD section code
Code in BODY section
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{My App ID',
status : true,
xfbml : true,
version : 'v2.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 = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
console.log('Logged in.');
}
else {
FB.login();
}
});
</script>
<body>"<"!-- Below we include the Login Button social plugin. This button uses the JavaScript SDK to present a graphical Login button that
triggers the FB.login() function when clicked. --">"
<p><fb:login-button show-faces="false" width="200" max-rows="1"></fb:login-button></p></body>
</html>
end BODY section code