Blog スタッフブログ

【Feedを取得しよう】Instagram APIでFeedを取得してサイトに表示させる方法

Category | Blog
Tag |
/ 65,285views

instafeed
こんにちは奥田です。
さて、今Instagramが流行っていますね。
何より手軽に画像をアップできるのがいいですね!
サイトに自身のアカウントのFeedを取得して表示したい場合に少しややこしい作業が必要です。
今回はざっと流れをご説明したいと思います。

Table of contents

  1. API取得用のクライアントを作成する
  2. USER IDを取得する
  3. アクセストークンを取得する
  4. Instafeed.jsを使ってFeedを取得する
  5. 今回参考にさせていただいたサイト

API取得用のクライアントを作成する

まずInstagramにログインします。

次にプロフィールページへ行き、下部にある「API」というリンクをクリックします。
instafeed01

次に「Register Your Application」をクリックします。

instafeed02

クライアント情報の入力フォームがでてきますので次のように入力します。

instafeed03

「Security」タブに切り替え、「Disable implicit OAuth」のチェックを外します。

instafeed04

入力が完了したらCapcherを入力し、「Resister」を押します。

instafeed06

これで作成完了です。「CLIENT ID」の箇所と先ほど入力した「Valid redirect URIs」を使用しますのでどこかにとっておいてください。

USER IDを取得する

Feed取得にはUSER IDが必要なので以下のサイトで取得します。

Instagram URL末尾のアカウントIDをコピーし、以下のフォームに貼り付けます。
スパム防止のためか計算の答えも入力する必要があるようなので入力します。
instafeed05

すると以下のようにUSER IDが表示されるのでコピーして同じように取っておいてください。

instafeed07

アクセストークンを取得する

さきほど取得した「CLIENT ID」と「REDIRECT_URL」を以下のURLに置換しアクセスします。

https://instagram.com/oauth/authorize/?client_id=CLIENT_ID&redirect_uri=REDIRECT_URL&response_type=token

以下のような画面になるので「Authorize」をクリックします。
instafeed08

「REDIRECT_URL」で設定したページへリダイレクトされます。

instafeed09

URL末尾に「#access_token=***」といった感じでaccess_tokenが返ってくるのでこちらをコピーし同じくとっておきましょう。

Instafeed.jsを使ってFeedを取得する

InstagramのFeedを取得するのに便利なライブラリ「Instafeed.js」を使用します。

以下のように記述すればFeedを取得できます。

<script type="text/javascript" src="path/to/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
		clientId: '{CLIENT ID}',
		get: 'user', 
		userId: '{USER ID}',
		accessToken:'{ACCESS TOKEN}',
		links: true ,
		limit: 8,// 取得件数 
		resolution:'standard_resolution', // thumbnail (default) - 150x150 | low_resolution - 306x306 | standard_resolution - 612x612
		template: '', // 画像URL:{{image}} リンク:{{link}} キャプションテキスト{{caption}} いいね数:{{likes}} コメント数:{{comments}}

		success: function(){
			//取得完了時のコールバック
		}
	});
feed.run();
</script>

取得したい箇所で以下の要素を記述し、templateオプションに任意の記述をすることで好きなようにスタイリングできます。

<div id="instafeed"></div>

Instafeed.jsを使用してスライド表示にしたりもできます。
instafeed10

いかがだったでしょうか?
APIが少し厳格化され、以前のように簡単にFeedを取得する事ができなくなりましたがライブラリを使うと意外と簡単にFeedを取得できます。
皆さんも是非試してみてください。

今回参考にさせていただいたサイト

Category | Blog
Tag |
Author | Mineo Okuda / 65,285views

Company information

〒650-0024
神戸市中央区海岸通5 商船三井ビルディング4F

Contact us

WEBに関するお問い合わせは
078-977-8760 (10:00 - 18:00)