3

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?

1
  • Facebook Like Button Module will automatically pick the url for you.
    – niksmac
    May 23, 2013 at 17:13

3 Answers 3

5

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.

1
  • 1
    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>
    – leymannx
    May 29, 2013 at 11:56
1

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

-1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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