Tumblr APIを使ってみる

2016.04.23

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

アプリケーションの登録

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

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

try-the-tumblr-api01

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

try-the-tumblr-api02

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

try-the-tumblr-api03

　

投稿データの取得

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

1
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」部分は適宜変更して下さい。

1
2
3
4
5
6
7
8
<?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

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

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$(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件が上限のようなので注意が必要です。
投稿データ表示のデモページ

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

【参考サイト】

　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年3月
日 月 火 水 木 金 土
 1
2345678
9101112131415
16171819202122
23242526272829
3031