アメブロにはてなブックマークを自動で設置するプラグインを作りました。
名付けて「はてブ自動追加プラグイン」です。
■修正情報■
3/24：一部のブログでブックマークボタンが表示されない不具合を修正しました。
ソーシャルブックマークとして、おそらく日本で一番利用されているのが、「はてなブックマーク
（以下、はてブ）」です。
そのブックマークサービスで自分のブログ記事が何人にブックマークされているか知りたくないですか？
知りたいよね？
（知りたーい）（教えろー！）（知りたいデース）（ザワザワ・・・）（志村ーうしろーうしろー）
いやぁ、色んな意見が聞こえてきますね。
うんうん、みんな知りたいよね～。常識的に考えて。
・・・などと、軽く妄想しつつ、みんなが知りたがってるもんだと勝手に決めて話を進めちゃいます。
結論から言うと、
フリープラグインにはてブ自動追加プラグインをコピペしてサイドバーに配置するだけ。
です。それ以外の特徴としては、
・面倒なCSSのカスタマイズとかいらないです。
・サイトのデザインはそのままで、いきなりはてブが使えちゃいます（たぶん）。
・ついでに、「はてなスター
」という、アメブロのペタみたいな機能も使えるようにしちゃいます。
※ただし、いくつか注意点があります。その辺は後で解説します。
では、さっそく設置方法の解説をしちゃいます。
（ワーワー。パチパチパチ）
■「はてブ自動追加プラグイン」の設置方法■
１．ブログの管理ページを開く
２．「サイドバーの設定」をクリック
３．「プラグインの追加」をクリック
４.ドロップダウンリストから「フリープラグイン」を選択
５．テキストボックスに下のJavaScriptをコピー＆ペーストする
「下記にプラグインの指定のタグを追加してください。」と書いてあるところに、下の文字列を全部コピーして貼り付けます。
↓↓ この下からコピー開始（この行はコピーしないで下さい） ↓↓
<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script >
<script type="text/javascript">
Hatena.Star.SiteConfig = {
entryNodes: {
'div.entry': {
uri: 'div.foot a:first',
title: 'h3.title',
container: 'h3.title'
}}};
</script>
<a href="http://ameblo.jp/katyos/">[katyos.Lab]</a><br>
<script type="text/javascript">
function addHatenaBookmark() {
var url = location.href;
if( url.match( /^.+\/entry-\d+\.html$/g ) ) {
var url_btn = 'http://b.hatena.ne.jp/append?' + url;
var url_cnt = 'http://b.hatena.ne.jp/entry/' + url;
var url_cimg= 'http://b.hatena.ne.jp/entry/image/' + url;
var url_hatena = '<a href="' + url_btn + '" target="blank"><img height="12" width="16" border="0" alt="はてなブックマークに追加" src="http://b.hatena.ne.jp/images/append.gif " /></a><a href="' + url_cnt + '" target="blank"><img border="0" src="' + url_cimg + '" /></a>';
var entry = document.getElementsByTagName('div');
for( var i=0; i<entry.length; i++ ) {
if( entry[i].className=='entry' || entry[i].className=='entry new' ) {
var info = entry[i].getElementsByTagName('h3');
for( var j=0; j<info.length; j++ ) {
if( info[j].className=='title' ) {
var t = document.createElement('span');
t.innerHTML = url_hatena;
info[j].appendChild(t);
}}}}}}
if(window.addEventListener){
window.addEventListener("load", addHatenaBookmark, false);
}else if(window.attachEvent){
window.attachEvent("onload", addHatenaBookmark);
} else {
window.onload = addHatenaBookmark;
}
</script>
↑↑ ここ迄でコピー終了（※この行はコピーしないで下さい） ↑↑
ちなみに、この時の画面はこんな感じになります。
６．追加ボタンをクリック
７．サイドバーの配置画面で、フリープラグインを配置する
場所はどこでもＯＫ。
サイドバーにはこのブログへの小さいリンクしか表示しないので見た目も殆ど変わりません。
↓こんな風に「フリープラグイン」を好きなところに配置。
８．保存ボタンをクリック
９．おしまい。
どうです？簡単でしょ。
あとは自分のブログに はてなブックマーク
と はてなスター
が追加されてるか確認してください。
■ 確認方法 ■
１．自分のブログを開きます
２．記事のタイトルにボタンが追加されてるか確認します
上手く設置できると、各記事のタイトルがこんな風↓になります。
３．スターをクリックしたりブックマークいてみます。
自分でやってもよし。誰かにブクマしてもらってもよし。
もしかすると、既にブックマークされてるかもしれません。
その記事がブックマークされてるとこんな風↓になります。
４．以上、確認終わり！
おつかれさまでした。(^-^)
■ 注意点 ■
この「はてブ自動設置プラグイン」を使用するにあたって、いくつか注意点があります。
１．はてなブックマークボタンは個別記事ページのみ表示されます。
すいません。
現在のプログラムだと、はてブボタンは個別記事のページだけで表示されます。
はてなスターはいつでも表示されますので安心してください。
２．動作保証はしません。ある日突然使えなくなるかもしれません。
このプラグインはＨＴＭLタグを無理やり書き換えますので、アメブロの仕様が変わったらアウトです。
なるべく対応するつもりですが、動作は保証しません。ご了承ください。
３．JavaScriptが使えない環境では表示されない。
プラグインはJavaScriptを利用します。ブラウザの設定でJavaScriptが使えるようになってないと、はてブボタンは表示されません。
４．携帯では表示されない。
上記３と同じ理由です。
ほとんどの場合、携帯ではJavaScriptが使えませんので、携帯ブログでは表示されないです。
５．はてなのユーザー登録が必要
ブクマしたりスターをつけるには、はてなのユーザー登録が必要です。
自分ではブックマークせず、誰かがブクマしてくれたのを見るだけなら登録する必要はありません。
６．誰かがブックマークしてくれないとブックマーク数は表示されません。
ブックマークボタンは表示されますが、被ブックマーク数は誰かにブックマークされないと表示されません。
人気が出てたくさんブックマークしてもらえるよう頑張りましょう。
７．はてブのコメントで批判されるかも。
はてなのユーザーはアメブロと違って議論好きな人が多いです。
時には批判されて嫌な気持ちになるかもしれません。
はてブはそういうもんだと割り切りましょう。
８．このブログへのリンクは消さないで下さい。
フリープラグインのところに小さく[katyos.Lab]というリンクが表示されます。
利用の際は必ずこのリンクを表示してください。
このプラグインについての質問や要望があるときはこのリンクからどうぞ。
なお、このスクリプトに関する権利は当ブログ管理人・katyosにありますので、ご注意ください。
以上です。
アメブロユーザーの皆さん、ぜひぜひ使ってみてください。
でわでわ。