2007年8月27日月曜日

Bloggerに最新のコメントを10件表示する

clmemo@aka: Blogger Beta に「最近のコメント」を付けるを参考にこのブログのサイドバーにも最近のコメントを付けて見た。

↑で紹介されている方法はBloggerのRSSフィードを表示するWidgetとコメントフィードを使ったもので表示件数が最大5件と少ない。しかも名前と日付しか表示されない。
そこでJavaScriptとBloggerのコメントフィードのJSON出力を使ってコメントを10件表示し、コメントの最初の32文字を表示するスクリプトを書いてみた。

<div id="recent_comment_list"></div>
<!--
<script>
function recent_comment_callback(obj) {
var data = obj;
var statusHTML = '<ul>';
for (var i=0; i<data.feed.entry.length; i++) {
statusHTML+= ('<li><a href="'+data.feed.entry[i].link[0].href+'">');
statusHTML+= (data.feed.entry[i].summary.$t.substring(0,32));
if (data.feed.entry[i].summary.$t.length > 32) {
statusHTML+= ('...');
}
statusHTML+= ('</a> - ');
statusHTML+= ('<span class="item-date">'+data.feed.entry[i].published.$t.substring(0,10)+'</span>');
statusHTML+= ('<span class="item-author"> '+data.feed.entry[i].author[0].name.$t+'</span>');
statusHTML+= ('</li>');
}
statusHTML += '</ul>';
document.getElementById('recent_comment_list').innerHTML = statusHTML;
}
</script>
-->
<script text="text/javascript" src="http://360-to-issho.blogspot.com/feeds/comments/summary?alt
=json-in-script&callback=recent_comment_callback&max-results=10"></script>


Bloggerのレイアウト画面でHTML/JavaScript要素を追加し、上のスクリプトを貼付ければOK。のはず、、なんだけどうまくうごかない。。仕方がないのでスクリプトを別ファイル(comment.js)に保存してBloggerから参照するようにした。こんな感じ。

<div id="recent_comment_list"></div>
<script src="http://arms22.web.fc2.com/comment.js" type="text/javascript"></script>
<script text="text/javascript" src="http://360-to-issho.blogspot.com/feeds/comments/summary?alt
=json-in-script&callback=recent_comment_callback&max-results=10"></script>


追記 2007/8/30
<script>タグが抜けていたのを修正。
HTML/JavaScript要素にスクリプトを貼付けることができたので「スクリプトを別ファイルに〜」は削除。
toranekosanさん情報thx。

6 コメント:

toranekosan さんのコメント...

某所のブログにて投稿をみてやってきました。「「最近のコメント」問題に関してです。

本文中でjsファイルにする以前の方法が美味くいかないとありましたが、僕のブログのようにscriptタグをいれてやると動作する事がわかりました。(javaとhtmlに関してはほぼ素人で、間違ったことをやっているかもしれませんが)

コードをコメントで埋め込む方法が分からなかったんで、僕のブログにて方法をこちらのブログ名義で公開いたします。(いま書いている所です^^;)

arms22 さんのコメント...

scriptタグは書き忘れていたようです。ブログの記事を修正しておきました。またこちらでも今日、確認したところスクリプトをうまく貼付けることができました。情報ありがとうございます。

toranekosan さんのコメント...

こちらこそ、ありがとうございます!おかげさまでちょっとbloggerを続ける気になりましたw

こちらのブログでテンプレート上長い行は表示できないということで、スクリプトコピーが出来ない&コピーしても動かない方がいらっしゃるようです。firefoxでしかWebはしないのでIEの仕様によってできないのかもしれないですね。

匿名 さんのコメント...

何も表示されないのですが
どこに問題があるのでしょうか・・・

arms22 さんのコメント...

blogをfirefoxで見た場合にスクリプトがすべて表示されていなかったので、コードの途中に改行を追加しました。
もう一度試してみてください。

ramito さんのコメント...

コメントをカスタマイズして表示することが出来ないか探していたところ、こちらのブログを見つけました。

お陰様で、コメント欄をブログに追加することが出来ました。
ありがとうございました。