Instagramを埋め込む

 

取得方法

取得方法には【個別】と【最新の〇件】がある

【個別】

任意の一投稿を埋め込む方法。
ユーザーページから誰でも取得可能。

取得方法参考：

http://insta-antenna.com/method-picture-display
「2-1.Instagramの投稿を埋め込む」

備考：

簡単だが、一つの投稿を表示し続けるだけのものなので用途は狭い。
Instagramの性質上コンテンツがすぐ陳腐化する。

注意点：

iOSでの表示にバグあり。修正CSSがあるが対応が完璧ではない。

【最新の〇件】

Instagramアクセストークンが必要。
ユーザーIDはアクセストークンの接頭辞として勝手についてくる。
アクセストークン取得にはInstagramログインが必須なのでお客様（Instagramユーザー様）に取得いただいた方がいい。

取得方法参考：

https://liginc.co.jp/367167

備考：

任意の最新個数を表示可能。通常インスタ埋め込みと言ったらこれ

展開方法

api.instagram.comドメインからの取得になるので、ドメインの壁が立ちはだかる。

【PHP（サーバーサイドスクリプト）での取得】

以下だけでも問題ない

https://api.instagram.com/v1/users/self/media/recent/?access_token=【アクセストークン】

【Javascriptによる取得】

直接の取得はクロスドメイン制約に引っかかるのでできないが、Instagram APIはJsonpによる取得をサポートしているのでそれを利用する。
また、SSLアドレスをfile_get_contents出来ない環境の場合もこちらを利用する。

https://api.instagram.com/v1/users/self/media/recent/?access_token=【アクセストークン】&callback=【任意のコールバック関数名】

※ここではJsonpの説明は割愛する。 素のまま使ってもいいがしんどいので
Feed用ライブラリを使うのがいい。
Instafeed.jsがお勧め。

Instafeed.jsを使ってAPIを叩く

<script src="js/instafeed.min.js"></script>
<script>
  var userFeed = new Instafeed({
    get: 'user',
    userId: 0000000000, // ユーザーID
    accessToken: '0000000000.xxxxxxx.xxxxxxxxxxxxxxxxxxxxxxxxxxxxx', // アクセストークン
    limit: 20,
    sortBy: "random",
    template: '<li><a href="" target="_blank"><img src="" alt=""></a></li>', // なにか適当なHTML
    after: function() {
      // templateとして吐き出されたHTMLに対して行いたい処理を書く。
      // スクローラとか
    },
  });
  userFeed.run();
</script>

事例

http://www.chino-j.co.jp/
jQuery simplyScroll を利用している。