Bloggerで個別ページに最新記事の一覧を表示する方法

最新記事を表示するフィードガジェットではなく、個別ページにて表示させたいと思い、調べていたら

Blogger JSON Feed API

というページが見つかり参考にさせていただきました。

載っていたソースをそのままページに張り付けると、日時の部分が分かりずらかったので成形したものが下記になります。

コード

<script type="text/javascript">
   function mycallback(json) {
     for (var i = 0; i < json.feed.entry.length; i++) {
       for (var j = 0; j < json.feed.entry[i].link.length; j++) {
         if (json.feed.entry[i].link[j].rel == 'alternate') {
         var postUrl = json.feed.entry[i].link[j].href;
         break;
       }
     }
     var postTitle = json.feed.entry[i].title.$t;
     var postDate = json.feed.entry[i].published.$t;
     var postDate_y = postDate.substring(0,4);
     var postDate_m = postDate.substring(5,7);
     var postDate_d = postDate.substring(8,10);
     var postDate_ymd = postDate_y + "/" + postDate_m + "/" + postDate_d + " ";
     var item = '<a href=' + postUrl + '>' + postdate_ymd  + postTitle + '</a><br /><br />';
     document.write(item);
   }
 }
 </script>
 <script src="http://サブドメイン.blogspot.com/feeds/posts/summary?orderby=published&amp;max-results=（表示させたい件数）&amp;alt=json-in-script&amp;callback=mycallback"></script>

こちらを個別ページのHTMLソースの表示させたい部分に記載することで表示できます。

コードの説明

表示させたい件数を指定して、件数分ループさせて、件名、日付、URLを抽出し、日付を加工したうえで、htmlコードを書きだすという処理を行っております。


以上、参考にしていただけたら幸いです。

＜２０１７．３．３追記＞
国別リダイレクトによるドメイン変更に対して、URLをルート相対パスにしたものについては、こちらで説明しています。
＜２０１７．３．２９追記＞
デザインを変更し、文章を追加しました。

• 
• list ツイート