paranitips

Never stop learning! がモットーのゆるふわエンジニアブログ

WordPressでfacebookのoEmbed対応をする

WordPressが4.4からoEmbedに対応し、特に埋め込みコードを書かなくてもurlから自動で埋め込みコードを発行してくれるようになりました。

oEmbedって?

例えばTwitterのつぶやきをサイトに埋め込みたい場合、いままでこういう埋め込みコードをコピペしてたのが、

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">\そろそろ本気出す/</p>&mdash; にっしー (@paranishian) <a href="https://twitter.com/paranishian/status/465847958143918080">2014年5月12日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

そのツイートのurlを貼っつけるだけで自動でoEmbedエンドポイントから埋め込みコードを取得して表示してくれるようになりました。

https://twitter.com/paranishian/status/465847958143918080
↓↓↓
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">\そろそろ本気出す/</p>&mdash; にっしー (@paranishian) <a href="https://twitter.com/paranishian/status/465847958143918080">2014年5月12日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

ただ、なぜかfacebookだけ対応しておらず、4.7にて対応予定となっています。。

#34737 (Add Facebook oEmbed support) – WordPress Trac

自分で対応しよう

WordPressのアップグレードは待てないので自分で先に対応しちゃいましょう!

GitHubで便利なスニペットが公開されてるのでそれを使うだけでOKです。

khromov/wp-facebook-oembed: Facebook oEmbed support for WordPress

<?php
function khromov_wp_facebook_oembed() {
    $endpoints = array(
        '#https?://www\.facebook\.com/video.php.*#i'      => 'https://www.facebook.com/plugins/video/oembed.json/',
        '#https?://www\.facebook\.com/.*/videos/.*#i'     => 'https://www.facebook.com/plugins/video/oembed.json/',
        '#https?://www\.facebook\.com/.*/posts/.*#i'      => 'https://www.facebook.com/plugins/post/oembed.json/',
        '#https?://www\.facebook\.com/.*/activity/.*#i'   => 'https://www.facebook.com/plugins/post/oembed.json/',
        '#https?://www\.facebook\.com/photo(s/|.php).*#i' => 'https://www.facebook.com/plugins/post/oembed.json/',
        '#https?://www\.facebook\.com/permalink.php.*#i'  => 'https://www.facebook.com/plugins/post/oembed.json/',
        '#https?://www\.facebook\.com/media/.*#i'         => 'https://www.facebook.com/plugins/post/oembed.json/',
        '#https?://www\.facebook\.com/questions/.*#i'     => 'https://www.facebook.com/plugins/post/oembed.json/',
        '#https?://www\.facebook\.com/notes/.*#i'         => 'https://www.facebook.com/plugins/post/oembed.json/',
    );
    foreach ( $endpoints as $pattern => $endpoint ) {
        wp_oembed_add_provider( $pattern, $endpoint, true );
    }
}
add_action( 'init', 'khromov_wp_facebook_oembed' );

こういうのはもっと早く対応してほしいですね〜。

参考