web-dev-qa-db-ja.com

特定のコンテンツタイプのすべてのノードに動的なFacebookのようなボタンを追加する方法

http://drupal.org/project/fblikebutton によって、この問題に対する非常に快適な解決策が提供されます。残念ながら、ボタンの配置は私のニーズに十分対応できません。

1つの特定のコンテンツタイプのすべてのノードの下部にFBのようなボタンを配置し、base + node-urlのように使用できるようにします。 Facebookはそのためのスニペットをいくつか提供しています。多くのiframeを読み込むとサイトの読み込みが非常に遅くなることがわかっているので、JavaScriptスニペットを適切なテンプレートファイルに追加したいと思います。

Facebook like button JavaScript HTML5 snippet

私の質問は、どのテンプレートファイルに正確に小さなスニペットを挿入するのか、そしてプラグインのURLをカスタマイズしてすべての単一ノードのURLを動的にフェッチさせるにはどうすればよいですか？

7nodesjavascriptsocial-network
3
leymannx

内部 template_preprocess_node() 私がやった：

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

次に、私のnode.tpl.phpに、

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

私のhtml.tpl.phpで、JSインクルードをハードコーディングして、本文の直後に配置します（そのため、レンダーツリーやプリプロセスなどの処理に追われていません：

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

これは、最近のサイトでのかなり具体的な使用事例からのものです。私がこれを実行したサイトにはそのようなページがないため、これを単一のページで複数のノードでテストしたかどうかは100％わかりません。

5
mpdonadio

あなたは試すことができます： https://github.com/grizzly/jquery.facebook

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

クラス.likebuttonでマークされた、すべてのdivに「いいね！」ボタンを追加するもの

1
SteMa