［Blogger］ コメント一覧（100件）のページを作る

Blogger の記事に投稿してもらったコメントの一覧ページを作ります。

１．ガジェットではなく本文中に表示されるようにする。
　　※５件表示のガジェットの作り方はこちらを参照。
２．件数は１００件。
３．コメントされた記事のタイトルも欲しいけどその方法は分からないのでパス。

私が作ったのはこんなページです。
【まるとんのブログ - 過去のコメント一覧】

中央にコメントが並んで表示されています。

フィード URL の確認

---

コメント用のフィード URL を確認します。

Blogger のコメントフィード URL はブログの URL に指定の文字列を付けて取得できます。
http://maruton-memorandum.blogspot.com/feeds/comments/default

このままだと取得される件数は25件となっています。100件取得するにはこの様にします。
http://maruton-memorandum.blogspot.com/feeds/comments/default?max-results=100

これで最近の100件分のコメントフィード URL が分かりました。

フィード URL をブラウザで表示してもコードが含まれた文字列が表示されるだけです。


Google Feed API を使ってフィードの文字列を編集

---

Google Feed API を使ってこのコードが含まれた文字列を整形することができます。HTML 中に JavaScript を書く必要があります。

ネットで探して見つかったサンプルです。

HTML コードサンプル

<script src="http://www.google.com/jsapi/" type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds","1");
google.setOnLoadCallback(function(){
 getFeed();
}); //google.setOnLoadCallback
function getFeed(){
   var feed = new google.feeds.Feed("http://googlejapan.blogspot.com/atom.xml");
   feed.setNumEntries(5);
   feed.load(callback);
 }
  function callback(result){
   if (result.error){
     alert(reault.error.message);
   }
   var res = "";
   var len = result.feed.entries.length;
   for (var i = 0;i < len;i++){
     var entry = result.feed.entries[i];
     var title = entry.title;
     var date = entry.publishedDate;
     var content = entry.contentSnippet;
     res += "<p><b>" + title + "</b></p>";
     res += "<div>" + date + "</div>";
     res += content + "<hr />";
   }
   var panel = document.getElementById("feed");
   panel.innerHTML = res;
 }
</script>
<div id="feed"></div>

これを HTML で本文に貼り付けたところ、Google Japan Blog のニュースを５件表示することができました。

HTMLで本文に貼り付け

Google Japan Blog のニュースを表示

この JavaScript を編集して直します。

１．URL を先ほどのコメント用のフィード URL に書き換えます。
　　【変更前】
　　var feed = new google.feeds.Feed("http://googlejapan.blogspot.com/atom.xml");

　　【変更後】
　　var feed = new google.feeds.Feed("http://marumarutonton.blogspot.jp/feeds/comments/full?max-results=100");

２．表示件数を 100 に書き換えます。
　　【変更前】
　　feed.setNumEntries(5);

　　【変更後】
　　feed.setNumEntries(100);

３．ここではコメントの記入者が表示されていないですが、コメントを書いた人を表示されるようにします。
　　【追加】
     var author = entry.author;
　　※場所は title と date の所。これは変数定義ですが、実際に書くのは「４」でやってます。

４．各コメントの表示されるレイアウトを変えます。
　　私は本文の 「content」 は無くして、日付のフォーマットを変えました。
　　【変更前】
     var date = entry.publishedDate;
     res += "<p><b>" + title + "</b></p>";
     res += "<div>" + date + "</div>";
     res += content + "<hr />";

　　【変更後】
　　var publisheddate = entry.publishedDate;
　　var date = new Date (publisheddate);
　　var year = date.getFullYear();
　　var month = date.getMonth() + 1;
　　var day = date.getDate();
　　var hour = date.getHours();
　　var min = ('0' + date.getMinutes() ).slice( -2 );
　　var datestring = year + "/" + month + "/" + day + " " + hour + ":" + min;
　　var content = entry.contentSnippet;
　　res += "<p><a href=\"" + link + "\"><b>" + title + "</b> (" + author + ") </a> - " + datestring +"</p><hr />";
　　※日付の整形でてこずりました。

一番最後の行にある「<div id="feed"></div>」が実際に HTML を書いている所なので、その一行上の</script>との間に文章を入れることもできます。

HTML コードサンプル

<script src="http://www.google.com/jsapi/" type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds","1");
google.setOnLoadCallback(function(){
 getFeed();
}); //google.setOnLoadCallback
function getFeed(){
   var feed = new google.feeds.Feed("http://marumarutonton.blogspot.jp/feeds/comments/full?max-results=100");
   feed.setNumEntries(100);
   feed.load(callback);
 }
  function callback(result){
   if (result.error){
     alert(reault.error.message);
   }
   var res = "";
   var len = result.feed.entries.length;
   for (var i = 0;i < len;i++){
     var entry = result.feed.entries[i];
     var title = entry.title;
     var link = entry.link;
     var author = entry.author;
     var publisheddate = entry.publishedDate;

     var date = new Date (publisheddate);
     var year = date.getFullYear();
     var month = date.getMonth() + 1;
     var day = date.getDate();
     var hour = date.getHours();
     var min = ('0' + date.getMinutes() ).slice( -2 );
     var datestring = year + "/" + month + "/" + day + " " + hour + ":" + min;
     var content = entry.contentSnippet;
     res += "<p><a href=\"" + link + "\"><b>" + title + "</b> (" + author + ") </a><br /> - " + datestring +"</p><hr />";
   }
   var panel = document.getElementById("feed");
   panel.innerHTML = res;
 }
</script>
メッセージをここに入れることもできます。
<hr />
<div id="feed">
</div>

まるとん

---

Blogger Tips のページに戻る