よく、ブログのフッターやサイドバーに
Flickrに投稿した写真が表示されていた
りしますが、これをTumblrでやりたい、
っていう場合の方法。jQueryとTumblrの
APIで表示します。Tumblrユーザーさんの
方が自分の周りで最近目立つ気がするの
で書いてみます。

FlickrよりTumblrに投稿した写真をブログに載せたい、みたいな方向け。テキストや動画の投稿は省いて、画像だけ取り出してリンクも付けます。

ゴール

ブログに、とか書きましたけど、最大50個表示出来るので50個表示しました。数は指定できます。

APIはv1とv2があって、新しい方のv2を使わないとアレなんですが、APIキーの取得が面倒だったのでv1を使用しています。なのであんま参考にならんかもですね。

参考にさせて頂いたのは以下のAPI和訳ページです。

チラシの裏 — Tumblr APIの使い方を勝手に和訳したもの
Tumblr API v2リファレンス和訳

コード

//JSONデータの取得と表示件数の指定
    $.getJSON("http://foo.tumblr.com/api/read/json?num=50&callback=?", function(data) {
        $.each(data.posts, function(i, posts) {
            //写真のサイズ、URL、抜き出すアイテムのタイプの指定
            var photo = this['photo-url-75'];
            var url = this['url'];
            if (this['type'] === "photo") {
                //画像をul内にリストとして実装
                $('ul').append('<li><a href="' + url + '" target="_blank"><img src="' + photo + '" \/><\/a<\/li>');
            } else {
                return;
            }
        });
    });

JSONデータは

http://あなたのTumblrのURL/api/read/json?num=表示件数&callback=?

という感じで取得します。num=50が最大です。（v2は異なります）

写真のサイズは

• [“photo-url-1280”]
• [“photo-url-500”]
• [“photo-url-400”]
• [“photo-url-250”]
• [“photo-url-100”]
• [“photo-url-75”]

上記の6種類揃っています。さっきのデモのように羅列しても良いし、やや大きめなサイズでスライド化してもいいかも。

[‘url’]は自分のTumblrのページ単体のURLの指定ですが、viaとなっているURLを指定するなら[‘photo-link-url’]とすればOKです。

$('ul').append('<li><a href="' + url + '" target="_blank"><img src="' + photo + '" \/><\/a><\/li>');

最後にul要素の中にli要素とURL、画像などを含めれば完成です。

マークアップはulを用意するだけ。

<ul></ul>​

手軽ですねー。Flickrもいいですけどこんな感じで他サービスも選択できた方がいいですね。特にTumblrは日本でも企業が公式として利用し始めてますのでいろいろ覚えておくといいかもしれません。