5. HTML - ウェブサーバに設置しておく情報 - facebook の「いいね」ボタンを設置してみる

 
5.1 概要
5.2 コードの取得と貼り付け

5.1 概要

 なかなか本サイトが人口に膾炙しないのです。  アクセスが増えればいいってもんでもないのですが、増えればやはり嬉しいのです。  知ってもらうために facebook の「いいね」ボタンを設置してみようと思うのです。  まあ、設置してもわたしのブログと同じありさまで、誰も「いいね」を押してくれないというのがオチになりそうな気はしますが(笑)。  本家の下記のサイトを参考にしてやってみることにします。
いいね!ボタン(ウェブ用) - ソーシャルプラグイン
 やってみた結果が右上に出ているかと思います。

5.2 コードの取得と貼り付け

 上記のサイトの中ほどに「いいねボタン構成ツール」という項目がありまして、いくつかのパラメータを設定できるようになっています。  パラメータを変更すると表示内容も変化します。

 自分の設定したいデザインを決めたら「コードを取得」を押すとコードが出力されます。


 このコードをコピーしてくるわけですが、これらは2つの部分に分かれます。

 javascript で仕掛けを作成する部分と


<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/ja_JP/sdk.js#xfbml=1&version=v2.9";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 body 内に張り付けて表示する部分です。

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
 「data-layout="standard"」の箇所を「data-layout="button_count"」に変えれば今までに何回「いいね!」を押されたかがわかります。  ここは誰も押してくれないので 0 を表示するのは恥ずかしいので、押しませんけどね。  「https://developers.facebook.com/docs/plugins/」の部分はサンプルをそのまま載せていますが、実際の URI を記述します。  PHP で記述する場合は $_SERVER['REQUEST_URI'] で記述すれば、いちいち実際の URI を記述せずにすみますし、ディレクトリを移動してもソースコードを変更しなくてすみます。