ウェブ学のすすめ

Study of Web Design & Programing

いいねボタンを設置する方法

プレビュー


↓別ウィンドウを開いて見る
いいねボタン - js do it


QRコード

※おすすめQRコード読み取りアプリ

最速QR
カテゴリ: ユーティリティ
サイズ: 1.5 MB
価格: 無料

ポイント


facebookにログインし、
http://developers.facebook.com/docs/reference/plugins/like/にアクセスします。

↓オプションを設定し、「GET CODE」をクリックします

HTML5、XFBML版、iframe版のいずれかをコピーしてサイトに貼り付けます。

コード

<p>↓HTML5版</p>
<div class="fb-like" data-href="http://www.facebook.com/pages/%E3%82%A6%E3%82%A7%E3%83%96%E5%AD%A6%E3%81%AE%E3%81%99%E3%81%99%E3%82%81/358505754208714" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
<p>↓XFBML版</p>
<fb:like href="http://www.facebook.com/pages/%E3%82%A6%E3%82%A7%E3%83%96%E5%AD%A6%E3%81%AE%E3%81%99%E3%81%99%E3%82%81/358505754208714" send="false" layout="box_count" width="450" show_faces="false"></fb:like>
<p>↓iframe版</p>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2F%25E3%2582%25A6%25E3%2582%25A7%25E3%2583%2596%25E5%25AD%25A6%25E3%2581%25AE%25E3%2581%2599%25E3%2581%2599%25E3%2582%2581%2F358505754208714&amp;send=false&amp;layout=box_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"></iframe>
<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/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>