instaglamの投稿画像をWebページへ掲載するには

インスタへ投稿した写真をホームページにも掲載する

instaglamを使って写真を投稿している方も多いのではないでしょうか。
オシャレに見える写真から集客アップ！インスタ映えする風景・背景・お料理からのお客さんの見込みが増えたりしますよね。
アカウントを使って、更新を開始！！せっかくだから自社のページにも掲載してアピールしたい！！なんて方はいませんか？
その投稿した写真をホームページにも掲載する事もできるんです。

投稿をページに反映させるにはJavaScriptを使います。
必要なファイルはこちら（https://github.com/potomak/jquery-instagram）からダウンロードしてご利用ください。

そしてhead要素内に

を書き込みます。
「.instagram」で指定した要素内に投稿写真が掲載されます。
このclass名は任意の名称へ変更できるので、ページ構造に合わせて変更しても大丈夫です。

さて、これだけでは投稿は反映されません。
userId（クライアントID）・accessToken（アクセストークン）・clientId（クライアントID）をそれぞれ取得する必要があります。
それぞれの情報を取得するには、instaglamへ開発者登録します。

登録はこちら（https://www.instagram.com/developer/）からおこないます。
投稿を反映させたいinstagramのユーザーでログインしてください。

・・・英語のページが出ても閉じてはいけません・・・
画像を交えながら説明していきます。

まずはcliantIDを取得します。
さらにRedirect URIも必要になるので、設定します。

cliantIdを使ってaccessToken（アクセストークン）を取得する

このアクセストークンが重要です。また取得が少し厄介で、よくつまづきます・・・
取得にはブラウザのアドレスバーに
「https://api.instagram.com/oauth/authorize/?client_id=■&redirect_uri=●&response_type=token」を入力します。
■にはcliantId（クライアントID）
●にはRedirect URIを入力します。

するとRedirect URIで設定したWebページが表示されると思います。
そのアドレスバーに注目してください。ソレがアクセストークンです。
もし転送されない場合は、ブラウザを変えて試してみてください。

アクセストークンは「#access_token=」の後ろの英数字です。忘れずに保存しておきましょう。

最後にuserId（ユーザーID）ですが、これはアクセストークンの前10桁の数字になります。

以上で必要な情報が全て取得できました！
最初に書いたJavaScriptにそれぞれの値を入力しましょう！！

最後に開発者画面にてチェックを外した「Disable implicit OAuth」を思い出してください。
チェックが外れたままではセキュリティ面で問題が残るので、チェックを付けて更新することを忘れずに作業してください。

アクセストークンの取得がつまづきポイント

このアクセストークンの取得でよくつまづきます。
理由はよくわかりませんが、うまくリダイレクトしてもらえず、エラーが帰ってくるんです。
そんな時はブラウザを変えてURLを入力してみてください。

まとめ

・「instagram.js」を使って、Webサイトにinstagramの投稿写真を反映させることができる
・設置にはJavaScritpの他に3つの情報が必要
・それぞれの情報の取得にはinstagramの開発者として登録が必須
・開発者として登録するユーザーは設置したいinstagramのユーザーでログインして利用する