2013 . 06 . 25

Instagramの画像を埋め込むための共有URLを取得する簡単な方法

先日、Instagramビデオの埋め込みについて取り上げたばかりですが、画像に関しても今のところ外部サイトに載せるための「シェア」なり「埋め込み」なりのインターフェースを設けていません。

しかしInstagramでは埋め込みに関するAPIが用意されていてこれを使うことで簡単に画像のプレビューなどを取得して任意のページに埋め込むことが可能です。

例えば画像ページのURLがこのような場合

http://instagram.com/p/aWdEd1JpGR/

下のように「/media/?size=m」と付け足してアクセスすれば画像ファイルのURLに直接リダイレクトしてくれます。

http://instagram.com/p/aWdEd1JpGR/media/?size=m

なお、「size」パラメータで以下のようなサイズ指定が可能です。

t : サムネイル（150x150）
m : ミディアム（306x306）
l : ラージ（612x612）

あとはこれを適宜イメージタグなどに入れて貼り付ければいいだけです。

今回はこの画像URLを合成する簡単なブックマークレットを作ってみました。

上記のようにコード内のsizeパラメータを書き換えることでサイズの変更が可能です。

javascript:(function(){var%20url=location.pathname;var%20str='http://instagr.am'+url+'media/?size=m';prompt('',str);})();

下のブックマークレットをInstagramのページ上かポップアップした状態でクリックするとURLが生成され表示されます。

（対象がビデオの場合には静止画像のURLになります）

Image URL

ついでに先日取り上げたビデオの埋め込みのコード生成のブックマークレットも作ったのでよければどうぞ。

こちらもコード内のwidthとheightでビデオのサイズが指定できるので適宜変更してみて下さい

javascript:(function(){var%20url=location.pathname;var%20str='<iframe%20width="500"%20height="500"%20src="http://instagram.com'+url+'embed/"%20frameborder="0"%20scrolling="no"></iframe>';prompt('',str);})();

下のブックマークレットをInstagramページ上かポップアップした状態でクリックすると埋め込み用のフレームタグが生成され表示されます。

（対象がビデオではなく画像の場合にはフレーム内に画像が挿入される形になります）

Embed Video

さて、Instagramがこういった共有のためのインターフェースを設けていないのはちょっと意外に感じますが、少なくともソーシャルメディアである以上、外部サイトに発信したくないはずはなく、今後何らかの方法で実装されると考えるのが自然でしょうが、今回の情報はそれまでのつなぎとして役に立つのではないかと思います。