Pelicanで作ってるブログの各記事ページにソーシャルボタンを導入するまで． テーマに付属しているソーシャルボタンははてブボタンがデフォルトで使えなくて，無理やり入れるとレイアウトが崩れるので，プラグインで簡単に入れてみた．

基本的に前提として，このブログをセットアップした時のテーマ・設定での導入記録です．

jQuery.socialbuttonプラグインの導入

導入の手軽さから， Pinterest/Google+1/Twitter/facebookいいね/facebook Share/mixiチェック/mixiイイネ/GREEいいね/Evernote/はてブのボタンを超カンタンに作れる jQuery.socialbutton プラグインを作ったよ | アイトランス株式会社 を使ってソーシャルボタンを入れることにしました．

ページから，min版（今回はver.1.9.1）をダウンロード．

落としてきたjsファイルを，w3-personal-blog-master/static/js/内へ．
これでインストール自体は完了．

ソーシャルボタンの設置

プラグイン自体は導入出来たので，templatesのファイルをいじって実際にソーシャルボタンを設置します．

今回使っているテーマは，w3-personal-blog-master/templates/share.htmlというソーシャルボタン用のhtmlファイルが用意されていたので，こちらを編集しました．

設置に関する記述は本当に簡単で，

<script src="/theme/js/jquery.socialbutton-1.9.1.min.js" type="text/javascript"></script>

<ul class="sns-btn-list">
    <li class="hatena"></li>
    <li class="tweet"></li>
    <li class="facebook_like"></li>
</ul>

<script>
  $(function () {
      $('.tweet').socialbutton('twitter', {button: 'horizontal'});
      $('.facebook_like').socialbutton('facebook_like', {button: 'button_count'});
      $('.hatena').socialbutton('hatena');
  });
</script>

だけで済んでしまいます．

すでに，テーマの方で元々jQueryを読み込んでいるので，ここではjQueryを読んでいません．

とりあえず，facebookはいいねボタンだけにしてみた．
気分が変わったらシェアボタンもつけようかな…