Tumblr APIを使ってみる

Tumblr APIを使って投稿データを取得してみます。

アプリケーションの登録

アカウントを持っていない場合はアカウントを取得しておきます。

ログイン後、アプリケーションの管理画面からアプリケーションの登録を行います。
「アプリを登録する」をクリック。

登録画面が表示されるので、必要な項目を入力します。
入力が完了したら「登録」をクリック。

アプリケーションの登録が完了しました。
「OAuth Consumer Key」の部分にAPIキーが表示されているのでコピーしておきます。

投稿データの取得

今回は投稿データをPHPで取得して、その値をJavaScriptで表示してみます。
投稿データを取得する場合、以下のようなURLで取得できます。

http://api.tumblr.com/v2/blog/BLOG_DOMAIN/posts?api_key=API_KEY

「BLOG_DOMAIN」に取得するtumblrのドメイン、「API_KEY」に先ほど取得したAPIキーを入れます。

まずはPHPで取得する部分をやってみます。

PHP

「API_KEY」と「BLOG_DOMAIN」部分は適宜変更して下さい。

<?php
$apikey = 'API_KEY';
$domain = 'BLOG_DOMAIN';

$url = 'http://api.tumblr.com/v2/blog/' . $domain . '/posts?api_key=' . $apikey;

$data = file_get_contents($url);
echo $data;

json形式で投稿データが取得できました。
投稿データ取得のデモページ

次にこのjsonデータをJavaScriptで取得して表示してみます。

HTML

<div id="sample"></div>

JavaScript

$(function() {
	$.ajax({
		url: 'get.php',
		dataType: 'json',
		success: function(data) {
			var postData = data['response']['posts'];
			var insert = '<ul>';
			for (var i = 0; i < postData.length; i++) {
				insert += '<li>';

					// 画像
					insert += '<img src="' + postData[i]['photos'][0]['alt_sizes'][1]['url'] + '" />';

					// 日付
					var d = new Date(postData[i]['timestamp'] * 1000);
					var year  = d.getFullYear();
					var month = d.getMonth() + 1;
					var day  = d.getDate();
					insert += '<div>' + year + '/' + month + '/' + day + '</div>';

					// summary
					insert += '<div>' + postData[i]['summary'] + '</div>';

					// リンク
					insert += '<a href="' + postData[i]['post_url'] + '" target="_blank">この記事へ</a> | ';
					insert += '<a href="' + postData[i]['link_url'] + '" target="_blank">このサイトへ</a>';

				insert += '</li>';
			};
			insert += '</ul>';
			$('#sample').append(insert);
		}
	});
});

取得できる投稿データは20件が上限のようなので注意が必要です。
投稿データ表示のデモページ

今回やった投稿データの取得以外にも、ユーザーデータの取得やブログ投稿などもできるようなので、詳しくは公式のドキュメントをご確認ください。
　

【参考サイト】

• API | Tumblr