Instagramをサイトに埋め込む方法

Instagram APIを使ってタイムラインを埋め込む方法を紹介します。

Instagram APIをフルに使うにはInstagramの承認が必要です。
SandBoxモードであればアプリケーション登録をすれば未承認でも使用できます。
無申請(SandBoxモード)で出来る実用的な範囲は、
『アプリではそれぞれのユーザーから最新20個のデータのみ取得可能』
(1時間に500PV以内のサイトなら)
こんな感じです。


コーポレートサイトや個人のサイトであれば大丈夫だと思います。

埋め込み方法

1.アカウント登録

Instagramのユーザーアカウントが必要です。事前に登録を済ませましょう。

2.アプリケーション登録

developeページからアプリケーション登録を行います。
https://www.instagram.com/developer/

「ログイン」できているか確認してください。してない場合は、右上の「ログイン」よりログインします。

「Register Your Application」をクリック。

 

自分のWEBサイト、電話番号を入力して

What do you want to build with the API? には理由を・・・。
「Display my WEB site」にしました。

I accept the API Terms of Use and Brand Guidelines にチェック

「Sign up」をクリック。

 

次に下記の緑色の部分、「Register a New Client」をクリック。

「Security」タブで「Disable implicit OAuth」のチェックを外します。

Details」タブで各項目を入力します。

入力内容は上から下記の通りです。

  • アプリケーション名
  • アプリケーション説明
  • 会社名(未入力可)
  • WEBサイトのURL
  • 認証時のリダイレクトURL(Website URLと同じでOK)
  • 個人情報保護方針のURL(未入力可)
  • 連絡先のメールアドレス(未入力可)

 

 

登録完了すると下記のようになります。

 

[CLIENT ID]を”0123456789″、[Valid redirect URIs]を”https://auhito01.com/”とした場合のURL例は下記の通りです。(実際には動作しないURLですのでご了承下さい)

 

アクセストークンを取得

https://api.instagram.com/oauth/authorize/?client_id=0123456789&redirect_uri=https://auhito01.com/&response_type=token

 

このような画面になります。これの緑色の部分「Authorize」をクリックします。

#access_token=○○○○○○○○○○○○○○○○○○

これがアクセストークンの値です。

PHPでデータ取得

<?php //POSTリクエストの場合のみ受付 if($_SERVER[‘REQUEST_METHOD’] == ‘POST’){ //アクセストークン $access_token = “アクセストークンの値”; //JSONデータを取得して出力 echo @file_get_contents(“https://api.instagram.com/v1/users/self/media/recent/?access_token={$access_token}”); exit; } ?>

無事に成功するとjson形式でデータが取得できたことが確認できます。
あとはこのデータをJavaScript、PHPなどで処理すればOKです。

Follow me!

The following two tabs change content below.
今川和子(WEB制作、DTPなど) のプロフィール写真
WEB制作やチラシ、パンフレットのDTP関係のお仕事をしています。 20代は印刷会社でお花の資材を扱う会社に勤め、そこでDTPと言うものを知る。その後結婚を機に、在宅でお仕事ができるようにWEB制作を勉強しはじめる。 長女が生まれたときはWEB制作のお仕事で会社勤めをし、その後長男が病気がちだったため自宅でお仕事をする決心をする。それから10年ひたすら自営業で現在に至る。