wordpressでYoutubeのiframeからサムネイルを抽出してOGPに設定する方法

2014.7.3 webツール

wordpressでYoutubeのiframeからサムネイルを抽出してOGPに設定する方法

こんばんは。金曜日の夜には決まってどこかラーメンを食べに行くのですが、自分個人の習慣なのに毎週楽しみです。今年中にラーメン紀行を綴るだけの写真掲載サイトを立ちあげたいです(誰得)

はい、今回は、
Wordpressでブログをつくって記事を書き、
その投稿がFacebookで投稿をシェアされたとき、OGP画像でなくYoutube動画のサムネイルをタイムラインに出してもらいたい時のコードを紹介します。

wordpress投稿のYoutubeサムネイルをog:imageにする関数

function.phpに以下のコードを書きます。

function fbThumbnail($thumbsize='0') {/*youtubeのサムネイルを小サイズで取得*/
	$youtubePostS = esc_attr(get_the_content());
		preg_match('/www.youtube.[-_\/A-Za-z0-9]*/', $youtubePostS, $youtubeUrl);
		
		$youtubeId = str_replace("www.youtube.com/embed/","",$youtubeUrl[0]);

		if(isset($youtubeUrl[0])){
					echo 'http://img.youtube.com/vi/' . $youtubeId . '/' . $thumbsize. '.jpg';//Youtube Thumbnail
				}else{
					echo bloginfo('template_url') . '/【用意したOG:imageのURL】'; //OGimage
				}
	}

get_the_content()で投稿の情報を根こそぎ取得します。
関数リファレンス/get the content – WordPress Codex 日本語版

それをesc_attrを使い、&とか色々エンコードして、これからIDを抽出してHTMLに使うために支障のないカタチにします。
関数リファレンス/esc attr – WordPress Codex 日本語版

preg_matchを使って正規表現で文字列を検索、置換、代入。
今回は先ほどget_the_content()でコンテンツ情報を詰め込んだ$youtubePostsから、「/www.youtube.”半角英数字やハイフン、アンダーバーの羅列”の連続」を$youtubeUrlに代入。
【PHP】preg_match関数まとめ – NAVER まとめ

正規表現の検索結果は配列で返されるので$youtubeUrl配列です。
そしてその1番目の値がヒットした文字列なので$youtbeUrl[0]ここからstr_replaceで「www.youtube.com/embed/」を探し、空白にする(=消去)したものを$youtubeIdに代入。
PHP: str_replace – Manual

この$youtubeIdが動画個別のIDで、サムネイルを識別するのに重要なのです!

if(isset($youtubeUrl[0])){}で、ちゃんと正規表現の検索にヒットしたかどうか確かめます。trueならば$youtubeIdを使ってサムネイルのURLを出力。

echo 'http://img.youtube.com/vi/' . $youtubeId . '/' . $thumbsize. '.jpg';//Youtube Thumbnail

http://img.youtube.com/vi/ 動画ID /0~2までの数値(サムネイルサイズ).jpg
これが動画サムネイルのURLですので、投稿記事の中にYoutubeで吐き出されたiframeタグがあって正常に取得できていれば、これで出力されているはずです!やったね!

しかし、念のためelseでサイトの独自のog:imageを出力するように指定をしておきます。
これで記事中にYoutube動画が無くてもサイト独自のog:imageが表示されるかと思います。

UP完了後は必ずOpengraph Debuggerで更新して下さいねー

ちなみに以前、サムネイルをループ中で出力する方法を書きましたが、全く同じです!
wordpressでquery_postsを使い投稿ループ、記事中の画像やYoutubeサムネイルも表示

参考はこちら。
WordPressでiframeで埋め込んだYouTube動画のサムネイルを取得して表示する | memocarilog

この関数「fbThumbnail()」をそのまま<meta property=”og:image” content=””>に埋め込んで終了!

<meta property="og:image" content="<?php echo fbThumbnail(); ?>">

バイラルメディアなど、投稿記事中に動画を掲載して拡散を狙う場合は有効ですね~!しかしほかに目的がある場合はまだ少し条件分岐などのカスタマイズが必要です。

もっとも、サイト独自で用意したog:imageに用事がないのはサイトが繁栄するまででしょうから汎用性は高くないですね。こんなののために悩んだ時間が…
にしてもこの正規表現のまとめ役に立ちそう

 

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからグラフィックデザイン的なことをして、ごにょごにょと小さく活動中。Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったり、主に散歩しています。だいたいラーメンを食べて帰ってくる、そんな過ごし方です(都内のオススメ散歩コース募集中!)。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。