やっとはてなスターが設置できた


僕の読解力に問題があるのか、下の説明を読んでてもさっぱり理解できなくって、もしくはちゃんと読んでなかったためにはてなスターを追加するボタンを設置したいのにできない状況でした。

はてなスターをブログに設置するには – はてなスター日記

はてなスターとは「はてなアカウント」を持っている人がスターボタンのある場所で「キラーン」としたときや「GJ」と思ったとき、または「同意」の意味を込めてスターボタンをおすと、そのコンテンツの持ち主がうれしくなれるサービスでFacebookの「いいね」と似たようなものです。

詳しく知りたい方ははてなスターはじめてガイド – はてなスターを見て。

今日別の記事のことで人様のソースをのぞき見しててようやく理解しました。

ふつうだと発行されるコードはこれ。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.Token = '8491f2f81d40a547fa9d34da1095e1d43fe51927';
</script>

でこれに自分のページに合わせてこれを追加

  Hatena.Star.EntryLoader.headerTagAndClassName = [['h3'],['entry-header']];

このh3とentry-headerはサービスによって様々っぽい。Typepadの場合はこうだった。

さらに個別の記事ページは記事タイトルにリンクが付いていない。

<$MTEntryTitle$>だけなので<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>のようにすると個別の記事ページでも表示されるようになりました。

必要な作業は

  • はてなスターのトークンを発行してスクリプトを取得する
  • ページからタイトルとパーマリンクがある要素を見つける。
    <a href="パーマリンク">タイトル</a>の様になっている部分
  • スクリプトに要素の指定を追加する。

この要素を指定するっていう部分がすこし分かりにくかったのでできない人ははてなスターをブログに設置するには – はてなスター日記を熟読するか、同じサービスの人のソースを覗いてみるといいと思います。

わかっちゃってからサイトを読んでみるとあ~なるほどそういうことかって思う。よく読めば理解できてたなぁ~と思うところまでがデフォルト。

設置できてとてもうれしいのではてなスター押してください。(._.)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です