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


 　クラウディア
1.　概要
2.　コードの取得と貼り付け 
1.　概要


　なかなか本サイトが人口に膾炙しないのです。

　アクセスが増えればいいってもんでもないのですが、増えればやはり嬉しいのです。

　知ってもらうために facebook の「いいね」ボタンを設置してみようと思うのです。

　まあ、設置してもわたしのブログと同じありさまで、誰も「いいね」を押してくれないというのがオチになりそうな気はしますが(笑)。

　本家の下記のサイトを参考にしてやってみることにします。


「いいね！ボタン(ウェブ用) - ソーシャルプラグイン」



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


2.　コードの取得と貼り付け


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

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

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

　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 を記述せずにすみますし、ディレクトリを移動してもソースコードを変更しなくてすみます。
earthcar（アースカー）