この記事が気に入ったらいいね にYouTubeのサムネイル画像を設定するようカスタマイズしてみた

随分と今更な話ではありますが、私が現在メインとサブで利用しているWordPressのテーマには全てシェアボタンはついているものの、いわゆる「いいね！ボタン」がついていない事にふと気が付きました…これは由々しき事態ですね？

そんなわけで、今回のエントリーではその いいね！ボタン を簡単に実装する方法を調べるついでに、ただ実装するだけではひねりが無いのでちょっとしたカスタマイズも加えてみました。

Facebook公式のいいね！ボタン

さて、とは言ってみたもののどうやって実装したらいいのかしら…ってそこからかい！ひとまずFacebook公式の いいね！ボタン から見てみる事にしましょう。

参考 いいね！ボタン - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook

これをテンプレート化するかウィジェットにでも埋め込んで、SNSボタンの上あたりに設置しておけばよさそうな感じですが、このままだと本当にボタンしか無いのでさすがにちょっとそれは…ねぇ？

とりあえず適当に枠を作って左側に画像、右側に定型文とボタンを組み込んだ いいね！ボックス を作ってみましたが、何とも微妙な出来だったのでどうせならもっと簡単に自動化したいという事で違う方法をあたってみる事にします。

基本的な部分はプラグインで

最初に VA Social Buzz というプラグインが見つかりましたが、シェアボタンはテーマが標準装備しているのでバッティングする機能が多いという事や、プラグインのシェアボタンを非表示にするには有料のオプションが必要だったり、カスタマイズするにはファイル数が多過ぎてソースを追うのが面倒（中身が空のファイルもあったので実際はそこまで大変では無いかも？）といった理由からこのプラグインの利用は見送る事にしました。

私がやりたいのは恐らく非常に簡単な事なので、出来るだけシンプルな方がいいな…と思っていたらありました！最終更新が1年前ですがまぁ大丈夫でしょう、という事で この記事が気に入ったらいいね を利用させていただく事にしました。

この記事が気に入ったらいいね

ある意味すごいプラグイン名ですよね、直球でわかりやすいですけど。

 WordPress.org 

この記事が気に入ったらいいね

https://ja.wordpress.org/plugins/like-me-if-you-like-this-article/

各個別記事のおわりに、Facebook ページヘのいいねのおすすめをします。

早速インストールして プラグインの編集 からファイルを確認してみると、readme にCSSと本体の3ファイルという極めてシンプルな構成です。そう、私が求めていたのはまさにこんな感じのプラグインだったんですよ。

カスタマイズの内容

この種類のプラグインはいいね！ボタンの横に表示する画像を、その投稿のアイキャッチから持ってくるものがほとんどだと思います。

それを投稿に貼り付けたYouTubeの動画IDからサムネイル画像のURLを求めて、それをアイキャッチ画像の代わりに設定してしまおうというものです。

尚、前提条件として投稿に貼り付けるのは以下のような youtu.be 形式の短縮URLのみです。

https://youtu.be/xxxxxxxxxxx

youtube.com/watch?v= 形式や埋め込み用のコードでは機能しませんので、短縮URLを使用するかコードの正規表現の修正が必要になります。

プラグインのカスタマイズ

それでは この記事が気に入ったらいいね の like-me-if-you-like-this-article/mamahack.php を編集しましょう。

次にここ！というのが難しいですが、まずはこの場所を探します。だいたい真ん中辺りより少し手前くらいの位置になるでしょうか。

if ( has_post_thumbnail( get_the_ID() ) )
{
	$like .= wp_get_attachment_image_url( get_post_thumbnail_id( get_the_ID() ), 'medium' );
}
elseif ( has_site_icon() )
{
	$like .= get_site_icon_url();
}

ここでは何をしているかと言いますと、投稿にアイキャッチが設定されている場合はその画像、無い場合はサイトのアイコン画像をセットしています。

そこでこれを少々アレンジして、投稿内にYouTubeの短縮URLがある場合はそのIDから求めたサムネイル画像、無い場合は投稿のアイキャッチ画像、それも無い場合はサイトのアイコン画像という感じにカスタマイズしたいと思います。

正規表現に関してはもっと良い記述があるかもしれませんが、とりあえずやりたい事は出来ているという事でそこはひとつご容赦いただきたい。

$content = esc_attr(get_the_content());

if ( preg_match('/youtu.be\/([\S]+)/', $content, $youtubeID) )
{
	$like .= 'https://img.youtube.com/vi/' .$youtubeID[1] .'/mqdefault.jpg';
} else {
	if ( has_post_thumbnail( get_the_ID() ) )
	{
		$like .= wp_get_attachment_image_url( get_post_thumbnail_id( get_the_ID() ), 'medium' );
	}
	elseif ( has_site_icon() )
	{
		$like .= get_site_icon_url();
	}
}

現行のロジックを黄色マーカーの部分で挟んだ感じになります。最終的にこの形になっていればどのようにコピペしても構いませんが、全体をコピペしてごっそり上書きしてしまうのが一番手っ取り早いかと思います。

貼り付けたYouTube動画と同じ画像になっていれば成功です。

本文と間隔が空きすぎると思ったら

先ほど編集した箇所の何行か上にこのような部分があるので

$like = '<p>&nbsp;</p>';

いくつか変更パターンを挙げてみますと

$like = '';

$like = '<hr>';

$like = '<h2>いいね！してもよくってよ？</h2>';

単純にクリアしてもいいですし、罫線（区切り線）や見出しを入れる事も出来るので、その辺はお好みで編集していただければと思います。

需要は少ないと思いますが

私の場合はエントリーのアイキャッチに正方形の画像を使う予定なので、いいね！ボックスにそのまま使うと比率的に相性が良くないという事と、基本的に全てのエントリーにYouTubeの動画を貼り付ける事になるのでこのようなカスタマイズをしてみました。

世間的にはあまり需要は無さそうな感じですが、応用は出来ると思いますし何らかの形でお役に立てていただければ幸いです。