WordPress で Instagramサムネイルを oEmbed で取得

Instagram

Instgramは、画像、動画(最大15秒)の無料の共有サービスです

私自身は、使用していないので詳しくないのですが、前回 Vine について紹介しましたので、こちらも紹介しないわけには行きません (^^)

Instgram.com サイトで綺麗な写真、動画がを見ることができます
Instagram Capturing and sharing the world’s moments. http://blog.instagram.com

Instagram を記事に埋め込む

Instgram は、既にWordPressでサポートされていますので、特別にプラグイン等を使用しなくても直ぐに記事に埋め込むことが出来ます

詳しくは下記記事を参照して下さい

参照:Embed an Instagram image or video

Instgramサイトで公開されていた動画を試しに埋め込んでみます

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

レスポンシブに対応するには、jQuery の FitVids.js にちょっと追加の記述が必要です

参照:http://codepen.io/davatron5000/pen/zleoL

Instgram のサムネイルを取得

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

instgram-thumbnail

サンプルプログラム

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

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

//instgram サムネイル画像
if(empty($thumburl)){
    if( preg_match_all('#(^|\])\s*http://instagr(\.am|am\.com)/p/([a-z0-9_]+)\s*#im', $post_content, $matches)){
       if(!empty($matches[2][0])){
            $id = $matches[2][0];
            $response = wp_remote_get( "http://api.instagram.com/oembed?url=http://instagr.am/p/{$id}" );
            if ( ! is_wp_error( $response ) && $response['response']['code'] === 200 ) {
                $obj = json_decode( $response['body'] );
                if(!empty($obj->thumbnail_url)){//type=video or rich ?
                    $thumburl = $obj->thumbnail_url;
                    $atrsize = array('width' => $obj->thumbnail_width, 'height' =>$obj->thumbnail_height);
                }
                else if(!empty($obj->url)){     //type=photo
                    $thumburl = $obj->url;
                    $atrsize = array('width' => $obj->width, 'height' =>$obj->height);
                }
            }
       }
    }
 }

データ取得時の oEmbed api は、画像と動画で区別なく使えますが、取得したデータは異なっています

画像の場合(旧)

instgram-photo

動画の場合(旧)

instgram-video

参考サイト:Embedding

ちなみにこの参考サイトには、注意書きとして photo や video タイプから rich タイプへ変わるようなことが書いてありますが、12/1現在まだのようです

The oEmbed endpoint is going to be updated on November 3rd, 2014. The new behavior will be to always return type ‘rich’ instead of type ‘photo’ or ‘video’, as it does today. You can read more about oEmbed types here: http://oembed.com/.

To test the new behavior you can pass the parameter ‘beta=true’. The documentation below refers to the new behavior with the beta=true parameter. When the oEmbed endpoint is going to be updated, it will always return type ‘rich’ and you won’t need to pass the beta parameter anymore.

12/5 追記
新しく rich タイプに切り替わったようで、写真、動画とも rich タイプになりました

画像の場合(新)

instagram-photo-rich-data

動画の場合(新)

instagram-video-rich-data

以上

Instagram のサムネイル取得について紹介しました

 


まとめ記事紹介

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