« 複数プロファイルIronのキャッシュをRamDiskに移してみるテスト | トップページ | Twitterのツイートボタン設置はかなり簡単 »

2012/03/08

Facebook「いいね!」ボタンをHPとブログに設置してみるテスト

自分のホームページやブログに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のボタンを実装していれば問題ないのですが、ココログのように実装していない場合は自力で記事に「いいね!」ボタンを設置することになります。

ぼくの場合は上記コードをブログの設定ページにある「サブタイトル(キャッチフレーズ)」に記入しました。

実際にHPのページまたはブログ記事には上図下欄にあるコードを好きな場所に記入。

こちらも一応メモ。

<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。


 

|

« 複数プロファイルIronのキャッシュをRamDiskに移してみるテスト | トップページ | Twitterのツイートボタン設置はかなり簡単 »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/30768/54169798

この記事へのトラックバック一覧です: Facebook「いいね!」ボタンをHPとブログに設置してみるテスト:

« 複数プロファイルIronのキャッシュをRamDiskに移してみるテスト | トップページ | Twitterのツイートボタン設置はかなり簡単 »