WordPress4.5 Twitter Moment と Collection Timeline 埋め込み機能

WordPress4.5で Twitter 埋め込み機能が新しくなりました

ツイート(シングル)の埋め込み機能だけだったのが、モーメントとコレクションタイムラインの埋め込みも出来るようになりました

また、oEmbed のエンドポイントも従来の api.twitter.com/1/statuses/oembed から publish.twitter.com/oembed に変わりました

今回は新しく追加されたモーメントとコレクションタイムラインについて紹介いたします

Moment モーメント

どんなサービスなのかというと、今話題となっているトレンドを動的にまとめて簡単にアクセスできるようにするサービスのようです

Embedded Moment
An embedded Moment displays multiple Tweets with edge-to-edge images and video displayed in a grid format. The grid widget display looks great on large displays and scales down to a single column on narrow displays such as a mobile phone.

他に日本語の情報としては下記が参考になります

米国で「モーメント」機能を始めました

例えば気になるスポーツなら、試合経過や関連した画像やツイートが次々表示されていくようなイメージでしょうか。

どちらかと言えば、企業や団体等の組織が大元の情報を提供する側となり、多くの人にアクセス、参加してもらうことで生の情報提供や広告宣伝効果を見込んだサービスのようです

残念ながらモーメントは、まだ米国内のみでしか行われていないようですが、インターネットの世界はつながっていますのでモーメントをブログに埋め込むことは可能です

試しに、上記参照ページに紹介されていたモーメントを埋め込んでみます

Twitter Moment のページ(例えば https://twitter.com/i/moments/650667182356082688)のURLを投稿編集画面のビジュアルエディタに貼り付ければ埋め込まれます

※日本だとモーメントのURL情報自体が入手しづらいのでまだ使いにくいですが、海外の情報を紹介する場合に利用できるかも知れません

The Obamas' wedding anniversary

 

Collection コレクションタイムライン

先ほどのモーメントと異なり、このサービスは日本でも直ぐに活用できそうです

どんなサービスかと言うと、ツイッタータイムライン上の様々なツイートのお気に入りをコレクションしてまとめたものを簡単に公開できます

単なるツイートのまとめと言うだけでなく、グリッドを使ってギャラリーのようにクールに表示することが出来ます

詳細や使い方は下記サイトが参考になります

埋め込みコレクションタイムライン
コレクションタイムラインには、Twitterユーザーによってまとめられた複数のツイートがその選択された表示順で表示されます。新しいコレクションは、TweetDeckを使って作成するか、Twitter APIを使って直接作成します。

新しい埋め込みコレクションタイムラインの作成は、自分のTwitterアカウントに関連付けられているコレクションに対し、そのアカウントのウィジェット設定から行います。

Twitterが複数のツイートをまとめてサイトに埋め込み可能なツール「Collection API」などを発表
Twitterが、複数のツイートを1つにまとめてウェブサイトに埋め込むことができる「Collection API」と、埋め込み作業を簡略化する「publish.twitter.com」を発表しまし

上記サイトを見ればコレクションを作り、埋め込みコードを取得する手順はわかると思います

今回はツイッターの TweetDeck を使い、水族館の画像や動画からいくつかピックアップしてコレクションを作成してみました

tweetdeck_collection

 

コレクションを作ったら、右上のマークをクリックしてメニューを開き、Share をクリックして Embed を選択します

すると Twetter Publish サイトが開きコレクションのURLがセットされています

初回は、表示タイプとしてタイムライン形式かグリッド形式かを選択する画面が表示されたのですが、一度選択すると次回からはその形式で画面中ほどに埋め込みコードとサンプル表示が表示されるようになるようです

publish_twitter_collection

ちなみにここで取得した埋め込み用のコードを投稿編集画面のエディタをテキストモードにして貼り付ければブログに表示出来るようになります

ここまでは他のブログでもいろいろ紹介されています

上記手順でコレクションを埋め込めますが、ビジュアルモードを使っている人には、モード切り替えをしなくてはならないのと編集画面上で埋め込んだコレクションを確認出来ないという問題があります

埋め込み用のフィルター関数を設置

WordPress4.5 では、コレクションURLを入れるだけで埋め込み表示してくれる機能 があります

URLを入力するだけで下記のようなコレクションタイムラインを埋め込み、エディターのビジュアルモードでも確認出来ます

水族館 – Curated tweets by eno_celtislab

ただ、残念なことにグリッド表示ではありません (^_^;)

そこで oEmbed API を見てみると oEmbed リクエスト時にパラメータ widget_type=grid を指定すれば良いみたいです

Twitter Timeline oEmbed API
Return a simple embed HTML for a Twitter timeline specified by the timeline URL, in an oEmbed-compatible JSON format. User, list, likes, and collection timelines are supported.

The timeline markup is meant to be cached on your servers for up to the suggested cache lifetime specified by the cache_age property.

Resource URL

https://publish.twitter.com/oembed

ということで次のようなURLを貼り付けてみましたが残念ながら表示されません (>_<)

https://twitter.com/eno_celtislab/timelines/740068621104222210&widget_type=grid

調べてみるとWidget_type=grid 部分がうまく伝わっていないことがわかったので、フィルター関数を作って正常に伝わるようにしてみました

使用しているテーマの function.php に下記コードを追加すれば機能するはずです

    /**
     * oEmbed twitter-video 又は twitter-grid 埋め込み形式の表示
     * 埋め込みURLの最後に &widget_type=video か grid がセットされていたら正しく oembed 要求するように再構成する
     **/
    function oembed_fetch_twitter_widget_type( $provider, $url, $args ) {

        if(preg_match('#(https?://twitter\.com/.+?/status/[0-9]+)&.*widget_type=video#i', $url, $match)){
            $url = $match[1];
            //WP4.5 からエンドポイントが publish.twitter.com/oembed に変更された(2016/6 現在ではどちらでもOK)
            if(preg_match('#https://publish\.twitter\.com/oembed\?maxwidth=[0-9]+&maxheight=[0-9]+&url=#i', $provider, $match)){
                $provider = $match[0] . $url . '&widget_type=video';
            }
            else if(preg_match('#https://api\.twitter\.com/1/statuses/oembed\.json\?maxwidth=[0-9]+&maxheight=[0-9]+&url=#i', $provider, $match)){
                $provider = $match[0] . $url . '&widget_type=video';
            }
        }
        else if(preg_match('#(https?://twitter\.com/.+?/timelines/[0-9]+)&.*widget_type=grid#i', $url, $match)){
            $url = $match[1];
            if(preg_match('#https://publish\.twitter\.com/oembed\?maxwidth=[0-9]+&maxheight=[0-9]+&url=#i', $provider, $match)){
                $provider = $match[0] . $url . '&widget_type=grid';
            }
        }
        return $provider;
    }
    add_filter( 'oembed_fetch_url', 'oembed_fetch_twitter_widget_type', 10, 3);

※Celtispack プラグインの Ver2.0.0 にこの機能は盛り込みましたので、oEmbed extend 機能を有効化すれば機能します

グリッド形式の表示

水族館

 

これで、コレクションURLに &widget_type=grid を付ければグリッド形式で表示されるようになります (^^)

編集画面でも確認出来ますし、タイムライン形式にするかグリッド形式にするかも使い分けられるのでいい感じです (^^)

以上

Twitterの新しい埋め込みについて紹介しました

 


まとめ記事紹介

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