EC-CUBE + Instagram

Instagram APIでFeedを取得してサイトに表示させる方法

なんとなくやろうやろうと思いながら出来てなかったEC-CUBEにインスタグラムのサムネイル写真の埋め込み。

時間がなかったのでSnap Widgetを使って作ってましたが写真を押すと当たり前ですがSnap　Widgetに移動します。

やりたいのはこれじゃないんですよねー・・・

出来れば自分のインスタグラムに移動してほしい！！ということで

Instagramの準備・設定

Instagramのアカウントを作成

まずは肝心なInstagramのアカウントを作らなければいけませんねｗ

アプリをダウンロードしてアカウントを発行してください。

https://www.instagram.com/

Instagramのアプリケーションの登録

パソコンでInstagramにログインしたあと以下のURLにアクセスしてください。

https://www.instagram.com/developer/

画像で赤枠で囲っているRegister Your Applicationをクリックしてください。

開発者登録画面になりますので

サイト・電話番号・APIの使用用途の説明を入力します。

利用規約にチェックを入れ、『Sign up』をクリックします。

「Register a New Client」をクリック

必要情報を入力していきます。

入力できたら「Details」「Security」のタブのうち、「Security」を選択。

「Disable implicit OAuth:」のチェックを外して「Resister」をクリック。

問題なく登録できれば、『Successfully registered …』と表示されます。

クライアントIDとステータスが出力がされて登録は完了です。

アクセストークンの取得

Manage Clientsに表示されている「クライアント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のページが表示され、URLバーにアクセストークンが付与されるのでどこかに保存しておいてください。

http://[Valid redirect URIs]/#access_token=XXXXXXXX.XXXXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

アクセストークンはxxxxxxxxxの部分です。

ホームページへの埋め込み

htmlの設定

<div id="instafeed"></div>//Instagramを出力させる場所を＃idで指定。

cssの設定

#instafeed {
 width: 100vw;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
#instafeed .flexitem {
 width: 30vw;
 height: auto;
}

javascriptの設定

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();

CSSとjavascriptをそれぞれの場所にペーストしhtmlの部分を表示したい場所にペーストしてください。

javascriptのshortBy・limit(最大20件まで)・links・resolutionを変更していただければいろいろ対応できると思います。

あとはtemplateのところを表示したいように変更しCSSを追加すれば季節の花　花心のページのように出来ます！

ビジュアル

下記を表記することでtemplateで使えます。

これらを組み合わせてオリジナルのページに仕上げましょう♪