株式会社LIG (リグ) - 台東区上野にあるWeb制作会社

落下してもスマホの画面を割らない方法 地面にシェービングクリームを満遍なく塗っておく

  2. LIGブログ
  3. Web制作
  4. Instagram APIを取得してWe...
Web制作

Instagram APIを取得してWebサイトと連携し、投稿写真を自動に掲載する方法

Instagram APIを取得してWebサイトと連携し、投稿写真を自動に掲載する方法

おはうぃーす！　しょごです。

先日ノートPCを購入しました、これでスタジオでドラム録音とか動画作成とか気兼ねなくできます。
久しぶりに演奏動画でもアップしよう、、ゲーム実況もいいな。。。ふふふ。。

さて、今回はInstagramAPIを使ってWebサイトと連携したときの話です。

Instagramとは

iPhoneやAndroid端末で写真を撮影し、共有するスマートフォンアプリのことです。Webからも閲覧でき、固有アカウントを設けて投稿管理ができる写真特化型のSNSです（もちろん無料）。
Twitterのようにフォローした人の写真がタイムラインに流れてきて、アップロードした写真には「いいね！」やコメントを付けることができます。アプリ内のカメラで撮影した写真や、カメラロールの写真を選択して手軽にアップロードができます。

プライベートモードで非公開設定も可能。Twitterとの最も大きな違いは、文字ではなく写真がメインである点です。

実は弊社のメンバーページ一覧のヘッダーも、Instagramで写真をとったものを共有しているんです。
各メンバーでも個別に紐付け設定を行ってる場合はメンバーのアカウントの写真を取得しています。例えば、ウチもいれてます。

下準備

ということで、APIを使うには下準備が必要です。

1. Instagramアカウントを取得する

instgram

http://instagram.com/

とにもかくにも、まずはアカウントを取得しましょう。

2. Instagram Developerに登録する

develop登録に加えて、アプリ登録をします。TwitterやFacebookと同じですね。

Instagram Developer

http://instagram.com/developer/

以下の手順で登録を行います。

  1. ヘッダー右上にログインボタンがあるので、ログインする
  2. 「Register Your Application」をクリック
  3. 開発者プロフィール登録をする
    →どのような使用目的で使うのかなど簡単なプロフィールを登録する
  4. 「Register a New Client」ボタンをクリックする
  5. 下記必要情報を登録し、「register」をクリックする
  • Application Name：アプリケーションの名前（特にシステムに関与はされないので適当に）
  • Description：アプリケーションの概要（特にシステムに関与はされないので適当に）
  • Website：連携先のURL
  • OAuth redirect_url：認証後にリダイレクトする場合、遷移させるURL
  • Disable implicit OAuth：チェックするとクライアント側だけで認証ができなくなります
  • Enforce signed header：チェックするとAPIリクエストに独自の証明書が必要になります
  • captcha：表示された文字を入力する

するとアプリ登録が完了になり、固有のCLLENT IDとCLLENT SECRETが発行されます。

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

APIを利用するにあたり、別にアクセストークンが必要になります。
下記URLに取得したCLLENT IDとRedirectURLを入力してブラウザでアクセスしてください。


https://instagram.com/oauth/authorize/?client_id=【CLIENT-ID】&redirect_uri=【REDIRECT-URL】&response_type=token

認証画面が出てきますが、「Authorize」をクリックします。
するとredirect_urlで設定したページが表示され、パラメータにアクセストークンが付与されているのでこれを保持する。

【REDIRECT-URI】#access_token=xxxxxxxxxxxxxxx.xxxxxxxxxxxxxxxxxxxx.xxxxxxxxxxxx

ユーザアカウントから固有ユーザIDを取得する

APIで特定ユーザの画像を取得するには、ユーザ固有のIDを確認する必要があります。
この固有のIDは、ユーザアカウントではありません。なので、APIを使いユーザアカウントからユーザ情報を取得し、そこに格納されている固有IDを取得する必要があるんです。

// ユーザネームから固有のuser_IDを取得する。
define("INSTAGRAM_ACCESS_TOKEN", "xxxxxxxxxxxxxxx.xxxxxxxxxxxxxxxxxxxx.xxxxxxxxxxxx");
// ユーザアカウント名
$user_account = 'user_acount_mei';

