自分のブログの個別投稿ページにFacebookのいいねボタンとシェアボタンを配置するメモ。
まず↓このページに行く
いいね！ボタン – ソーシャルプラグイン
いいね！ボタン生成ページ
「いいね！ボタン構成ツール」の欄で、オプションが選択できる。
-
「いいね！」するURL
-
文字通り「いいね！」するURLを入力するのだが、WordPressの各投稿ページのURLにしたい場合はあとで、コードを編集する必要がある。よって、ここはデフォルトのままにしておく。
-
レイアウト
-
standard,box_count,button_count,buttonの4種類。今回はbuttonを選択した。
facebookボタンの種類
-
ボタンサイズ
-
small（小）かlarge（大）。largeを選択した。
-
シェアボタンを追加
-
文字通り。必要ない場合はチェックを外す。
-
Width
-
レイアウトにstanderdを選択した場合の全体の幅。「◦◦さん、他000万人が「いいね！」しました。」の文言部分が２行になったりする。サンプルを見て調整。レイアウトの最小幅が225pxなので、それ以下にはならないようだ。
width225px。こ以上は狭くならない。
-
アクションタイプ
-
「いいね！（like）」ボタンか「おすすめ（recommend）」ボタンかの選択。「like」を選択。
-
友達の顔を表示する
-
レイアウトにstanderdを選択した場合に、「いいね」したユーザーのサムネイル写真を表示するか否か。チェックしないことを選択した。
ここまで、確認したら、下の「コードを取得」ボタンをクリックする。
facebookボタン用のコード
「Step 2」の欄に表示されたコードはJavascriptで、HTMLのbody開始タグ直前に記載せよとあるので、「header.php」を編集して、body開始タグのすぐ上にペーストすればよい。
実は、私はこれを読み間違えて、body終了タグ直前に記載してしまった。どこかで「javascriptコードはbody終了タグの直前がいいですよ」と説明されていたので、それに従う癖が付いていたようだ。WordPressの場合、body終了タグは大抵「footer.php」に記載されているので、そちらにコピペしてしまった。
<!-- ↑この上は省略 -->
<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.10";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</body><!-- body終了タグ -->
ちゃんと動いているようだし、めんどくさいのでこのままにしている。
尚、このJavascriptコードはどこかに１箇所記載されていればよいので、facebookのボタンがページ内に何箇所もあったとしても、複数記述する必要はない。
「Step 3」の欄に表示されたコードは、Twitterボタンを設置する時と同様、記事本文の前後にペーストする。ただし、URLの部分は、<?php the_permalink() ?>に書き換えておく。
data-href="https://developers.facebook.com/docs/plugins/" を data-href="<?php the_permalink() ?>" に書き換え。
<!-- Twitter --> <a class="twitter-share-button" href="https://twitter.com/share" data-dnt="true" data-size="large" data-via="ittonjp">Tweet</a> <!-- Twitter --> <!-- facebook --> <div class="fb-like" data-href="<?php the_permalink() ?>" data-layout="button" data-action="like" data-size="large" data-show-faces="true" data-share="true"></div> <!-- facebook --> <?php the_content(); ?><!-- ←ここが記事本文 --> <!-- Twitter --> <a class="twitter-share-button" href="https://twitter.com/share" data-dnt="true" data-size="large" data-via="ittonjp">Tweet</a> <!-- Twitter --> <!-- facebook --> <div class="fb-like" data-href="<?php the_permalink() ?>" data-layout="button" data-action="like" data-size="large" data-show-faces="true" data-share="true"></div> <!-- facebook -->
これで、設置完了。
と行きたいところだが…。
Twitterボタンとfacebookボタンがズレている。
↑ズレてる…orz
次の記事で直します。
コメント