WordPress で Vine 埋め込みとサムネイル取得

Vine

Vine とは、Twitter社による非常に短い(最大6秒)のループ画像のサービスです

私自身最近知ったばかりで詳しくないのですが、WordPressの記事に埋め込んで紹介することも出来ます

参照:WordPress.com で Vine 動画を表示

Vine を記事に埋め込む

この記事を見た時は、既に WordPress4.0 で埋め込みに対応してあるのかと思いましたが、やってみるとうまく行きません (^_^;)

WordPress.com の話で、WordPress4.0 ではまだようです
いずれ標準で対応してくれると思います

※WordPress4.1 で対応にされました

WP4.0 以下で試したい方は、使用しているテーマの function.php に1行追加すれば Vine 埋め込みに対応できます

wp_oembed_add_provider( '#https?://vine\.co/v/([a-z0-9]+)\/?#i', 'https://vine.co/oembed.{format}', true );

これを追加すれば、記事中に https://vine.co/v/XXXXXX のようにURLを記述するだけで Vine 動画を埋め込むことが出来ます

詳しくは oEmbed – WordPress Codex 日本語版 – SourceForge.JP を参照して下さい

PHPコードを書くのがいやなら、Jetpackのショートコードを使用するか、プラグインを使用すればOKです

最近、Vine 公式のプラグインも公開されたようです

vine_plugin

https://wordpress.org/support/plugin/vine

動画の埋め込みがうまくいかない場合

私もすっかりはまってしまったのですが、管理画面の TinyMCE エディターのビジュアル画面では埋め込まれて表示されるのに、そのページを表示させると URL が表示されるだけで動画が表示されません (^_^;)

プログラムを追いかけて行くと埋め込まれた動画の URL はショートコードとして処理されるのですが、URL は独立した行に書くこととリンクとして記述しないことという決まりがあります

この独立した行に書くというのが、どうも行頭から行末までに余計なものを書いてはいけないということのようです

結論から言うと TinyMCE Advanced の Stop removing the <p> and <br /> tags when saving and show them in the Text editor をチェックしていたので行頭と行末に <p>,</P> がついてしまいショートコードとして認識されなかったようです

この設定を使わないか、URL を embed ショートコードで囲めばOKです (^^)

試しに Vine を設置してみます

うまく埋め込まれたでしょうか (^^)

ちなみにレスポンシブ対応にするには、いつもの魔法のスクリプト FitVids.js を少しカスタマイズします

CodePen で参考になるコードが公開されていましたのでこれを使わせて頂いてます

Vine のサムネイルを取得

次に Vimeo と youtube  のサムネイルを取得する方法で紹介した oEmbed を使って Vine サムネイルの取得をやってみます

vine_thumbnail

サンプルプログラム

プログラムは、$post_content に入っているコンテンツ内を正規表現を使い Vine のURLからIDを取得します

最初に正規表現でマッチしたIDを使い json 形式のデータを取得します

//vine oEmbed
if(empty($thumburl)){
    if( preg_match_all('#vine\.co/v/([a-z0-9]+)\/?#i', $post_content, $matches)){
       if(!empty($matches[1][0])){
            $id = $matches[1][0];
            $response = wp_remote_get( "https://vine.co/oembed.json?id={$id}" );
            if ( ! is_wp_error( $response ) && $response['response']['code'] === 200 ) {
                $obj = json_decode( $response['body'] );
                $thumburl = $obj->thumbnail_url;
                $atrsize = array('width' => $obj->thumbnail_width, 'height' =>$obj->thumbnail_height);
            }
        }
    }
}

ほとんど Vimeo や Youtube と同じ方法で情報を json データとして取得出来ます (^^)

vine_oEmbed_debug

参考サイト

 

以上

Vine の埋め込みとサムネイル取得について紹介しました

 

関連コンテンツ


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss