こんばんは。金曜日の夜には決まってどこかラーメンを食べに行くのですが、自分個人の習慣なのに毎週楽しみです。今年中にラーメン紀行を綴るだけの写真掲載サイトを立ちあげたいです（誰得）
はい、今回は、
WordPressでブログをつくって記事を書き、
その投稿がFacebookで投稿をシェアされたとき、OGP画像でなくYoutube動画のサムネイルをタイムラインに出してもらいたい時のコードを紹介します。
wordpress投稿のYoutubeサムネイルをog:imageにする関数
function.phpに以下のコードを書きます。
1 2 3 4 5 6 7 8 9 10 11 12 | 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を出力。
1 | 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()」をそのままに埋め込んで終了！
1 | <meta property=“og:image” content=“<?php echo fbThumbnail(); ?>”> |
バイラルメディアなど、投稿記事中に動画を掲載して拡散を狙う場合は有効ですね～！しかしほかに目的がある場合はまだ少し条件分岐などのカスタマイズが必要です。
もっとも、サイト独自で用意したog:imageに用事がないのはサイトが繁栄するまででしょうから汎用性は高くないですね。こんなののために悩んだ時間が…
にしてもこの正規表現のまとめ役に立ちそう
でわ！