// ユーザアカウント名からユーザデータを取得する。
$user_api_url = 'https://api.instagram.com/v1/users/search?q=' . $user_account . '&access_token=' . INSTAGRAM_ACCESS_TOKEN;
$user_data = json_decode(@file_get_contents($user_api_url));

$user_data->data[0]->id; // ユーザ固有ID

成功するとjsonデータが帰ってきます。
そこにIDとして数字が帰ってきたのが、固有のユーザIDになります。これを使うことで、特定ユーザの情報を取得することができます。

ユーザ情報を取得する上での注意点

上記方法でユーザの詳細情報を取得するわけですが、API側の仕様で検索した際、似たようなユーザアカウントの情報も取得してきてしまいます。
例を挙げると、「twintail」というユーザアカウントで取得しようとすると1つではなく、複数取得されちゃいます。
実はlike検索だったんですねぇ。。。(ﾟДﾟ)

そのため、上記コードのまま使用すると一番頭に想定外のものが取得されてきたときに違うアカウントの画像がとれちゃう可能性があるので、ループさせて該当のアカウントを見つけた上で、そのIDを取得するようにしましょう。

// ユーザネームから固有のuser_IDを取得する。
define("INSTAGRAM_ACCESS_TOKEN", "xxxxxxxxxxxxxxx.xxxxxxxxxxxxxxxxxxxx.xxxxxxxxxxxx");
// ユーザアカウント名
$user_account = 'user_acount_mei';

// ユーザアカウント名からユーザデータを取得する。
$user_api_url = 'https://api.instagram.com/v1/users/search?q=' . $user_account . '&access_token=' . INSTAGRAM_ACCESS_TOKEN;
$user_data = json_decode(@file_get_contents($user_api_url));

// 取得したデータの中から正しいデータを選出
foreach ($user_data->data as $user_data) {
	if ($user_account == $user_data->username) {
		$user_id = $user_data->id;
	}
}

ユーザ固有IDを用いてユーザが登録した最新画像を取得する

試しに取得してきた固有ユーザIDを使って、そのユーザがアップしている最新画像を取得してみましょう。

// ユーザネームから固有のuser_IDを取得する。
define("INSTAGRAM_ACCESS_TOKEN", "xxxxxxxxxxxxxxx.xxxxxxxxxxxxxxxxxxxx.xxxxxxxxxxxx");
// ユーザアカウント名
$user_account = 'user_acount_mei';

// ユーザアカウント名からユーザデータを取得する。
$user_api_url = 'https://api.instagram.com/v1/users/search?q=' . $user_account . '&access_token=' . INSTAGRAM_ACCESS_TOKEN;
$user_data = json_decode(@file_get_contents($user_api_url));

// 取得したデータの中から正しいデータを選出
foreach ($user_data->data as $user_data) {
	if ($user_account == $user_data->username) {
		$user_id = $user_data->id;
	}
}

$photos = array();
// 特定ユーザの投稿データ最新5件を取得する
$photos_api_url = 'https://api.instagram.com/v1/users/'.$user_id.'/media/recent?access_token=' . INSTAGRAM_ACCESS_TOKEN . "&count=5";
$photos_data = json_decode(@file_get_contents($photos_api_url));

foreach ($photos_data->data as $photo) {
	echo '<img src="' . $photo->images->standard_resolution->url . '" alt="">';
}

なお、images以下には画像サイズが3種類用意してあるので用途に応じて大きさを使い分けてください。
また、このAPIで取得したデータには画像に対してlikeしてくれた人のデータも保持されてたので、使いようによっては、もっとあれこれできるかもしれません。

さいごに

いかがでしたでしょうか。
これを導入するとInstagramでパシャパシャしたものが自動的にWebサイトに表示されるようになります。

ウチは連携させてしまったから下手なものがアップできねぇじゃねぇかっていうのと、そもそも写真を撮るとき毎度デフォルトのカメラアプリ使ってるので、Instagramが更新されないんですけどね。

それではまた。

 

【インスタユーザなら知っておくべき！】

※ Vine、Instagramビデオを使ったプロモーションまとめ

※ Instagramをもっと楽しく！可愛いグッズ作成サービスまとめ

※ 【スマホアプリ】Vineやinstagramを使って動画作品は簡単に作れる!

※ 今すぐ取り入れたい！Instagram 動画を上手に使ってアピールする米企業30選

※ “アレ”を撮るならこのフィルター！Instagramのフィルター効果まとめ