読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

Tumblr API で 投稿内容を取得する

DEMO



Tumblrの投稿内容をAPIで取得して表示するモックを作成しました。最新のものを1件表示し、クリックするとTumblrにジャンプします。
※ 最新の投稿のタイプがテキストのときのみ動作します。


JavaScript

$(function(){
    var domain = "surprisewindow.tumblr.com";

    // https://www.tumblr.com/oauth/apps にて登録
    var api_key = "FfE6jtsNbBS39vl6ObD418bzzSwodZv01PbqV5Veo9EUByDxtv";

    $.ajax({
        url: "http://api.tumblr.com/v2/blog/"+domain+"/posts?api_key="+api_key,
        dataType: "jsonp"
    }).done(function(evt) {
        var img = new Image();
        var ms = 200;
        
        try {
            $("#post").fadeIn(ms);
            $("#post-ttl").text(evt.response.posts[0].title);
            $("#post-body").html(evt.response.posts[0].body);
            $("#post-footer").text(evt.response.posts[0].date);
            $("#post-tags").text("Tagged: " + evt.response.posts[0].tags + ".");
            
            $("#post-link").attr({
                href: evt.response.posts[0].post_url,
                target: "_blank"
            });
        } catch(err) {
            console.log(err);
        }
    });
});

APIを叩くにはAPIキーが必要です。
https://www.tumblr.com/oauth/apps で用意できるので事前に準備しましょう。



【追記】

こちらほんのりパワーアップさせました。


Tumblr API で 投稿内容を取得する その2 - みかづきブログ その3