9. html/php で facebook の「いいね」ボタンを設置してみる

 
9.1 能書き
9.2 コードの取得と貼り付け

9.1 能書き

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

 やってみた結果が右上に出ているかと思います。

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

 「https://developers.facebook.com/docs/plugins/」の部分はサンプルをそのまま載せていますが、実際の URI を記述します。

 PHP で記述する場合は $_SERVER['REQUEST_URI'] で記述すれば、いちいち実際の URI を記述せずにすみますし、ディレクトリを移動してもソースコードを変更しなくてすみます。