みのねっとぶろぐ

■ ソーシャルボタンつけたよ

ソーシャルボタンは、外部のページの情報をSNSなどのソーシャルメディア内で共有できるようにする機能のことおよびそのために設置されるボタンのことです。

ソーシャルボタンがあるWebページに、そのソーシャルメディアのアカウントを持っているユーザーはソーシャルボタンをクリックするだけで、ソーシャルメディア内のマイページでそのWebページを紹介したり、友人・知人に教えたり、といったことができます。

それぞれのソーシャルボタンをWebページに設置することは簡単なことです。ただし、複数種類のソーシャルボタンを設置するには非常に面倒なことです。

ということで、このサイトでは、ソーシャルボタンとして、Facebookの「いいね！」ボタン、Twitterの「ツイートボタン」、mixiの「mixiチェック」、はてなブックマークを採用しました。

方法は、

1) jQueryをサイトにおく

2) jquery.socialbuttonをサイトにおく

3) 以下のようなJavaScruptを書いてサイトにおく

if ( document.getElementsByName('description')[0].getAttribute('content') ) {
    description = document.getElementsByName('description')[0].getAttribute('content')
} else {
    description = document.title;
}
$(function() {
    $('#hatena').socialbutton('hatena', {
        button: 'standard', // standard, vertical, simple
        url: document.URL,
        title: description
    });
    $('#mixi_check').socialbutton('mixi_check', {
        button: 'button-1', // button-1,button-2,button-3,button-4,button-5
        url: document.URL,
        key: 'mixiで取得'
    });
    $('#tweet').socialbutton('twitter', {
        button: 'horizontal',  // vertical / horizontal / none
        url: document.URL,
        text: description
    });
    $('#facebook_like').socialbutton('facebook_like', {
        button: 'button_count', // standard / button_count / box_count
        url: document.URL,
        show_faces: false,
    });
});

4) 以下のようなcssを書いてサイトにおく

.block { margin:5px 0; }
.block div { float:right; margin-right:5px; }
.clearfix:after {
    clear:both;
    content:".";
    display:block;
    height:0;
    visibility:hidden;
}
.clearfix { min-height:1px; }
.clear { clear:both; }

5) 以上のファイルをソーシャルボタンを設置したいページのheadタグ内から呼び出します。

   <link rel="stylesheet" type="text/css" href="〜.css">
   <script src="〜jquery-1.6.1.min.js" type="text/javascript"></script>
   <script src="〜jquery.socialbutton-1.7.3.js" type="text/javascript"></script>
   <script src="〜.js" type="text/javascript"></script>

6) ソーシャルボタンを設置したい箇所に以下を記述します。

      <div class="block clearfix">
             <div id="mixi_check"></div>
             <div id="hatena"></div>
             <div id="tweet"></div>
             <div id="facebook_like"></div>
       </div>

以上で完了です。まだ、数ページしか、設置しておりませんが、これから増やして行く予定です。見つけたら、クリックしてくださいね。お願いします。