どこに「いいね！」ボタンなどのソーシャルプラグインのタグを埋め込めばいいのか？

「いいね！」ボタンの設置方法をメモしようと思って、前回の記事を途中まで書いたのがもう 2 ヶ月くらい前の話・・・。ずいぶん間が空いてしまったよ・・・。
悪い癖が出てしまった。
設置の仕方に関して前回の続きから書いていきたいと思います。

大まかに言うと以上の流れです。
今回は３．の「いいね！ボタンの」タグを WordPress のどこに配置するのがベストなのか、という部分を考察していきたいと思います。
ただ実際は「いいね！」ボタンに限らず、全てのソーシャルプラグインに共通する話です。ツイートボタンであろうが Google プラスワンボタンであろうが、はてなブックマークであろうが、タグを埋め込む場所は同じはずです。なのでソーシャルプラグインのタグの配置場所ということで参考にして頂ければと思います。

理屈はいいからとりあえず設置してたい人へ

なぜ、そこにタグを配置すればいいのか？　どうして、そんな表示になるのか？　などなど、理屈を説明し出すと長くなる ＆ ぼくもはっきし言ってよく分かってないので、とりあえずこうやったらうまくいったよっていう方法をご紹介します。
書いてあるとおりにやったらうまくいくのではないでしょうか・・・。
なお、WordPress を対象にしてますが、テンプレートは Twenty Eleven を使っているので他のテンプレートだと話が通じないかもしれません。
ただ、PHP によるテンプレートの構成の仕方は基本同じだと思うので、どんなテンプレートだろうが応用が効くと勝手に思っております。

ソーシャルプラグインの配置場所３パターン

他のブログを見てみると、ソーシャルプラグインが表示されている場所は大きく以下の３つに分けられると思います。

そして一番多いのが記事の下パターンですね。

ソーシャルプラグインの設置場所①
記事の下

一番簡単かなと思うのがテンプレートファイルの中にある【 comments.php 】に「いいね！」ボタンなどのタグを埋め込む方法です。
【 comments.php 】のファイルを開くと、結構頭の方に【 <div id=”comments”> 】と書かれているのが見つかると思います。
このタグの前か後にソーシャルプラグインのタグをコピペすればOKです。

<?php
/**
 * The template for displaying Comments.
 *
 * The area of the page that contains both current comments
 * and the comment form. The actual display of comments is
 * handled by a callback to twentyeleven_comment() which is
 * located in the functions.php file.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>
/* ▼ ソーシャルプラグイン系 ▼ */
 /* ▼ いいね！ボタン ▼ */
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div>
 /* ▼ tweetボタン ▼ */
<a href="https://twitter.com/share" class="twitter-share-button" data-via="TwitterID" data-lang="ja" data-related="ユーザーネーム">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 /* ▼ Googleプラスワンボタン ▼ */
<g:plusone href="<?php the_permalink(); ?>"></g:plusone>
/* ▲ ソーシャルプラグイン系 ▲ */
	<div id="comments">
	<?php if ( post_password_required() ) : ?>
		<p class="nopassword"><?php _e( 'This post is password protected. Enter the password to view any comments.', 'twentyeleven' ); ?></p>
	</div><!-- #comments -->

コメント用のファイルは必ず投稿記事の最後に出力されるようになっているかと思うので、ここにタグを貼っておけば必ずソーシャルプラグインも表示されるという寸法です。
また、Twenty Eleven で試した場合、WordPress の設定でコメント受付を拒否していた場合でも、ソーシャルプラグインは表示されました。
さらに【 <div id=”comments”> 】の前後にタグを埋め込むと、まずソーシャルプラグインが表示され、次にコメント欄が表示されるという流れですが・・・逆がいい場合、つまりコメント欄が表示されその後にソーシャルプラグインを表示させたい場合は、一番下にタグを埋め込めばOKです。
本当に最後の最後、【 </div><!– #comments –> 】と</div>で閉じられていると思うので、その後にコピペしてください。

ソーシャルプラグインの設置場所②
記事の上

今度は記事が始まる直前、だいたい想定しているのは記事タイトルの後がいいかな〜と思っておりますので、“ 記事タイトルと本文の間に表示させる方法 ”です。
しつこいようですが、使用しているテンプレートはTwenty Elevenです。
まず通常の投稿であれば【 content-single.php 】というファイルが記事を出力しています。このファイルを開くと、【 h1 】とか【 header 】とかいう文字が見つかるかと思います。

<?php
/**
 * The template for displaying content in the single.php template
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<header class="entry-header">
		<h1 class="entry-title"><?php the_title(); ?></h1>
/* ▼ ソーシャルプラグイン系 ▼ */
 /* ▼ いいね！ボタン ▼ */
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div>
 /* ▼ tweetボタン ▼ */
<a href="https://twitter.com/share" class="twitter-share-button" data-via="TwitterID" data-lang="ja" data-related="ユーザーネーム">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 /* ▼ Googleプラスワンボタン ▼ */
<g:plusone href="<?php the_permalink(); ?>"></g:plusone>
/* ▲ ソーシャルプラグイン系 ▲ */
		<?php if ( 'post' == get_post_type() ) : ?>

11 行目辺りからヘッダーやタイトルに関しての記述らしきものが見つかりますよね。
ここの【 <h1 class=”entry-title”><?php the_title(); ?></h1> 】の後にソーシャルプラグインのタグをコピペすればOKです。

ソーシャルプラグインの設置場所③
記事の上と下

最後は記事の上にも下にも「いいね！」ボタンやツイートボタンなどのソーシャルプラグイン（ソーシャルボタン）を表示させる方法です。
と言っても、①と②の両方すればいいだけです。
こちらの記事で書いたように、ページの URL は自動的に取得してくれるようになってますので、上も下も連動していることになります。

ソーシャルボタンを好きな位置に配置できるように

以上を参考にして頂ければ、だいたい一般的なソーシャルプラグインの配置には対応できるかと思います。
最近は自力で設置しなくても、テーマに元々設置されていたりプラグインを使ったりすることで簡単に設置できるようになっていますので、それらを使用するのもいいと思います。