Tell me more ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.

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.

Facebook like button JavaScript HTML5 snippet

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?

share|improve this question
Facebook Like Button Module will automatically pick the url for you. – Nikhil M May 23 at 17:13

2 Answers

up vote 3 down vote accepted

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.

share|improve this answer
Brilliant! Thank you very much!!! – koivo May 28 at 6:24
I even did it without the preprocess function. I just 1. wrote the JavaScript SDK into the html.tpl.php 2. created a "node--nameofmycontenttype.tpl.php" to bring the button only to nodes of that content type and inside that file I wrote the button code and made the url dynamic like that: <div class="fb-like" data-href="<?php print url('node/' . $node->nid, array('absolute' => TRUE)) ?>" data-send="false" data-width="340" data-show-faces="false"></div> – koivo May 29 at 11:56

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.