【CakePHP】ソーシャルへの共有をまとめてくれるjQuery「Sharrre」

1-shere

2012年07月04日(水)

  ソーシャルメディアへの共有をまとめてくれるjQueryを紹介します。 みなさんもソーシャルメディアへの共有ボタンを サイトに設置しているかとは思いますが、 それをまとめて表示してくれる優れものです。 結構使用頻度は高くなると思います。 とても便利なので是非使ってみてください。     画像は僕の自作サイトDEMO-TAPEに設置している様子です。 黄色のハイライト箇所ですね。 では取り掛かりましょう!!   まず、jQueryのダウンロードですね。 Sharrre – A plugin for sharing buttons http://sharrre.com/     こちらをサイトに設置します。 僕の場合は以下のように設置しました。  
<?php 
echo $this->Html->script(array(
	'jquery-1.7.2.min.js','jquery.sharrre-1.3.2.min.js'));
?>

<script>
$(function () {
    $('#shareme').sharrre({
      share: {
        googlePlus: true,
        twitter: true,
        facebook: true,
        delicious: false
      },
      buttons: {
        googlePlus: {size: 'tall'},
        twitter: {count: 'vertical'},
        facebook: {layout: 'box_count'},
        delicious: {size: 'tall'}
      },
      nableHover: false,
	  enableCounter: false,
	  enableTracking: true
    });
});	
</script>
  これで準備完了です。 以下のタグを表示させたい場所にセットするだけです。    
<div id="shareme" data-title="share" data-url="対応させたいURL" ></div>
    そんで、 そのままだとカッコ悪いと思うので、 CSSで調整しましょう!  
<style type="text/css">
  #shareme.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:400px;
  }
  .sharrre .button {
    float:left;
    max-width:50px;
    height:50px;
    margin-left:10px;
  }
</style>
  以下参考サイトになります! ありがとうございました!!   □ソーシャルメディアへの共有をまとめてくれる http://www.skuare.net/2012/02/javascriptsharrre.html     ではでは!!    

スポンサードリンク

運営サービスPR

スポンサードリンク

運営サービスPR