インスタグラムを自社サイトと連携してみよう。
「インスタグラムを自社サイトと連動して表示できるようにしたい！」
よく言われるんですが、毎回忘れて調べ直していたので、忘備録として残しておきます。
但し、ここで伝える方法は『SandBox』と呼ばれる機能に制限のかかった限定的な方法なので、「特定の＃(ハッシュ)タグを取得して動的に動かしたい〜！」みたいなことはできないので悪しからず。
アカウント作成
まずはアカウントを作らないことには話は始まりません。アプリをダウンロードして、新しくアカウントを発行しましょう。
アプリケーション登録
パソコンでInstagramにログインした状態で、以下のURLへアクセス。
https://www.instagram.com/developer/
「Register Your Application」をクリックして
開発者情報を記入します。
- ウェブサイト : 任意のURL（開発者でも埋め込み先でも大丈夫）
- Phone Number : 任意の電話番号（個人・法人どちらでも大丈夫）
- What do you want to build with the API? : APIをどのように利用するのかを記載すれば大丈夫
上記を埋めたら、「Sign up」で登録完了！
「Register a New Client」をクリック
画面が遷移して「Details」「Security」のタブのうち、「Security」を選択。
「Disable implicit OAuth:」のチェックを外して、「Details」をクリック
必要情報を入力していきます。
- Application Name : アプリケーション名を任意で
- Description : アプリケーション説明を任意で
- Company Name : 会社名(空欄でも大丈夫)
- Website URL : Instagramを連携するWebサイトのURL
- Valid redirect URIs : 認証リダイレクトURL(Website URLと同じ)
- Privacy Policy URL : 個人情報保護方針ページのURL(用意していない場合は空欄でも大丈夫)
- Contact email : 連絡先メールアドレス
上記を終えたら、「Resister」をクリック。
クライアントIDとステータスが出力がされて登録は完了です。
アクセストークンを取得しよう。
先ほどの「クライアントID」と「Valid redirect URIs（認証リダイレクトURL）」を使ってアクセストークンを取得します。
以下のコードをURLバーに入力して、アクセス！
https://instagram.com/oauth/authorize/?client_id=「取得したCLIENT ID」&redirect_uri=「設定したValid redirect URIs」&response_type=token
すると、上記のような画面に遷移するので、「Authorize」をクリック。
URLバーにアクセストークンが付与されるので、こいつをメモっておきましょう。
アクセストークンの最初のブロックがuser IDになるのでこれも忘れずに覚えておきましょう。
http://[Valid redirect URIs]/#access_token=XXXXXXXX.XXXXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
ちなみに、アクセストークンを以下のようにURLバーに打ち込めば、登録したアカウントのJSONデータも取得できます。
https://api.instagram.com/v1/users/self/media/recent?access_token=XXXXXXXX.XXXXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
ホームページへの埋め込み
最終工程です。先ほどまでで得られた情報を使って、ホームページと連動させてみましょう。
ここでは簡易のためにインラインで記述することを前提として記載をしていきます。
<div id="instafeed" class="brand"></div>//Instagramを出力させる場所を＃idで指定。
#instafeed {
width: 100vw;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#instafeed .flexitem {
width: 30vw;
height: auto;
}
var feed = new Instafeed({
get: 'user',//ユーザの情報を取得
userId: XXXXXXXX,//ユーザIDを入れる
accessToken: 'XXXXXXXX.XXXXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',//アクセストークンを入れる
sortBy: 'most-recent',//並び順
limit: 9,//表示数
links: true,//リンク有無
resolution: 'low_resolution',//画像サイズ
template: '<div class="flexItem"><a href="{{link}}" target="_blank"><img src="{{image}}" /></a></div>'//書き出しテンプレート
});
feed.run();
大筋のこの流れでいけます。最後JS部分をいじれば、取得順序・数・テキストなどを引き出せる他、templateをいじって書き出されるマークアップを変更すれば、基本的な要件には応えられるかと思います。
但し、冒頭でもお伝えした通り、今回の実装方法は「SandBox」での実装方法です。機能制限があるとお伝えしましたが、以下のような制限がかかっているのでこれを超える場合は、正式にアプリケーション登録をする必要があります。
- 読み込めるデータは最新20件
「Instagramと連動したサービスを作りたい」「社内のアカウントが複数あるので、投稿順に複数アカウントを取得してコメント数の多い順に並べたい」などでなければ十二分に耐えられると思うので、これから組み込もうと考えている人は参考にしてみてはいかがでしょう？
