Search code examples
javascriptfacebookfacebook-likegoogle-analytics-api

Like button doesn't show with javascript sdk , google analytics and like code

I'm using the javascript sdk in my application, and I would like to integrate the like button.

Here's my code :

 // javascript sfk to connect user and get infos
<script id="facebook-jssdk" src="//connect.facebook.net/en_US/all.js"></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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

<div onClick="_gaq.push(['_trackEvent', 'Like', 'Clicked on Facebook Like Button']);" class="fb-like" data-href="https://url/id/fr" data-width="140px" data-height="27px" data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="false" data-send="true"></div>

Edit : My opengraph fields :

  • og:title,

  • og:description,

  • og:type,

  • og:image,

  • og:url,

  • og:site_name,

  • fb:admins,

  • fb:app_id

    are filled correctly on my page

    and the faecbook debugging tolle https://developers.facebook.com/tools/debug/ says everything is fine Response Code 200**

The result is ... nothing :D

The code is on the page, but I don't have any like button ! I try to change it by css but nothing changed

I find an old article (2010) that says that you can't use facebook SDK and the like button code provide by facebook http://allfacebook.com/one-problem-with-facebooks-new-like-button-it-doesnt-work-with-connect-sites_b13946

Or is it a probleme with my google analytic onClick ?

Thanks in advance :)

Solution

  • So, there a little trick inside the url to the facebook javscript SDK : You have to specified #xfbml=1 to display like or share buttons. in the javascript function the url should be :

    js.src = "//connect.facebook.net/en_US/all.js #xfbml=1";

    Even if fbml and xfbml has been deprecated since june 2012. https://developers.facebook.com/docs/roadmap/completed-changes/

    And of, course, not a single line about it on the share button documentation.