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

ソーシャルメディアへの共有をまとめてくれる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「Sharrre」サンプル

sponsors

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

記事作成:
記事URL:

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