[Instagram API]インスタグラムにアップした写真や動画をサイトに読み込む@API編

前回の記事で「SnapWidget」というサービスを使ってインスタグラムの写真や動画を読み込む方法を書きましたが、今回はAPIを使用して読み込んでみたいと思います。

なぜAPIを使った方法なのか?と言うと先日、このブログに読み込んでるインスタグラムが表示できてないという自体に陥ってたからです。未だに原因は不明・・・

「SnapWidget」は無料(一部有料)のサービスなのでいつ終わってもおかしくないと思い、今回はAPIを利用する方法を書き留めて置こうと思った次第です。

Instagram APIで写真を表示するDEMO

Instagram Developer クライアント登録

まずはInstagram Developer クライアント登録をしCLIENT IDを取得していきます。

PCからInstagramにアクセスします。
インスタグラムにアップした写真や動画をサイトに読み込む@API編

ページ下の「API」をクリックします。
インスタグラムにアップした写真や動画をサイトに読み込む@API編

「Register Your Application」をクリックします。
インスタグラムにアップした写真や動画をサイトに読み込む@API編

「Register a New Client」をクリックします。※初めてクライアント登録する方はManage Clients」は何もありません。
インスタグラムにアップした写真や動画をサイトに読み込む@API編

必要事項を入力します。
インスタグラムにアップした写真や動画をサイトに読み込む@API編

  • Application Name・・・アプリの名前ですが適当に自分が分かる名前を付けましょう。
  • Description・・・アプリの説明ですがこれも適当に自分が分かるように。
  • Company Name・・・会社名ですが、個人のサイト名やブログ名で構いません。
  • Website URL・・・自分のサイト、ブログのURLを入力。
  • Valid redirect URIs・・・最終的にアクセストークンを取得するわけですが、そのときに必要になるリダイレクト先です。写真や動画を貼り付けるサイト、ブログのURLを入力しておきましょう。
  • Privacy Policy URL・・・未入力で構いません。
  • Contact email・・・自分のメールアドレスを入力、または未入力でも構いません。

「Security」タブをクリックし「Disable implicit OAuth:」のチェックを外します。
※「Disable implicit OAuth:」のチェックを外すのを忘れるとアクセストークンを取得するときにエラーになります。
インスタグラムにアップした写真や動画をサイトに読み込む@API編キャプチャの文字列を入力して「Register」をクリックします。

「Successfully registered ‘アプリ名’」が表示されればクラアント登録は成功です。
インスタグラムにアップした写真や動画をサイトに読み込む@API編

CLIENT STATUSの「Sandbox Mode」とはAPIのテスト機能のようなもので利用には制限があります。

  • 扱えるユーザー数は10人まで
  • 最新の投稿は20投稿まで取得可能
  • 1時間に500リクエストまで

と制限があります。

設定の変更やSecurityの変更をしたいときは「MANAGE」をクリックすると変更は可能です。

Instagrm API アクセストークンの取得

アクセストークンの取得は、クライアント登録したとき取得した「Client ID」と「Valid redirect URIs」が必要になります。
この2つを下記のURLに代入してブラウザでアクセスします。

https://instagram.com/oauth/authorize/?client_id=「Client ID」&redirect_uri=「Valid redirect URIs」&response_type=token

Client ID = 123456789
Valid redirect URIs = http://hoge.com
だった場合

https://instagram.com/oauth/authorize/?client_id=123456789&redirect_uri=http://hoge.com&response_type=token

となります。

入力した情報が正しければ以下の表示されますので「Authorize」をクリックします。
インスタグラムにアップした写真や動画をサイトに読み込む@API編

「Valid redirect URIs」で指定したURLにリダイレクトされます。
この時のアドレスバーに表示されているのがアクセストークンになります。
大事にメモって保存しておきましょう。
インスタグラムにアップした写真や動画をサイトに読み込む@API編

Instagram ユーザーIDを取得する

最後にユーザーIDの取得です。

Find my Instagram User IDにアクセスしユーザーIDを取得します。
インスタグラムにアップした写真や動画をサイトに読み込む@API編Enter Username here にインスタグラムのユーザー名を入力し、計算の答えを入力し、Get Instagram User IDをクリックするとユーザーIDの取得は完了です。

instafeed.jsを使って写真を表示する

instafeed.jsでダウンロードします。
通常のダウンロードとgithubでのダウンロードがありますが、どちらでも構いません。

ほぼコピペできるようにhtmlを全て貼り付けておきます。

9行目 clientIdに、最初に取得したCLIENT IDを入力します。
11行目 ユーザーIDを入力します。
12行目 アクセストークンを入力します。
14行目 表示枚数を入力します。(20枚以下)
15行目 写真サイズを入力します。
thumbnail – 150×150 / low_resolution – 306×306 / standard_resolution – 612×612
16行目 表示したようにhtmlを書きます。

上記のように書いてますが{{キーワード}}というキーワードがいくつか用意されていて、それを組み合わせて書いていきます。
その他のキーワードはこちらにあります。

まとめ

いかがでしたでしょうか?
めんどくさいですけど、難しくはないと思います。

APIでやっちゃうメリットは何と言ってもレイアウトが自由に作れる点にあると思います。

slick.jsなどのスライダー系のjqueryプラグインと組み合わせてInstagramの写真を読み込んでスライドさせるとかできちゃいますね。

Instagramでおしゃれ楽しいWebライフを手にれちゃってください!エ?

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク