SOLG System Blog

InstagramのAPIから画像データをすべて取得する方法を紹介します。
ここで言う「画像データ」には以下の情報が含まれています。

・画像(写真)
・タグ
・コメント内容
・コメント回数
・投稿時間
・テキスト(投稿者が入力した内容)
・ユーザー名
・プロフィール写真
・画像エフェクト名(Normal、Valenciaなど)
・いいね回数

これ以外にも、ロケーション(緯度経度)の情報や画像サイズなどの
情報も取得することができます。これらの画像データから必要なものを
選び、WebサイトやWebサービスに表示することができるようになります。

それでは、その手順を簡単に追っていきましょう。

①Instagramアプリケーション開発者登録をする

Instagramのアプリケーション利用登録ページ(http://instagram.com/developer/)にアクセスし、
クライアントIDなどの情報を取得します。上図の赤枠をクリックすると、登録をすすめることが
できます。

この開発者登録については、「Instagram API 登録」などで検索すれば、ネット上に
情報が落ちていますので、迷いなく進めることができると思います。



上図のようにクライアント情報が取得できたら次のステップです。
スクリーンショットを撮ったりするなど、クライアント情報は必ず
メモをしておきましょう。

②ユーザーIDとアクセストークンを取得する

このステップでは、取得および登録したクライアント情報をもとに
ユーザーIDとアクセストークンを取得します。

https://instagram.com/oauth/authorize/?client_id=※ここにクライアントID※&redirect_uri=※ここにリダイレクトURI※&response_type=token

先ほど取得したクライアントIDと登録したリダイレクトURIを上記URLの適切な箇所に記述します。
例えば、クライアントIDが「7777777aaaaaaa」で、リダイレクトURIが「http://insta-api.jp」の
場合は以下のようになります。

https://instagram.com/oauth/authorize/?client_id=7777777aaaaaaa&redirect_uri=http://insta-api.jp&response_type=token

これをブラウザのアドレスバーに入力して、実行する(「Enter」を押す)と
「http://※リダイレクトURI※/#access_token=********************」という
表記がアドレスバーに表示されます。

例えば、リダイレクトURIが上記の「http://insta-api.jp」でアクセストークンが
「7777777777bbbbbbbbbb」の場合は以下のようになります。

http://http://insta-api.jp/#access_token=7777777777bbbbbbbbbb

上述のaccess_token=以降の「********************」も必ずメモをするなどして
控えておいてください。

これまでの手順で取得した情報で、InstagramのAPIを利用することが
可能となりました。

③Instagram APIのJQueryプラグインについて

Instagram APIを利用できる準備が整いましたので、さっそくWebサイトなどに
表示できるようにしていきましょう。

ここでは、Instagramの画像を表示できるJQueryのプラグインを2つ紹介します。

instafeed.js(http://instafeedjs.com/)

jquery-instagram(http://potomak.github.io/jquery-instagram/)

上記2つのJQueryプラグインの使用方法についても、ネット上に情報が
落ちていますので、検索してみてください。

ただし、この2つのJQueryプラグインで注意すべきことがあり、
以下に比較表を記します。

	コメント情報の表示	ユーザーの特定
instafeed.js	○	×
jquery-instagram	×	○

instafeed.jsはコメント情報(コメントの内容、コメントの回数など)を
データとして取得し、表示することが可能ですが、ユーザーの特定が
できません。

そのため、自分の投稿した画像だけを表示したいすることができません。
表示される画像はハッシュタグの内容や緯度経度(投稿場所)などから
指定して、画像上を取得し、表示することになります。例えば、
「#富士山」となっている画像をすべて表示させるということです。

一方のjquery-instagramでは、ユーザーの特定が可能です。そのため、
自分だけの投稿を表示させることができます。

ただし、instafeed.jsで表示できていたコメント情報を表示する
ことができません。

このどちらかで事が足りる、またはその他のプラグインを探して間に
合わせるならよいのですが、表示させたい情報を取得し、反映させる
方法を次に紹介します。

④画像データを取得し、Webサイトに表示させる

それでは、画像データを取得し、Webサイトに表示してみます。
今回は自分が投稿した画像データを取得し、画像、投稿日、LIKE数、
コメント数を表示します。

まずは以下の「********************」の箇所に②で取得したアクセストークンを
記述してください。

https://api.instagram.com/v1/users/self/media/recent?access_token=********************

アドレスバーに上記のURLを入力し、実行(Enterを押下)してください。
そうすると、以下のような文字だらけの画面になるかと思います。



これが自分の投稿した画像データがすべて入ったjsonになります。
取得したjsonの文字列をデコード(PHPの変数に変換)します。
以下がそのスクリプトです。


$data = "https://api.instagram.com/v1/users/self/media/recent?access_token=********************";
$json = file_get_contents($data);
if ($json == false) {
echo "false";
return;
}
$obj = json_decode($json,true);
※ 「********************」は取得したアクセストークンを記載

「print_r($obj['data']);」と上記のスクリプトに続いて実行すると、
以下のような画面が表示されます。



画面上で右クリックし、「ページのソースを表示」を選択すると、
以下のように階層となってわかりやすい表示を確認することができます。



その階層を追っていくと、自分が欲しい情報を見つけることができると
思います。今回は上述したように「画像」、「投稿日」、「LIKE数」、
「コメント数」がどこに記述してあるか確認し、Webサイト上に表示
させます。

先ほど記述した「print_r($obj['data']);」は削除し、以下のスクリプト
を記述します。

for( $number = 0 ; $number < count($obj['data']) && $number <= 20 ; $number++ ){

//画像取得
$img = $obj['data'][$number]['images']['standard_resolution']['url'];
//画像のリンク取得
$linked = $obj['data'][$number]['link'];
//作成日時取得
$timeStamp = $obj['data'][$number]['created_time'];
$createdTime = date("Y年m月d日", $timeStamp);
//likes数取得
$likes = $obj['data'][$number]['likes']['count'];
//comments数取得
$comments = $obj['data'][$number]['comments']['count'];


画像取得の記述では、以下のようになります。

$img = $obj['data'][$number]['images']['standard_resolution']['url'];

「$obj = json_decode($json,true);」のところで記述したように、
画像情報はすべて「$obj」の変数のなかにあります。

画像を取り出すには、変数$objの中のdataの中の$numberの中のimagesの中の…
と階層を辿っていくと「url」というところに画像が存在しています。

このように、欲しい情報に辿りつくまでの階層を上記のように記述していきます。
また、上記のスクリプトでは、最高で画像が20件表示されるように設定してあります。
それでは、確認してみましょう。



無事、「画像」、「投稿日」、「LIKE数」、「コメント数」が表示されました。
このように階層を追って、欲しい情報にリーチすることで、Instagramの楽しさ
に触れることができると思います。

⑤ちょっとしたWebサービスをつくってみる

Instagram APIの利用方法がわかりましたので、応用編として、
ハッシュタグに入力したキーワードで検索をし、画像を一覧表示してくれる
「Insta Hush Research」なるものを簡単につくってみました。

今回は自分が投稿した画像ではなく、タグで画像を一覧表示させるので、
上述の「"https://api.instagram.com/v1/users/self/media/recent?access_token=********************"; 」に
あたる部分を以下の記述に変更します。

$data = "https://api.instagram.com/v1/tags/$tag/media/recent?access_token=********************";
※ 「********************」には②で取得したアクセストークンを記述する

このように記述することで、ハッシュタグで指定したキーワードから画像を一覧を表示
することができます。

あとは、上述したようにjsonをデコードして欲しい情報を記述すれば
あっという間に完成です。



上図はハッシュタグに「cat」と入力して、一覧表示させたものです。

ビジネスに最も効果的なSNSはInstagram

アメリカ市場においてのお話ですが、データ分析会社である株式会社SumAllによると、
2013年ソーシャルメディアでビジネスに最も貢献したものはInstagramだそうです。

比較対象はInstagramをはじめ、facebook、Twitter、Google+のSNS代表格の4つです。
購読者の増加、ユーザーエンゲージメント、セールスなどでInstagramは最も高い
効果を発揮するという調査結果でした。

アメリカでの話ですが、コンテンツにはもちろん魅力があると感じられますので、
Webサイトなどにコンテンツマーケティングとして取り入れてみてはいかがでしょうか。