How do I add a dynamic Facebook like button to every node of a certain content type

Question

One very comfortable solution to that problem is provided by http://drupal.org/project/fblikebutton. Unfortunately the positioning of the button isn't flexible enough for my needs.

I want every single node of one certain content type to have a FB like button at its bottom, making the base+node-url like-able. Facebook provides some snippets for that. Since I know that loading many iframes makes the site load very slow, I'ld like to add the JavaScript snippet into the appropriate template file.

My questions now are, in what template file exactly would I inject the little snippets and how do I have to customise the url in the plugin to make it fetch the url of every single node dynamically?

Answer 1

Inside a template_preprocess_node() I have done:

/**
 * Implements template_preprocess_node().
 */
function MYTHEME_preprocess_node(&$variables) {
  $node = $variables['node'];
  $variables['full_url'] = url('node/' . $node->nid, array('absolute' => TRUE));
}

Then in my node.tpl.php, I have

<?php // http://developers.facebook.com/docs/reference/plugins/like/ ?>

<div class="fb-like" data-href="<?php print $full_url; ?>" data-send="true"
  data-layout="button_count" data-width="450" data-show-faces="false"></div>
<script>
  (function ($) {
    try {
      FB.XFBML.parse();
    } catch (e) {
      $('.fb-like').remove();            
    }
  })(jQuery);
</script>

In my html.tpl.php, I will hardcode the JS include so that it is right after the body (so I am not at the mercy of render trees, preprocess, etc:

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

This is from a pretty specific use case on a recent site. I am not 100% sure if I tested this with multiple nodes on a single page, as the site I did this on doesn't have pages like that.

Answer 2

You could try: https://github.com/grizzly/jquery.facebook

$(document).ready(function() {
    $('.likebutton').facebook("likebutton", {
        url : "http://jquery.com",
        action : "like"
    });
});

Which adde a like button to every div, marked with class .likebutton

Answer 3

Try Facebook Like Button Module

Rather than having to manually copy/paste the Like this on Facebook code for each piece of content you (or your users) create, this module will automatically add that code to the end of each chosen node type. You are able to add a Like button which likes a given URL (static, e.g. your homepage) or/and put a dynamic Like button on your page to like the page you are actually visiting.

Also there is Facebook Share

The Facebook Share module enables Drupal site administrators to add a Facebook Share button to selected content type nodes in their website(s).