トップページ » Program Js・jQuery » たぶん一番簡単なInstagram投稿の取得方法

たぶん一番簡単なInstagram投稿の取得方法

2016/07/10

自分のInstagramの投稿を読み込む

読み込み方は色々あると思いますが、自分はJavascriptでHTMLと一緒に整形したいほうなので、phpでInstagramAPIを叩いて結果をAjaxで取得する形です。

手順1

アクセストークンの取得は検索でいっぱいでてくるのでここでは割愛します。
また、jQueryを読み込んでおいてください。

手順2

PHPファイル作成
3行目「00000000000000」に自身のアクセストークンを入れてください。

<?php
if( $_SERVER['REQUEST_METHOD']  ==  'POST' ){
    echo @file_get_contents("https://api.instagram.com/v1/users/self/media/recent/?access_token=00000000000000&count=20");
}
?>

手順3

表示したいページなどにJavascriptを記述。
Javascript
5行目のurlに上記phpのurlを入れてください。同じドメイン内でないとダメです。

<script>
$(function(){
	var results = "";
	$.ajax({
		url: 'http://~', //phpファイルのurl(同じドメイン内でないとダメです)
		type: 'POST', 
		dataType: 'json'
	}).done(function(data){
		$.each(data.data,function(index,item){
			var imgurl = item.images.low_resolution.url; //320pxの画像を読み込む
			var link = item.link; //リンクを取得
			results += "<a href='" + link + "'><img src='" + imgurl + "'></a>";
			$("#instagram").html(results);
		});
	});
});
</script>

手順4

同じく表示したいページなどにHTMLを記述。
HTML

<div id="instagram"></div>

サンプル

素のままの表示ですが私のインスタフィードです。
お気に召したらぜひフォローを!

insta

上記Javascriptの12行目あたりにcssのクラス等入れれば表示のアレンジがかけられると思います。

アレンジ方法

一つの投稿から取れるjsonデータは下記のような感じです。
capture-big

これを見ながらJavascriptの10、11行目あたりのように「item.」以降にjson上の名前を入れれば色々取得できると思います。

<script>
$(function(){
	var results = "";
	$.ajax({
		url: 'http://~', //phpファイルのurl(同じドメイン内でないとダメです)
		type: 'POST', 
		dataType: 'json'
	}).done(function(data){
		$.each(data.data,function(index,item){
			var imgurl = item.images.low_resolution.url; //320pxの画像を読み込む
			var link = item.link; //リンクを取得
			results += "<a href='" + link + "'><img src='" + imgurl + "'></a>";
			$("#instagram").html(results);
		});
	});
});
</script>

例)
・150px x 150pxの画像を読み込む。
10行目

var imgurl = item.images.thumbnail.url; 

・投稿した文章を表示。
11行目あたりに追加、12行目を変更

var text = item.caption.text;
results += "<a href='" + link + "'><img src='" + imgurl + "'></a><p>" + text + "</p>";

メモ、補足

2015年の年末にInstagram APIの改定が発表され気軽に使えるのは自分の投稿のデータのみになってしまいました。

capture

一番需要がありそうなハッシュタグの一覧も認証を受けないと取得できないみたいです。