I built module which displays FB like button on site. It works fine excepting when there is <script src="https://connect.facebook.net/en_US/all.js"></script> loaded before on the same page. If all.js is loaded before, fbAsyncIniti will never be triggered.
My code:
<div id="fb-root"></div>
<li class="fbLike">
<div data-share="false" data-show-faces="false" data-layout="box_count" data-href="<?php echo $share_url?>" data-action="like" class="fb-like"></div>
</li>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
xfbml : true,
version : 'v2.1'
});
};
(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>
It will work if I remove window.fbAsyncInit = function() { from the code. But this is not solution because I don't know if customer have all.js loaded before or not. I could check with jQuery if this script is already inside DOM, but this is still not proper solution because script can be inside DOM but not loaded yet.
What would be proper method to check if all.js was loaded before so I can remove window.fbAsyncInit = function() { only in such case? Or is there any other solution?
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 have to put facebook comment social plugin in my father's personal website.
Main problem is that website is in html (no asp or php).
Problem: I had to find a way to put the current page url in facebook plugin. i solved reading many solutions with jquery, but it seems to work only after the second page refresh (the first time comment box is loaded... but comments are not published on author timeline..)
this is my code:
in the head section:
<script>
$(document).ready(function() {
$('.fb-comments').attr("data-href", document.URL);
});
</script>
in body:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY_APP_ID',
xfbml : true,
version : 'v2.1'
});
};
<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/it_IT/sdk.js#xfbml=1&appId=MY_APP_ID&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>
FB.Event.subscribe('comment.create', function(response) {
alert('comment created: ' + response);
$(document).load('mail.php?response='+response);
});
</script>
at the end of the page, the comments box (it has not data-href because is pushed by jquery):
<div class="fb-comments" id="fb-comments" data-numposts="5" data-colorscheme="light"></div>
Why it's not working every time?
is code for async loading correct?
example url: http://www.lemiecime.it/cime/fancy.htm (it's a demo page.. you can put comments)
many thanks
Can someone give me a step by step how to implement Facebook's login plugin onto a weebly site? Where does the SDK go in HTML/CSS? Or does it all go in an embedded code? I have been stuck on this trying everything please show me what code goes where. I have done research and it seems using the javascript is the only way to go. Thank you!
Yes I have tried the steps on facebook right now I have this. This is entered in the splash.html page in Html/CSS.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{myappID}',
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'));
</script>
Then I have this in an embedded code on the actual splash page content:
<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&appId=246238232244147&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="false"></div>
This is for the button, but the button only shows up when I am designing or building the page and not when I publish it. Thank you!