web-dev-qa-db-fra.com

Comment ajouter un bouton J'aime Facebook dynamique à chaque nœud d'un certain type de contenu

Une solution très confortable à ce problème est fournie par http://drupal.org/project/fblikebutton . Malheureusement, le positionnement du bouton n'est pas assez flexible pour mes besoins.

Je veux que chaque nœud unique d'un certain type de contenu ait un bouton de type FB en bas, ce qui rend la base + URL de nœud similaire. Facebook fournit des extraits pour cela. Comme je sais que le chargement de nombreux iframes rend le chargement du site très lent, je voudrais ajouter l'extrait de code JavaScript dans le fichier de modèle approprié.

Facebook like button JavaScript HTML5 snippet

Mes questions sont maintenant, dans quel fichier de modèle dois-je injecter exactement les petits extraits et comment dois-je personnaliser l'URL dans le plugin pour qu'il récupère dynamiquement l'URL de chaque nœud?

7nodesjavascriptsocial-network
3
leymannx

Dans un template_preprocess_node() j'ai fait:

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

Ensuite, dans mon node.tpl.php, j'ai

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

Dans mon html.tpl.php, je coderai en dur le JS afin qu'il soit juste après le corps (donc je ne suis pas à la merci des arbres de rendu, du prétraitement, 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>

Il s'agit d'un cas d'utilisation assez spécifique sur un site récent. Je ne suis pas sûr à 100% si j'ai testé cela avec plusieurs nœuds sur une seule page, car le site sur lequel j'ai fait cela n'a pas de pages comme ça.

5
mpdonadio

Vous pouvez essayer: https://github.com/grizzly/jquery.facebook

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

Qui ajoute un bouton similaire à chaque div, marqué par la classe .likebutton

1
SteMa