« 謹賀新年 | メイン | 皆既月食 -天体観測- »

TopBlog > はてな☆スターを入れてみたよ
2007年08月21日

はてな☆スターを入れてみたよ

久しぶりのエントリーになります。さすがに最後のエントリーが謹賀新年はまずいですよね。
BlogPetの俳句や投稿も「新年・・・」とかが多くてちょっと恥ずかしい。
と言っても書くネタがあるわけでもないのですが・・・。

BlogPetも知らない間に大幅リニューアルしてかなり機能アップしましたね。それで今までの設置方法だとうまく表示されなかったりしたので細々と対応してはいたのです。それを書いてみようかとも思ったのですがまとまっていないので別の機会に。

はてなで「はてなスター」なるものも始まっていたので設置してみました。以下は覚書として設置方法を記しておきます。まあ、はてなスターの設置方法を見ればほとんど同じですが。

うちのMTブログはテンプレートに小粋空間様のものを使っているので標準ではエントリータイトルにpermalinkがありません。そこで書くエントリーの下段にある「posted~」部分からpermalinkを取得するようにJavaScriptコードを自作します。実際は、はてなスターの設置方法 に書いてあるようなコードを追加します。以下のようなコードを書いた別ファイル(例えば、MTHatenaStar.js)を作成します。

Hatena.Star.EntryLoader.loadEntries = function() {
    var entries = [];
    var divs = Ten.DOM.getElementsByTagAndClassName('div','entry',document.body);
    for (var i = 0; i < divs.length; i++) {
        entries.push(new Hatena.Star.Entry.MtKoikikukanTemp(divs[i]));
    }
    return entries;
}
Hatena.Star.Entry.MtKoikikukanTemp = new Ten.Class({
    initialize: function(div) {
        this.div = div;
        var h2 = div.getElementsByTagName('h2')[0];
        this.title = Ten.DOM.scrapeText(h2);
        var posted = Ten.DOM.getElementsByTagAndClassName('div','entry-footer',div)[0];
        this.uri = posted.getElementsByTagName('a')[0].href;
        this.comment_container = Hatena.Star.EntryLoader.createCommentContainer();
        h2.appendChild(this.comment_container);
        this.star_container = Hatena.Star.EntryLoader.createStarContainer();
        h2.appendChild(this.star_container);
    }
});

そして、はてなスターの設置方法 にあるように <head>~</head> の間に以下のように記述します。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>MTHatenaStar.js" charset="<$MTPublishCharset$>"></script>
<script type="text/javascript">
Hatena.Star.Token = 'トークンのコードを記述する';
</script>

上記のコードは、「メインページ」「カテゴリー・アーカイブ」「日付アーカイブ」のそれぞれのテンプレートに追加する必要があります。

また、エントリーページにも表示したい場合は、エントリーページには標準でpermalinkがないのでダミーとして <div class="entry-footer"> の直下に以下のコードを追加します。

<div class="entry-footer">
<a class="permalink" href="<$MTEntryPermalink$>" style="display:none;">Permalink</a>

参考サイト:
はてなスター日記: はてなスターをブログに設置するには
facet-divers: [ココログ] はてなスターを記事別ページにも(ついでにフッターにも)

トラックバックURL


コメントする

太字 イタリック アンダーライン ハイパーリンク 引用