Mac好きのアラフォーweb製作者ののんびりブログ

Mac好き、iPhone好きのアラフォーのWEB製作者がその日覚えたこと、気がついたことを備忘録的に淡々とつづるブログです。自分が忘れないために残したものが誰かのお役に立てれば…。

instagramのフィードをサイトに取り込むのに手こずった件。【事前準備編】

先日、とある案件で、サイト内にinstagramのフィードを取り込んで欲しいという依頼がありました。

詳細は、
「インスタグラムに投稿されている画像のうち、特定の「ハッシュタグ」がついた画像だけを、ある程度一覧で並べて表示できたら…。」
ということ。

オッケー。わかりました。
サクッと設置しておきますねー、とサラッとやってしまえると思いきや、ちょっと苦戦してしまったので、また同様の案件があった時ようにメモで残しておくことに。

調べてまず見つかった情報が、

http://instagram.com/tags/タグ名/feed/recent.rss

と書けば取得できそうとのこと。
参考:ハッシュタグを指定してInstagramの写真をブログに表示する。 | S-wander

自分の案件ももWordpressで構築しているサイトに読み込んであげたいので、ちょうどいいや、とやってみるとどうにもフィード自体が取得できない…。
インスタグラム内の仕様が変わったのか?

ともかく、上のサイトで教えてもらった方法が使えず、別の方法を探ることにします。

先述の通り、wordpressに組み込むのでプラグインAlpine PhotoTile for Instagramというようなのが有名なようですが…、)を使ったり、ブログパーツとして作成してくれてiframeで読み込むようなウェブサービスもあったりするようですが、レスポンシブで構築しているサイトでiframeで読み込むのも、実際に読み込めた後に面倒だし、何かないかなと探していると、jQueryで読み込んで表示させてくれるものを発見!

その名も「jquery-instagram」。
そのまんまのネーミングですね。

インスタグラムから取得してきた各画像をhtmlとして成形してくれるので、表示の際にcssでいろいろと微調整もしやすそうなので、今回はこれを使ってみることにします。

導入の準備

まずは、jquery-instagramのダウンロードから行きたいところですが、まずは、インスタグラムに接続して操作・取得するためのAPIを利用する用途の、開発者としての登録が必要とのこと。

登録はInstagram Developerから行えばいいようです。

Facebookもこんな感じだなーと思いつつ、Facebook同様、そもそも海外発信のサービスなのでいちいち英語ですが、まずはインスタグラムにログインした状態で、開発者登録のサイトにアクセスして「Register Your Application」をクリック。

f:id:kazzpapa3:20150216202058j:plain

すると
You have not registered any clients with the Instagram API.
お前さん、インスタグラムのAPIを使ったクライアント登録がありませんよ。

とか言われます。
そりゃあ、今までしたことありませんから…。

と思いつつ、右上の「Register a New Client」をクリックします。

f:id:kazzpapa3:20150216202226j:plain

そうすると、APIを利用した新しいアプリケーション用のクライアントIDを作成する画面に遷移します。

f:id:kazzpapa3:20150216202244j:plain

自分が管理しやすいように個別の名前をつけて(Application Name)、作成するアプリケーションの説明を書いて(Description)、設置するサイトのURLを入れて(Website)と上から順番に埋めていけばいいようですが、今回「OAuth redirect_uri」と「Disable implicit OAuth」はチェックを外して登録しました。

登録が通ると、「Client ID」、「Client Secret」なるものが発行されました。

f:id:kazzpapa3:20150216202315j:plain

これで、まずは読み込むためにAPIを利用する事前準備が整いました。

InstagramersFile(インスタグラマーズ・ファイル)

InstagramersFile(インスタグラマーズ・ファイル)