Facebook「いいね！」ボタンをＨＰとブログに設置してみるテスト
自分のホームページやブログにFacebookの「いいね！」ボタンを設置してみたく、いろいろ試行錯誤。
たぶん簡単に出来ると思うので、ここにメモ。
英語ページなので英語音痴にはちょとやっかいだけど。
ちなみに、ネットで検索すると現在とは若干異なる古いLike Buttonページの解説が多いです。
基本的には「Like Button - Facebook開発者」ページでコードを入手。
・Like Button - Facebook開発者
http://developers.facebook.com/docs/reference/plugins/like/
設定は下図のようにできます。
レイアウトのスタイルはこんな感じ。
設定ができたら「Get Code」でコードを発行。
下図のようなウィンドウが出ます。
上の欄にあるコードを理想的にはソースの<body>直下に入れます。
たぶん、コードは共通だと思うので、下にメモ。
<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>
各自のブログサービスが標準でFacebookのボタンを実装していれば問題ないのですが、ココログのように実装していない場合は自力で記事に「いいね！」ボタンを設置することになります。
ぼくの場合は上記コードをブログの設定ページにある「サブタイトル（キャッチフレーズ）」に記入しました。
実際にＨＰのページまたはブログ記事には上図下欄にあるコードを好きな場所に記入。
こちらも一応メモ。
<div class="fb-like" data-href="ページや記事のアドレス" data-send="false" data-layout="button_count" data-width="110" data-show-faces="false"></div>
上の赤字部分が設定する項目。
・data-href="ページや記事のアドレス" ここにはボタンを設置するページまた記事のURLを記入。 ※URL無記入の場合は、・data-send="false"
「送る」ボタンの有無。無し：false 有り：true。・data-layout="button_count"
この記事のふたつ目の画像を参考に。
standard、button_count、box_countから選択。・data-width="110"
ボタンの幅。110はこのブログに設置したボタンの幅。・data-show-faces="false"
ボタンを押した人のプログ画像の表示・非表示。
表示：true 非表示：false。
| 固定リンク
「パソコン・インターネット」カテゴリの記事
- 友だちがKindle版小説を出版したよ(2016.10.04)
- やっとスマホ専用ページが完成(2016.04.22)
- Kindle無料キャンペーンの結果(2016.04.16)
- 「簡単！本格的！電子書籍の作り方」Kindle版無料キャンペーン(2016.04.08)
- 素人がAmazonで電子書籍を売るには(2016.04.08)
コメント