hatesta

WordPressブログにはてなスターを導入・設置してみた。

こんにちは！たけ氏です！

 

WordPressでブログを運営してるぼくが、はてなブログいいよな～って思う要素の１つとして『はてなスター』があります。

hatenastar

こういうやつ。
（コトリさんの記事のスターを勝手にスクショしました！！（懺悔））

 

読んだらスター、面白かったらはてブ、なんて言われてる通り、ぼくも読んだらスターを押すようにしています。３つくらい。

 

 

てか正直これズルくねぇ？超欲しいんですけど。

はてなブログ民はブックマークされなくてもスターを押してもらえることで「あぁ、読んでもらえてる」って実感できるじゃないですか。

WordPressはね、はてブしか無いのよ。あんまりブクマがもらえない初心者ブロガーだと読まれてる実感がないのよ！

 

だから、やってやりましたよ。

WordPressブログだけど『はてなスター』を実装してやりましたよ！！！


もしかしたらはてなスターをつけたいWordpressブロガーも居るかもしれないので、導入・設置の仕方を備忘録的にまとめておきます。

イイネ！と思ったらスター…じゃなくてブクマしてね！

 

スポンサーリンク

スマフォ用

 

まずブログをはてなスターに登録！

（はてなのIDは取得している前提で話します）

まず、はてなスターのページにログインし、『ようこそ、○○さん』のリンクをクリックします。

hs1

すると『外部のブログサイトを登録する』という項目があるので、そこにブログトップページのURLを入力して『追加』ボタンを押します。

hs2

ブログが登録され、コードが発行されます。

hs3

Hatena.Star.Tokenと書いてある部分が、登録舌ブログとはてなIDとを結びつけるトークンです。なのでブログごとにコードが違うため注意。

 

出力されたコードをヘッダーに埋め込む

ここからちょっとずつ難しくなっていきますが、なるべく簡単にできるよう説明していきます。

ぼくはStingerPLUSというテーマを使用しているため、その前提で話を進めます。
他のテーマを使用している方にもわかるように、変える必要がある（かもしれない）部分は明記します。

 

WordPressのダッシュボードから、[外観]→[テーマの編集]にアクセスします。

※必ずバックアップを取ってから追記・変更してください。何かトラブルが起こっても筆者は責任を負えません。

hs4

ご自身の使っているテーマのヘッダー部分に、先ほどのコード＋以下のコードを入れ込みます。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.Token = 'トークン';
Hatena.Star.SiteConfig = {
 entryNodes: {
  'div.hatesta': {
   uri: 'document.location',
   title: 'document.title',
   container: 'h6'
  }
 }
};
</script>

灰色部分が先ほどのコード、その中に赤色（太字）部分を追加します。
（赤字が認識出来ない場合、太字を参考にしてください。以下赤字は全て太字にしてあります）

灰色部分内の『トークン』はブログによって違うので気をつけてください。赤色部分はこのままコピペでOKです。

ぼくはStingerPLUSを使用しているので、テーマヘッダー(header.php)の一番下にある</header>という文字の上に入れ込みました。

他のテーマを使用している方は<header>内の相当する位置に入れ込んでください。

 

はてなスターを表示したいページにコードを埋め込む

次に、はてなスターを表示したいページへのコード埋め込みです。

今回は記事のページにつけます。
個別投稿 (single.php)のh1タグ（タイトル部分）の上に↓のタグを追加してください。

<div class="hatesta">
<h1 class="entry-title"><?php the_title(); //タイトル ?></h1>

と、赤字の部分を追加します。

StingerPLUSの場合は灰色部分があるはずですので、位置の参考にしてください。

 

次に記事が終わった後の部分に以下を追記します。

</div><!-- .mainboxここまで -->

<!-- はてなスター -->
<h6><a href=""></a></h6>
</div>

と、赤字の部分を追加します。

StingerPLUSの場合は灰色部分があるはずですので、位置の参考にしてください。

他のテーマの場合は相当する位置に追加してください。
このとき、他のdiv要素を閉じてしまわないように気をつけてください。

※実に意味の無いaタグがh6タグ内に入ってますが、h6タグ内に何も入ってない状態だとはてなスターが表示されないときがあったので、あえて入れてあります。

 

Addボタンの形を変える

標準のはてなスターのボタンだと

adddd（押せません）

これで、ちょっと見づらい＆押しづらいので、

hsadd（押せません）

はてなブログでよく見る画像に換えます。

 

スタイルシート(style.css)に以下を追記してください。

.hatena-star-add-button-image {
background-image: url(画像のURL);
}

画像のURLとしてある部分はご自身のブログにアップロードした画像のURLに書き換えてください。

 

作業終了。が、ここで大問題発生…Chromeではなぜか表示されない！

なぜだ…ッ！？

マジで謎の現象が発生しています。
Chromeだけで表示されません。オンリーイベントです（；；）

 

しかも何が良くないって、

スマフォ版のChromeでも表示されないこと！！！

いまやブラウザのシェアで約５０％はChromeと言われているので、ネットユーザーの半数はぼくのブログのスターを押せないという事態に…！

 

結構頑張って戦ってみたり調べたりしたんですけど、いかんせんWordpressにはてなスターをつけようなんて人が他にあまりおらず、解決策も出てこなかった・・・

なんかUAが原因とかAmazonアフィリンクが原因とか書いてあったサイトもあったけどイミフうはおｋ('A')

 

 

この記事を読んだエンジニアのみなさん。

 

どうかこのバグをなおしてください（；；）

 

Chrome以外のブラウザをお使いの皆さん。

じゃんじゃん押してください

おわりに

はてなブログだと☆部分にアイコンとか×とかも表示されてるんだけど、その機能までは実装できませんでした。そのうち出来たらやります（たぶんぼくの技術力ではできない）

Chromeで表示できなかったのが本当にイタイ…できる人が居たらやり方を教えて欲しいです　切実に（；；）

 

でもまあ！他ブラウザならだいたい見えてるはずなんで！（本当はちょっと不安定）
見えてる方はじゃんじゃん押してくださいっ！！（；；）

 

参考にしたページはこちら。
情報は結構古かった。

 はてなスター日記 
はてなスターをブログに設置するには
http://d.hatena.ne.jp/hatenastar/20070707
はてなスターの仕組み はてなスターは、はてなダイアリー、はてなグループでは自動的に表示されますが、そ..

 

以上っ！

スーパーマリオ 3Dワールド ふにゅふにゅマスコット ［3.スーパースター］(単品)
スーパーマリオ 3Dワールド ふにゅふにゅマスコット ［6.グリーンスター］(単品)

 

↓[書いた人：たけ氏]の↓にスターがあるよ！おしてね！…いや、ブクマしてね！

表示されてないときは…３，４回くらい更新すれば出てくる…よ？（保障はしない）

-WEB, 備忘録

書いた人：たけ氏