はてなスターを COREBLog(2じゃないほう)に設置
はてなスターというのが面白そうだったので、COREBlog (Plone版じゃないほう)に組み込んでみた。しかしこれは結構勇気がいる!!(アイデアは面白いけど、誰もクリックしてくれなかったら寂しいだろうな。まあ、書く内容が悪いってことなんだろうけど…)
はてなスター日記 - はてなスターをブログに設置するには を読んでみると、結構簡単そうだ。JavaScript だが、カスタマイズしやすいように作られていると思う。
まずはスクリプト
はてなスター日記 - はてなスターをブログに設置するには を読み、アカウント登録の後、自分のブログサイトのURL(うちのばあいは、http://www.randynetwork.com/blog/)を登録する。そうしたら、ブログのテンプレートの <head> タグに貼り付ける HTML のコードが表示されるので、コピーする。
Zope 管理画面で COREBlog インスタンスを開き、Contents タブをクリックする。ここに、blog_header という DTML Method があるので、開く。こいつは、COREBlog の HTML の <head> 部分なので、ここに先ほどコピーしたコードを張り付ける。但し、そのままではなく、以下のように(EntryLoader_COREBlog.jsファイルを読み取るように)一文加えておく必要がある(理由については後ほど)。
<script type="text/javascript"
src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript"
src="<dtml-var blogurl missing="">/EntryLoader_COREBlog.js"></script>
<script type="text/javascript">
Hatena.Star.Token = '7ee1416474f1bfcfcd2ebf480150fa2aca050a81';
</script>
当然だが、上記スクリプトの Hatena.Star.Token
については各自がはてなからもらったID(はてなスターの画面でブログを登録したときにもらうID)になる。そのままコピペされないようご注意頂きたい。
はてなスター日記 - はてなスターをブログに設置するにはにも書かれているように、エントリのタイトルが <h3>であり、タイトルの中に permalinkが無いと正しく動かない。したがって COREBlog のデフォルトテンプレートの場合カスタマイズしなければならない。幸い、先ほどのドキュメントに livedoor Blog 用のカスタマイズ方法が記載されているので、それを参考にして COREBlog のスクリプトを作成した。これを、COREBlog インスタンスに EntryLoader_COREBlog.js
という名前の DTML Document として追加する。
Hatena.Star.EntryLoader.loadEntries = function() {
var entries = [];
var divs = Ten.DOM.getElementsByTagAndClassName('div','entry',document.body);
for (var i = 0; i < divs.length; i++) {
if (divs[i].getElementsByTagName('h3')[0]) {
entries.push(new Hatena.Star.Entry.COREBlog(divs[i]));
}
}
return entries;
}
Hatena.Star.Entry.COREBlog = new Ten.Class({
initialize: function(div) {
this.div = div;
var h3 = div.getElementsByTagName('h3')[0];
this.title = Ten.DOM.scrapeText(h3);
var posted = Ten.DOM.getElementsByTagAndClassName('div','posted',div)[0];
this.uri = posted.getElementsByTagName('a')[0].href;
this.comment_container = Hatena.Star.EntryLoader.createCommentContainer();
h3.appendChild(this.comment_container);
this.star_container = Hatena.Star.EntryLoader.createStarContainer();
h3.appendChild(this.star_container);
}
});
livedoor blog 用のスクリプトとほとんど一緒だが、COREBlog の場合は、<div class="entry"> が一つのエントリ中に 2回現れるので、<h3>タグの存在する方だけを使うように修正している(ちょっとかっこ悪い処理で申し訳無いが…)。
これで、見事にスターが表示される。
スタイルシートも
スターが表示されたものの、思った位置に表示されない。スタイルシートの調整も必要なようだ。
COREBlog デフォルトスキンのスタイルシートには、画像に float が設定されているのが原因で、これを取り除く事にする。ただ、本文中の画像は float のままでよいので、タイトル <h3> の画像だけに有効なように以下のスタイルを追加する。追加場所は、COREBlog インスタンスの style_css
DTML Method の中ならどこでも良い。
h3.title img {
float: none;
margin: 0;
}
これで出来上がり。
