tips サイドバーに tumblr を表示
このはてなブログのサイドバーに tumblr を表示してみました。
コード
参考サイト:
簡単!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>