投稿日:2017/11/06
更新日:2017/11/16
取得方法
取得方法には【個別】と【最新の〇件】がある【個別】
任意の一投稿を埋め込む方法。ユーザーページから誰でも取得可能。
取得方法参考:
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 を利用している。