InstagramをカンタンにEmbedできるようブラウザ拡張機能に取り入れてみた

Instagramの動画対応について書いた際に、Embed(ブログ記事に埋め込むこと)がカンタンにできたらなーとか言っていたんですけども、なんともカンタンに埋め込めることが判明しましたよ。

ある意味、目からうろこ。というわけで、どうせならもっとカンタンにできるよう、ブラウザ拡張機能に取り入れてみました。

埋め込むための方法について知ったのがgori.meさんの以下の記事。

この記事によると、iframe形式で写真や動画を単体表示させたときのURL末尾にembedを追加してやればいいとのこと。

http://instagram.com/p/a3DPvIoSEL/embed

つまり、このURLをiframeで呼び出してやればいいわけですね。
コードにすると以下のとおり。

<iframe src="http://instagram.com/p/a3DPvIoSEL/embed" width="610" height="610" frameborder="0" scrolling="no"></iframe>

いやー、これはホントにカンタンだわ。

とは言え、毎回このコードを書いて埋め込むのはめんどくさいですよね。ってことで、僕はブロガー御用達のChrome拡張機能「Create Link」でInstagramのEmbed用フォーマットを作りました。

<iframe src="%url%embed" width="610" height="610" frameborder="0" scrolling="no"></iframe>

こうしておけば、あとは埋め込みたい写真や動画を開いて、右クリックからサクリとiframe形式のコードをコピー→記事編集で貼り付けという流れで完結しますね。

Chrome拡張だけでなく、Firefoxのアドオン「Make Link」もフォーマットはほぼ同じなので流用できるんじゃないかと思います。

で、以下が実際にEmbedしてみた結果。
6/22(Sat)に開催された「MTV VIDEO MUSIC AWARDS 2013」に参戦した際に配布されたXyloBandsの動画です。

ほほほう。ちゃんと再生できますね。こりゃいいや。
Embedの手間数も「Vine」と一緒ですしね。

それにしてもInstagramの動画を撮ってて思ったのが、iOSのみ搭載されているデジタル手ぶれ補正機能が素晴らしいということ。

上の動画はVMAJ2013に向かう電車内から撮影したもの。
舞浜駅手前辺りなんですが、このあたりやや上下に揺れが激しい部分があって、普通に撮影したら画面もしっかり揺れてしまうはずなんですが、デジタル手ぶれ補正のおかげで、画面の揺れが一切なくスムーズに撮れてるんですよね。

デジタル手ぶれ補正なんて、あんまり効果ないだろうと高をくくってましたが、はっきり言って予想以上にきちんと処理してくれてますよ。

いやはやVideo on Instagramは予想以上に素晴らしいですな。
カンタンにEmbedできる環境もできたし、これまで以上にInstagramを使いまくりたくなりますよ。