« 2007年7月8日 - 2007年7月14日 | トップページ | 2007年7月29日 - 2007年8月4日 »

2007年7月21日 (土)

はてなスター設置その後

前回の記事にてはてなスターの設置についてのエントリーを書きました。
なにやらブックマークしてくれる人がいたりはてなスター日記のほうにもほんのちょっと取り上げていただいている様子

そのコメントの中に、「ただし、このブログでは、Main Index(トップページ)にのみ設置している模様。」というものがありました。気づいてなかった・・・

というわけでいじってみました。不格好な方法かもしれないけれど解決しました。
まず、なんで一記事単位表示だとうまくいかないかについて書きます。

はてなスターが必要とする情報は、タイトルとpermalinkURLだけです。はてなスターでは、以下のように、h3要素の中にリンクが含まれている場合に、それをタイトルとpermalinkである、と判断します。
はてなスターをブログに貼り付けるより

とあるようにh3要素の中にリンクが必要になっているのですが、一記事単位はタイトルがリンクになっていないのです。

それで解決法ですが、

記事の検出をしているのは「Hatena.Star.EntryLoader」というオブジェクトの「loadEntries」メソッドです。このコードを上書きすることで、はてなスターに正しく記事のタイトルとpermalinkを認識させることができます。
はてなスターをブログに貼り付けるより

とのことですので、同ページにのっているものを参考に

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"/>
<script type="text/javascript">
  Hatena.Star.Token = 'd1b02052474b7e28330ad1fbba7513eb57a1ebfe';
</script>
<script type="text/javascript">
  Hatena.Star.EntryLoader.loadEntries = function () {
        var entries = [];
        //var headers = document.getElementsByTagName('h3');
        var c = Hatena.Star.EntryLoader;
        var headers = c.getHeaders();
        for (var i = 0; i < headers.length; i++) {
            var header = headers[i];
            var a = header.getElementsByTagName('a')[0];
            var uri;
            if (a) {
              uri = a.href;
            }
            else {
              uri = Ten.DOM.getElementsByTagAndClassName("a","permalink",document)[0].href
            }
            var title = '';
            var cns = header.childNodes;
            title = c.scrapeTitle(header);
            var cc = c.createCommentContainer();
            header.appendChild(cc);
            var sc = c.createStarContainer();
            header.appendChild(sc);
            entries.push({
                uri: uri,
                title: title,
                star_container: sc,
                comment_container: cc
            });
        }
        return entries;
  }
</script>

というスクリプトをメモのところに置きました。無理やりなので、ココログかはてなスターの仕様が変わったらすぐダメになりそうで怖いです。
ちなみに

<script type="text/javascript">
  Hatena.Star.Token = 'd1b02052474b7e28330ad1fbba7513eb57a1ebfe';
</script>
<script type="text/javascript">
  Hatena.Star.EntryLoader.loadEntries = function () {

の</script><script type="text/javascript">のところを無駄かと思って消したらうまくいきませんでした。これは

外部ブログの認証にはブログトップページにトークンの記述が必要です

はてなスターをブログに貼り付けるより

とうことなのだと思います。

| | コメント (0) | トラックバック (0)

2007年7月15日 (日)

はてなスター設置

[観] はてなスターを設置してみました を参考に設置してみました。
私はベーシックなので、マイリストの方で。手順としては、

  1. リンクタイプのリストを作成。
  2. 適当な項目を作る。
  3. その項目のメモのところに
  4. <script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"/>
    <script type="text/javascript">
      Hatena.Star.Token = 'd1b02052474b7e28330ad1fbba7513eb57a1ebfe';
      Hatena.Star.EntryLoader.headerTagAndClassName = ['h3', null];
    </script>

    こんな感じで張り付ける。

  5. 設定のメモの表示を「テキスト表示」に変更する。

追記
この方法だけだと個別ページにはてなスターが出ません。
こちらの参照もお願いします。

| | コメント (0) | トラックバック (0)

« 2007年7月8日 - 2007年7月14日 | トップページ | 2007年7月29日 - 2007年8月4日 »