miso_soup3 Blog

主に ASP.NET 関連について書いています。

tips サイドバーに tumblr を表示

このはてなブログのサイドバーに tumblr を表示してみました。

http://miso-soup3.tumblr.com/

コード

参考サイト:
簡単!RSS(XML)を取得&表示させる方法 – jQuery + Google Feed APIを使用してFeedを表示させる方法 | Stronghold
Google Feed API Developer's Guide  |  Google Feed API  |  Google Developers

コードは、はてなの設定>詳細設定から head 内に以下のコードを。

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    var todayDate = new Date().getDate();
    google.load("feeds", "1");
    function initialize() {
        var feedurl = "http://miso-soup3.tumblr.com/rss/?t=" + todayDate;
	    var feed = new google.feeds.Feed(feedurl);
	    feed.setNumEntries(15);
	    feed.load(function (result){
		    if (!result.error){
			    for (var i = 0; i < result.feed.entries.length; i++) {
				    var entry = result.feed.entries[i];
				    var conte = '<li>' + entry.content + '</li>';

				    var categories = entry.categories;
				    var category = '';
				    if (categories.length != 0) {
				        category = categories[0];
				    }

				    if (category.toLowerCase() == "note") {
				        continue;
				    }

				    var Dates = new Date(entry.publishedDate);
				    var Dday = Dates.getDate();
				    var Dmonth = Dates.getMonth() + 1;
				    var Dyear = Dates.getFullYear();
				    var Ddates = '<li class="tdate">' + Dyear + '-' + Dmonth + '-' + Dday + '</li>';

				    $('#tumblr-feed').append('<li class="post"><ul>' + Ddates + conte + '</ul></li>');
			    }
		    }
	    });
    }
    google.setOnLoadCallback(initialize);
</script>

ノートのようなものは長文になるので表示したくなく、category の値を見て除外。

次に、はてなのデザイン設定から、HTML を挿入するサイドバーを作成し、以下の要素を貼り付け。

<ul id="tumblr-feed"></ul>