2010年版ソーシャルボタンをWordPressに手動設置(jQuery) - [k]id東京都世田谷区 ホームページ制作 [k]id

2010年版ソーシャルボタンをWordPressに手動設置(jQuery)

Category WEB Tips Update 2011.01.14

twitterfacebookgoogle+はてなブックマークPocketであとで読むfeedlyで購読

@ishiiyoshinoriさんの作られた「Twitter/facebookいいね!/facebook Share/mixiチェック/mixiイイネ!/GREEいいね/Evernote/はてブのボタンを超カンタンに作れる jQuery.socialbutton プラグインを作ったよ」が、もの凄く便利なのでご紹介


(googleブックマークとYahoo!ブックマークは手動で追加しています。)

昨年V1.2から使用させて頂いているのですが、「新しいバージョンが出ているかな?」と思って
サイトを拝見したらもの凄い事になってました。

対応しているプラグインは以下
・mixiイイネ!ボタン
・mixiチェックボタン
・facebookいいねボタン
・facebook Shareボタン
・Twitterつぶやくボタン
・GREE いいねボタン
・Evernote サイトメモリー
・はてなブックマーク
・新はてなブックマーク
おそらく最近利用しているソーシャル系のボタンは全て網羅しているのではないでしょうか。

使い方も簡単で@ishiiyoshinoriさんの解説を読めば誰でも設定できると思います。

mixiチェックのみ、デベロッパー登録が必要なので設定が若干面倒ですがここを参考に登録すればキーが入手出来ると思います。

ちなみに私が設定したのはこんな感じ

header部

ヘッダに記述

<script>
$(function() {
     // Facebook / Like button
     $('.facebook').socialbutton('facebook_like',{
         layout:'button_count',
         width:'60'
     });

     // Facebook / Share' button
     $('.facebook_share').socialbutton('facebook_share', {
		button: 'button',
                text: 'シェア'
	});

    // Twitter / Tweet Button
    $('.twitter').socialbutton('twitter', {
		button: 'none',
        text: '<?php wp_title(); ?>',
        via: 'twitterアカウント名'
	});

    // mixi / mixi check
    $('.mixi').socialbutton('mixi_check', {
        key: 'キー'
    });

    // GREE / Social Feedback
    $('.gree').socialbutton('gree_sf');
    
    // はてな /
    $('.hatena').socialbutton('hatena', {
        button: 'simple'
    });

    // evernote /
    $('.evernote').socialbutton('evernote', {
        button: 'article-clipper-jp',
        styling: 'full'
    });
});
</script>
body内

body内に記述


<!--facebook いいねボタン-->
<div class="facebook"></div>

<!--facebook シェアボタン-->
<div class="facebook_share"></div>

<!--Google ブックマークボタン-->
<div class="google"><a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<?php the_permalink() ?>&title=<?php the_title(); ?>" target="_blank"><img alt="" src="http://www.google.co.jp/favicon.ico" border="0" width="20" height="20" /></a></div>

<!--Yahoo! ブックマークボタン-->
<div class="yahoo"><a href="javascript:void window.open('http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t='+encodeURIComponent(document.title)+'&u='+encodeURIComponent(location.href)+'&ei=UTF-8','_blank','width=550,height=480,left=100,top=50,scrollbars=1,resizable=1',0);"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="20" height="20" alt="Yahoo!ブックマークに登録" style="border:none;"></a></div>

<!--Yahoo! はてなブックマークボタン-->
<div class="hatena"></div>

<!--Greeボタン-->
<div class="gree"></div>

<!--Mixiチェックボタン-->
<div class="mixi"></div>

<!--Evernoteボタン-->
<div class="evernote"></div>

<!--twitterボタン-->
<div class="twitter"></div>

というかんじです。

ページトップへ