東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

Instafeed.jsの使い方

①instafeed.jsをダウンロード。そしてクライアント用のアカウントを作成する。(自分のアカウントではあんまり作らないほうが良い)


②JSをユーザーアカウントから画像を取得出来るように書き換える

プラグインページに記載されている内容を下記に変更してheadタグ内に記述。
もちろん下記より上にはinstafeed.jsを呼び出すコードを記述。


$(document).ready(function() {
    var userFeed = new Instafeed({
        get: 'user', //ユーザーから取得
        userId: 'YOUR_USER_ID', //ユーザーID(数字のみのもの)
        sortBy:'random', //並び順をランダムに
        links: true , //画像リンク取得
        limit: 5, //取得する画像数を設定
        resolution: 'low_resolution', //画像サイズを設定
        template: '<li><a href="{{link}}"><img src="{{image}}" target="_blank"></a><span>{{caption}}</span><span>like:{{likes}},comments:{{comments}}</span></li>',
        accessToken: 'YOUR_ACCESS_TOKEN' //アクセストークン
    });
    userFeed.run();
});

Instagramの数字のみのuserIdを取得する

下記サイトで調べることができる

http://www.otzberg.net/iguserid/
サイトに表示させたいアカウントの一覧ページで右クリックし、「リンクのアドレスのコピー」。そんでそのURLを上記サイトに入力。これでOK



Instagram Access Tokenを取得する

まずは下記へアクセス。そんで青いボタンの「Register Your Application」をクリックし、「register a new client」という緑のボタンをおしたあと必要項目をいれてく。
https://www.instagram.com/developer/

Application Name:サイト名
Description::サイトの説明
Company Name:会社名
Website URL:サイトのURL
Valid redirect URIs:リダイレクトのURL。ここは「Website URL」でOK。
Privacy Policy URL:任意
Contact email:メールアドレス

これらを入力後、securityタブをクリックし「Disable implicit OAuth:」のチェックを外す。

CLIENT IDはすべて入力後画面に表示される。また、redirect uriは「Valid redirect URIs」で入力したURLのこと。


アクセストークンは取得したclient idとredirect uri を下記のURLに挿入してアクセス。

https://api.instagram.com/oauth/authorize/?client_id={CLIENT_ID}&redirect_uri={REDIRECT_URI}&response_type=token&scope=public_content


クライアントIDは


もし、ここで
{“code”: 403, “error_type”: “OAuthForbiddenException”, “error_message”: “Implicit authentication is disabled”}
みたいなエラーが出たら、Disable implicit OAuthのチェックを外して再度アクセス。

アクセスが成功すると認証画面がでるので、「Authorize」をクリック。


↓ここからでもアクセストークンはゲットできる・・・?
http://instagram.pixelunion.net/




⑤html 記述

<ul id="instafeed"></ul>


【参考URL】
http://style-type.net/2015/11/instagramweb.html

http://teamnaporitan.com/get-instagram-access-token/

http://www.harimanics.co.jp/blog/detail/?id=BG0057

http://www.dataplan.jp/blog/instagram/3243

https://www.marineroad.com/staff-blog/12682.html