Google Analytics and FB's Like button - javascript

Hi I need track with google analytics how much people click on FB's Like button but it doesn't work (yes I read a few tutorials and still nothing).
I have this code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'xxxx',
status: false,
cookie: true,
xfbml: true
});
FB.Event.subscribe('edge.create',
function(href, widget) {
$.fancybox.close('#div');
_gaq.push(['_trackSocial', 'facebook', 'like']);
}
);
};
(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=xxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
GA js code is in head tag and FB js code is immediately under body tag.
Thank for your time and your answer.

Related

What does `FB.init({ appId });` actually do if I'm only using Facebook Customer Chat?

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?

is it better to delay executing FB messenger js code using setTimeOut() to not block page rendering

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.

Will fbAsyncInit() execute after the document is ready?

I have the following code from the Facebook's developer website:
window.fbAsyncInit = function() {
FB.init({
appId: '#SessionHelper.Current.partner.partnerVO.facebookID',
cookie: true, // enable cookies to allow the server to access
xfbml: true, // parse social plugins on this page
version: 'v2.3' // use version 2.2
});
UIAuthetication.initFacebook();
(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/" + HelperJSViewBag.getValue("Language") + "/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
This code is inside of a tag on my header. Want I want to know if the UIAuthetication.initFacebook(); line will be executed after all scripts of the page were loaded or if I should use $(document).ready to make sure that the UIAuthetication class will be available when the instruction UIAuthetication.initFacebook(); were called.

Facebook App : Error in the execution of Javascript SDK

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',

Facebook Like Box Disappearing

So whenever I add the first part of this script (everything from window.fbAsyncInit all the way to FB.Canvas.setAutoResize(100);), my Facebook Like Box doesn't pop up.
All I'm trying to do is remove the iframe scrollbars for the Like Box, which obviously has to be done in the submission to Facebook.
Why would adding this function at the top make the box disappear? How do I make the scrollbars go away?
I was trying to follow the instructions here:
http://clockworkcoder.blogspot.com/2011/02/how-to-removing-facebook-application-i.html
Here's my code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '388149184641600',
status: true,
cookie: true,
xfbml: true
});
FB.Canvas.setAutoResize(100);
(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&appId=388149184641600";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

You're missing the closing bracket:
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '388149184641600',
status: true,
cookie: true,
xfbml: true
});
FB.Canvas.setAutoResize(100);
}; // HERE
(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&appId=388149184641600";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Categories