2012年3月30日金曜日

Bloggerで「はてなスター」を表示するときのテンプレート修正

何となくBloggerにはてなスターを表示したくなったので
ここを参考にテンプレートを変更してみた。

<head>から</head>の間に↓を記述する。
(Tokenのところのxの部分は自分のTokenを記述する)
<script src='http://s.hatena.ne.jp/js/HatenaStar.js' type='text/javascript'/>
<script type='text/javascript'>
Hatena.Star.Token = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
Hatena.Star.EntryLoader.headerTagAndClassName = ['h3','post-title'];
Hatena.Star.SiteConfig = {
entryNodes: {
'div.post': {
uri: 'h3 a',
title: 'h3',
container: 'h3'
}
}
};
</script>

が、上手くいかない。
トップページでは表示されるのだが、個別記事になると表示されないのだ。
…何で??

いろいろ調べてみると、どうやら
個別記事のページになるとタイトルのリンクがなくなることが原因のようだ。

というわけで以下のように変更。

ちなみに私はBloggerのシンプルというテンプレートを使っている。

テンプレートを開いてHTMLの編集を選択。
ウィジェットのテンプレートを展開にチェックを入れる。
で、↓の部分を修正。

修正前
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
  <a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
  <b:if cond='data:post.url'>
    <b:if cond='data:blog.url != data:post.url'>
      <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
      <data:post.title/>
    </b:if>
  <b:else/>
    <data:post.title/>
  </b:if>
</b:if>
</h3>

↓↓↓

修正後
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
  <a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
  <b:if cond='data:post.url'>
    <b:if cond='data:blog.url != data:post.url'>
      <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
      <a expr:href='data:post.link'><data:post.title/></a>
    </b:if>
  <b:else/>
    <data:post.title/>
  </b:if>
</b:if>
</h3>

これで個別記事にもはてなスターが表示される。

本当は↓こういう風にするほうがいいと思うけど(不要な条件分岐を消しておく)

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
  <a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
  <b:if cond='data:post.url'>
    <a expr:href='data:post.link'><data:post.title/></a>
  <b:else/>
    <data:post.title/>
  </b:if>
</b:if>
</h3>

今回は出来るだけ元の形を残しておくことにしたので
上の修正にしてある。

2 件のコメント:

  1. はじめまして。
    私もはてなスターをつけたくて、テンプレートをいじってみたのですが、上記のようにしてもうまくいきません。

    テンプレートはブロガーテンプレートhttp://btemplates.com/を利用しています。どこをどう変えればいいのでしょうか。

    返信削除
  2. 【アマカナタさん】
     初めまして(^^)
     まずは、はてなスターの公式サイトの設置方法を
     参考にされたほうが良いと思いますが…
     http://d.hatena.ne.jp/hatenastar/20070707
     この方法で設置できなかった、ということですかね。
     私が使ってる「シンプル」というテンプレートではエントリに
     記載した方法で設置できるんですが、アマカナタさんの
     使用しているテンプレートが分かりませんし、
     同じ形で記述しているテンプレートしか
     エントリに書いてある方法は使えないです。
     お役に立てなくてごめんなさい(>_<)

    返信削除