Typoに「はてなスター」と「はてなブックマーク」を組み込む
投稿者 おおかゆか
ブログに「はてなスター」と「はてなブックマーク」を設置してみた。
このブログの目的は一番に自分の勉強のため。とは言えど、全く他の誰にも読まれてないと思うとモチベーションもなかなか維持しづらい。
ブログであるからには当然、コメントとトラックバックの機能をこのTypoも備えてはいるものの、敷居が高くてなかなか使う人もいない。自分もあまり使わないし。
手っ取り早く読者のレスポンスを得る方法は、ソーシャルブックマークへの登録をしやすくしてあげること。
日本で一番ユーザー数の多いソーシャルブックマークは、言うまでもなく「はてなブックマーク」。普段から自分でもけっこう使っているので馴染みもある。
というわけで、その「はてなブックマーク」とついでに「はてなスター」をTypoに組み込んでみることにした。
その方法をここで紹介する。
1. はてなブックマークの設置
まずは画像をダウンロード。
$ mkdir -p ${TYPO_DIR}/public/images/vendor/hatena
$ cd ${TYPO_DIR}/public/images/vendor/hatena
$ wget http://d.hatena.ne.jp/images/b_entry.gifTypoのテンプレートを編集。
$ vi ${TYPO_DIR}/app/views/articles/read.html.erb
--
<%= article_links @article %>
--
<%= article_links @article %>
<%= link_to image_tag(‘/images/vendor/hatena/b_entry.gif’, :size =>’16x12’, :alt => ‘はてなブックマーク’, :title => ‘はてなブックマーク’), ‘http://b.hatena.ne.jp/entry/’ + @article.permalink_url %> <%= link_to image_tag(‘http://b.hatena.ne.jp/entry/image/’ + @article.permalink_url, :alt => ‘はてなブックマークでの登録数’, :title => ‘はてなブックマークでの登録数’), ‘http://b.hatena.ne.jp/entry/’ + @article.permalink_url %>
--
に変更。
$ vi ${TYPO_DIR}/app/views/articles/index.html.erb
--
<%= article_links article %>
--
<%= link_to image_tag(‘/images/vendor/hatena/b_entry.gif’, :size =>’16x12’, :alt => ‘はてなブックマーク’, :title => ‘はてなブックマーク’), ‘http://b.hatena.ne.jp/entry/’ + article.permalink_url %> <%= link_to image_tag(‘http://b.hatena.ne.jp/entry/image/’ + article.permalink_url, :alt => ‘はてなブックマークでの登録数’, :title => ‘はてなブックマークでの登録数’), ‘http://b.hatena.ne.jp/entry/’ + article.permalink_url %>
--
に変更。 あとはアプリケーションサーバを再起動して、Typo adminの「設定」からキャッシュを削除すれば、はてなブックマークのボタンと登録数が各記事の下に表示されるようになる。
2. はてなスターの設置
はて☆すたは、はてブよりもけっこう手強い。
まず、Typo adminの「Themes」→「Theme editor」から、default.html.erbを編集。
タグで囲まれている間の任意の場所に、
<!-- Hatena star script -->
<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.EntryLoader.headerTagAndClassName = [‘h2’,null];
Hatena.Star.Token = ’my_token_codes’;
</script>
<!-- /Hatena star script -->
というコードを記述して、「save」をクリック。（※my_token_codesは、はてなスターでブログを登録すると表示されるトークンコード。）
さらに「設定」からキャッシュの削除を行えば、はてなスターがブログに表示されるようになる。
…はずだったんだけど、トップページは表示されているものの、各記事のページはなぜかうまくいかない。
この理由は、HatenaStar.jsがリンクなしの記事タイトルを想定していないため。
ユーザビリティ的にはTypoのリンクなしのほうが正解なんだけど、JavaScriptを書き換えるほどの気力がないというか、Typoのほうを合わせたほうがラクなのでそうすることにする。
$ vi ${TYPO_DIR}/app/views/articles/read.html.erb
--
<h2><%=h @article.title %></h2> –
<h2><%= link_to @article.title, @article.permalink %></h2>
–
のように変更。
あとは例のごとくアプリケーションサーバを再起動して、Typo adminの「設定」からキャッシュを削除。
すると今度こそ各記事のページでも、はてなスターが記事タイトルの横に表示されるようになる。
おまけ. アイコンカラーの変更
1と2の作業で、はてなブックマーク及びはてなスターがブログに表示されるようになった。
だがしかし。
どうにも色合いが不釣り合いというか、サイトの統一感を乱している。このサイトで使っているテーマの「Jazz Café」は全体的にワインレッドを基調としているため、はてなの青、それも原色ど真ん中の青は著しく浮いてしまう。
なのでここは、アイコンに手を加えてサイトに似合う色調に変更する。
アイコン自体ははてなからダウンロードした上でGIMPを使って色調を変更して、${TYPO_DIR}/public/images/vendor/hatenaディレクトリに格納しておく。
アイコンファイルは、
の５つ。
さらにTypo adminの「Themes」→「Theme editor」から、default.html.erbを編集。
タグで囲まれている間の任意の場所に、
<%= stylesheet_link_tag "/stylesheets/vendor/hatena", :media => ‘all’ %>
というコードを記述して、「save」をクリック。
次に、
$ mkdir ${TYPO_DIR}/stylesheets/vendor
$ vi ${TYPO_DIR}/stylesheets/vendor/hatena.css
--
.hatena-star-star-image {
background-image: url(/images/vendor/hatena/star.gif);
}
.hatena-star-add-button-image {
background-image: url(/images/vendor/hatena/add.gif);
}
.hatena-star-comment-button-image {
background-image: url(/images/vendor/hatena/comment.gif);
}
.hatena-star-comment-button-image-active {
background-image: url(/images/vendor/hatena/comment_active.gif);
}
--
を作成。これで完了。ブラウザで確認してみると、
うんうん、なかなかいい感じ。これでいこう。
以上で作業は完了。テストのために自分で自分の記事にスターつけちゃってるけど、それはご愛嬌ということで。
一度つけたスターやコメントは、自分でも消せない仕様になってるので。
> 一度つけたスターやコメントは、自分でも消せない仕様になってるので。
と書いたが、これはウソ。ごめんなさい。
その後スターはマウスカーソルをその上にしばらく置いておくと、「この☆を消しますか？」というダイアログが出ることを発見。
でもひとつくらい残してても別にいいかと思うので残しておく。
画像は自分でカスタマイズしなくても、
みたいのはあったみたい。
まあでも色違いのスターはないようだし、Bマークも原色赤じゃなくてワインレッドがほしかったので、作った意味はあったけど。