Amebloに貼り付けていた、はてなブックマークボタンを更新してみたよ | A Day In The Boy's Life

A Day In The Boy's Life

とあるエンジニアのとある1日のつぶやき。

使いやすくなりました! はてなブックマークボタン


って事で、以前の数字だけのはてなブックマークボタンから、新しいデザインのはてブボタンに変えてみました。

ベースは、以前に書いた「はてブボタン設置用ブログパーツを改良してみたよ 」のJavaScriptになっています。



アメーバブログに新しくなった「はてなブックマークボタン」を設置する


下記のソースをサイドバー設定のフリープラグインの中に貼り付ければ、はてなブックマークボタンを設置することができます。


<script>
$(document).ready(function(){
    var page_url = location.href;
    if (page_url.match(/^.+\/entrylist[\-0-9]*\.html$/g )) {
        var entries = $(".newentrytitle a");
        var classname = ".updatetime";
        var flg = 0;
    } else {
        var entries = $(".foot a:contains('記事URL')");
        var classname = "div.entry .theme";
        var flg = 1;
    }
    for (i = 0; i < entries.length; i++) {
        var url = entries[i];
        if (flg == 0) {
            title = entries.eq(i).text();
        } else {
            title = $("div.entry h3.title").eq(i).text();
        }
        var hatena_btn = '<a href="http://b.hatena.ne.jp/entry/' + url + '" class="hatena-bookmark-button" data-hatena-bookmark-title="' + title + '" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><sc' + 'ript type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></sc' + 'ript>';

        var twitter_btn = '<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="it_boy" data-text="' + title + ' | A Day In The Boy&#39;s Life" data-url="' + url + '">Tweet</a><sc' + 'ript type="text/javascript" src="http://platform.twitter.com/widgets.js"></sc' + 'ript>';
        $(classname).eq(i).append('&nbsp;&nbsp;&nbsp;' + hatena_btn + '&nbsp;&nbsp;' + twitter_btn);
    }
});
</script>

ただし、上記のJavaScriptのソースには「Amebloに設置していたツイートボタンをTwitter公式のものに変えました 」に書いた公式のTwitterへ投稿ボタンもあわせて設置するようになっています。


※ 上記のスクリプトの中には、私のIDとブログタイトルが含まれています。適宜自分のTwitterアカウントのIDとブログタイトルへ変更してください。最近、私のアカウントが含まれる形でTwitterボタンを設置している人がいて、他の人がTwitterへ投稿した際に、私にmentionが飛んでくるんですけど、まったく関係ないし意味が無いと思いますので・・・。修正方法は、先のエントリ内に書いています。


また、Twitterへ投稿ボタンが不要であれば、下から5行目の「var twitter_btn」で始まる1行を削除して、その下の行を下記のように編集することで、はてブボタンだけ設置可能です。


$(classname).eq(i).append('&nbsp;&nbsp;&nbsp;' + hatena_btn);

元々このブログで過去に紹介したスクリプトを利用している場合は、下記の箇所だけを置き換えるだけでも新しいブックマークボタンに変更することができます。

var hatena_btn = '<a href="http://b.hatena.ne.jp/entry/' + url + '" class="hatena-bookmark-button" data-hatena-bookmark-title="' + title + '" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><sc' + 'ript type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></sc' + 'ript>';


もちろん、記事一覧 やテーマごとや日付指定のページでも自動でブックマークボタンが表示されるようになっています。

フリープラグインの文字数制限に引っかかって登録できないって場合は、「AmebloのフリープラグインのJavaScriptをGoogle codeにホストしたよ 」も参考にどうぞ。