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




クラウディア　






シェアする











1.　概要						


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


3.　参考サイト				




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


3.　参考サイト


　本ページは、本家の下記のサイトを参考にさせていただきました。


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







audiobook.jp
AbemaTV　無料体験