TwentyElevenのコメント吹き出しをFacebookのいいねボタンに変えてみた

すでに現行のWordpressのデフォルトテーマがTwentyTwelveになっているので、今更ニーズはないかもしれませんが備忘録として書いておきます。


とりあえず、わりと人気のない吹き出しの削除からですが、
content.phpの中から以下のコードを削除またはコメントアウト。

			<?php if ( comments_open() && ! post_password_required() ) :?>
			<div class="comments-link">
				<?php comments_popup_link( '<span class="leave-reply">' . __( 'Reply', 'twentyeleven' ) . '</span>', _x( '1', 'comments number', 'twentyeleven' ), _x( '%', 'comments number', 'twentyeleven' ) );?>
			</div>
			<?php endif; ?>

PHPのコメントのアウトの仕方はこちらを参照してください。
これで吹き出し自体は消えます。
このスペースを今度はFacebookのいいねボタンに切り替えます。
まずは公式サイトのいいねボタン設置方法通りに作成します。
以下にアクセスして設定します。
http://developers.facebook.com/docs/reference/plugins/like/
・URL to Likeには自分のBlogのTopページのURLをまずは入力します。
・Sendボタンはお好みで。
・Leyout Styleはスマホからのおしやすさを考慮してbox_countにしました。
・Widthは450の値を特に触ってませんが、実際は80あれば十分です。
・Showfaceはオフにしました。レイアウト的にここに顔がだらだらと並んでも変なので。
あとは初期設定のままでGet Codeをおして、一番簡単なIFRAMEのコードを利用します。

<iframe src="//www.facebook.com/plugins/like.php?
href=http%3A%2F%2Fmylifeyourlife.net%2F&send=false&
layout=box_count&width=450&show_faces=false&font&
colorscheme=light&action=like&height=90&
appId=427520950654801" scrolling="no" frameborder="0"
 style="border:none; overflow:hidden; width:450px;
 height:90px;" allowTransparency="true"></iframe>

このままではTopページへのいいねがカウントされてしまうので、各記事ごとのいいねボタンに切り替える必要があります。一番最初の

<iframe src="//www.facebook.com/plugins/like.php?
href=http%3A%2F%2Fmylifeyourlife.net%2F

の部分を

<iframe src="//www.facebook.com/plugins/like.php?
href=<?php the_permalink() ?>

に変更します。
これで各記事ごとでのいいねボタンをカウントしてくれます。
次は、いいねボタンを吹き出しの位置に表示させる手順です。
さっき触ったcontent.phpの中で、記事タイトルの下の部分に以下のように先ほどのIFRAMEタグを埋め込みます。
ここであとでCSS調整するので <div class=”facebook-title”>とDivを設定しています。

			<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
			<div class="facebook-title">
<iframe src="//www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>
&send=false&layout=box_count&width=450&show_faces=false&font=verdana&colorscheme=light&action=like&height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"></iframe>
			</div>
			<?php endif; ?>

そして、style.cssで吹き出しのコードを参考に以下のコードを最下部に追加します。

/* Facebook Title */
.entry-header .facebook-title {
	color: #777;
	font-size: 13px;
	font-weight: normal;
	line-height: 35px;
	overflow: hidden;
	padding: 0 0 0;
	position: absolute;
	top: 1.0em;
	right: 0;
	text-align: center;
	text-decoration: none;
	width: 77px;
	height: 76px;
}

これでとりあえず、トップページで表示される吹き出しを各記事ごとのいいねボタンカウントに変更できました。
ちなみに、各記事ごとを開いた時に同様に表示させるにはContent-single.phpでも同じことをします。しかしこのままではタイトルといいねボタンが重なってしまうので、style.cssの中で、

.singular .entry-header .entry-meta {
	padding-right: 0;
}

の値を76pxに変更すると、トップページと同じようにでタイトルが折り返されてくれます。
以上、ご参考までに。
[ad]