ソーシャルメディアへの共有をまとめてくれるJavaScript「Sharrre」

Twitter、Facebook、Google+とソーシャルメディアは広がり続けています。
これへの対応のために手間を煩わせたくないものです。
そこで、Sharrre - A plugin for sharing buttonsを利用すれば合計数も表示してくれます。

使用方法

Sharrre - A plugin for sharing buttonsからファイルをダウンロード。

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.sharrre-1.2.0.js"></script>
<script>
$(function () {
    $('#id名').sharrre({
      share: {
        googlePlus: true,
        facebook: true,
        twitter: true,
        delicious: true
      },
      buttons: {
        googlePlus: {size: 'tall'},
        facebook: {layout: 'box_count'},
        twitter: {count: 'vertical'},
        delicious: {size: 'tall'}
      },
      hover: function(api, options){
        $(api.element).find('.buttons').show();      
      },
      hide: function(api, options){
        $(api.element).find('.buttons').hide();
      }
    });
});	
</script>
あとは上記idを表示させたいとこに以下のように記述すれば完成です。

<div id="id名" data-title="ラベル" data-url="対応させたいURL" ></div>
また、CSSで見た目をちょっと良くしましょう。

  <style type="text/css">
  #id名.sharrre {
    width:100%;
    display:inline-block;
  }
  }
  .sharrre .box{
    float:left;
  }
  .sharrre .count {
    color:#444444;
    display:block;
    font-size:17px;
    line-height:34px;
    height:34px;
    padding:4px 0;
    position:relative;
    text-align:center;
    text-decoration:none;
    width:50px;
    background-color:#eee;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px; 
  }
  .sharrre .share {
    color:#FFFFFF;
    display:block;
    font-size:11px;
    height:16px;
    line-height:16px;
    margin-top:3px;
    padding:0;
    text-align:center;
    text-decoration:none;
    width:50px;
    background-color:#9CCE39;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px; 
  }
  .sharrre .buttons {
    display:none;
    float:left;
    width:300px;
  }
  .sharrre .button {
    float:left;
    max-width:50px;
    height:50px;
    margin-left:10px;
  }
</style>

サンプル


Javascriptサンプルページ一覧
skuare.net