TwitterやFacebookやはてブのボタンを設置しよう

アメブロで簡単に「アメーバなう」「mixiチェック」「Twitterリツィート」「はてブ」「Google +1」「Evernoteサイトメモリー」「Facebookいいね」を設置できるフリープラグインです。既にいろんな方が公開されてるソースですが、まとめたものを紹介したいと思います。

JavaScript

<script>
$(document).ready(function(){
 
    $.getScript("http://apis.google.com/js/plusone.js",function(){
        {lang: 'ja'}
    });
    $.getScript("http://platform.twitter.com/widgets.js");
    $.getScript("http://static.evernote.com/noteit.js");
 
    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 h3";
        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 ameba_btn = '<a rel="nofollow" target="_blank" href="http://stat100.ameba.jp/blog/proxy.html?longurl=' + url + '&title=' + title + '&type=now"><img src="http://stat100.ameba.jp/common_style/img/common/btn/btn_share_now.gif" alt="なうで紹介" class="ameba-now-button"></a>';
 // mixiチェック用
        var mixi_btn = '<a rel="nofollow" target="_blank" href="http://stat100.ameba.jp/blog/proxy.html?longurl=' + url + '&type=mixi"><img src="http://stat100.ameba.jp/common_style/img/common/btn/btn_share_mixi.png" alt="mixiチェック" class="mixi-check-button"></a>';
 // Twitter投稿ボタン用
        var twitter_btn = '<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="②Twiiterアカウント名" data-text="' + title + ' | ③ブログタイトル名" data-url="' + url + '" data-lang="ja">Tweet</a>';
// はてなブックマークボタン用
        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>';
// facebookいいねボタン用
        var facebook_btn = '<iframe src="http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(url)+'&amp;layout=button_count&amp;width=105&amp;show_faces=false&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:105px; height:21px;" allowTransparency="true"></iframe>';
// Google+1ボタン用
        var gplus_btn = '<div class="g-plusone" style="display:inline;" size="medium" data-size="medium" data-count="true" href=' + url + '></div>';
//evernoteクリップ用
        var evernote = '<a href="#" onclick="Evernote.doClip({providerName:\' ④ブログタイトル名\'}); return false;"><img src="http://static.evernote.com/article-clipper.png" alt="Clip to Evernote" /></a>';
 
        $(classname).eq(i).after(⑤'<span class="snsicon">' + ameba_btn + '&nbsp;' + mixi_btn + '&nbsp;' + twitter_btn + '&nbsp;' + hatena_btn + '&nbsp;' + facebook_btn + '&nbsp;' + gplus_btn + '&nbsp;' + evernote + '</span>');
    }
});
</script>

*このソースは赤字部分の編集が必要です。数字は消してお使いください。

• ①「div.entry h3」は入れたい場所の手前の要素名を書いてください。この場合ですと<h3>記事タイトル</h3><span class="snsicon"> ~ </span>になります。
• ②「Twitterアカウント名」リツイートにvia アカウント名が入ります。
• ③「ブログタイトル名」記事タイトルの後に入る文です。
• ④「ブログタイトル名」記事タイトルの後に入る文です。
• ⑤「'<span class="snsicon">' ~略~ '</span>'」ここで並び替えや表示/非表示の設定をします。まず用語確認【 ' 】シングルクォート【 &nbsp; 】半角スペース、それと【 + 】プラス。書き方はHTMLに出力される文字やタグはシングルクォートで囲み、JavaScriptで設定された値（今回では言うとボタン名ですね）は何もつけないで、+で繋げるます。例「'<div>' + ボタン名 + '&nbsp;' + ボタン名 + '</div>'」ボタン名はソース下コメント付き部分の「var ～」の～を書いてください。

CSS

#main .snsicon {
	width			:;
	heigh			:21px;
	display			:block;
}

横幅は入れたい場所に合わせて、高さはほぼすべてのアイコン20～21pxになってますので、横に並べるならそのまま、私のブログの用に段にするなら消すか必要な分の高さを入れてください。

詳細

• フリープラグインに追加
• スクリプトの外部化推奨

バグ

• 一部アイコンに余白ができる（アイコン1つ1つの吹出しなどが変動なのにタグ全体がサイズ固定のため）

参考

• AmebloにGoogle+1ボタンを設置してみたよ｜A Day In The Boy's Life