Search code examples
jqueryajaxfacebookhtmlfacebook-like

Facebook HTML5 Like Button on AJAX Pages?


I'm looking for a way to make the Facebook HTML5 Like Button work on my Ajax views.

On my homepage, I call:

<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/de_DE/all.js#xfbml=1&appId={myappid}";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

In my view head, I have included the Facebook-Meta-Tags (working properly according to OG-Debugger):

og:url / og:title / og:image / og:description / fb:app_id / fb:admins / og:type

In the view content, I have the like button:

<div class="fb-like" data-href="http://www.example.de/view/<?php echo $viewslug; ?>" data-width="400" data-height="50" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="false" data-send="false"></div>

The button is not rendered in the view.

Does anybody have a solution ?

I explictly want to use the HTML5 button and not the Iframe nor XFBML buttons?


Solution

  • After looking in the links provided by the earlier answer, I found a Jquery implementation.

    Maybe it helps others:

    https://developers.facebook.com/docs/javascript/howto/jquery/

    UPDATE:

    Just found Socialite JS as a better way (as I also want to use Google+ and Twitter):

    ( http://socialitejs.com/ || https://github.com/tmort/Socialite )