SNSボタンの設置とカスタマイズ方法

公開日:
更新日:
0Webデザイン

SNSボタンとは

SNS ボタン(または、ソーシャルボタン)とは、ブログやニュースサイトに設置されているボタン型のインターフェースです。ユーザが SNS ボタンをクリックすると、記事をシェアしたり、ブックマークすることができます。代表的な SNS ボタンとしては、Twitter や Facebook の SNS ボタンがあります。


SNSボタンを設置するメリットはアクセス向上検索エンジン最適化評価の可視化があります。これらのメリットは次章で詳しく説明します。


SNS ボタンは、簡単な HTML と Javascript のコードを貼り付けるだけで設置することができます。コードは、ソーシャルメディアの公式 Web サイトから取得することができます。


以下は、代表的な SNS ボタンを設置した例です。


ソーシャルメディアからのアクセス向上

ソーシャルメディアにWebページを露出させることで、ソーシャルメディアからのアクセスが向上する可能性があります。Twitter や Facebook などで多くのフォロワーを持つユーザにシェアされると、大幅にアクセスが向上します。また、はてなブックマークでも短時間にブックマークされた数が伸びると、カテゴリ別のトップページに紹介されるため、大幅にアクセスが向上します。


統計データによると、最もクリックされるボタンは Twitter ボタンで全体の 42.9 % を占めており、ソーシャルメディアからの流入も Twitter が 93.6 % も占めています。


ソーシャルボタン分析レポート

そのため、SNS ボタンは色々な種類がありますが、Twitter のボタンは優先的に設置した方が良いと言えます。また、Twitter をやっていないという方は、これを機会に始めてみるのもいいかもしれません。


ただし、ソーシャルメディアからのアクセスだけを狙ってコンテンツが置き去りにならないように注意して下さい。一番大切なことは良質なコンテンツを作ることですが、良質なコンテンツを広く知ってもらうために SEO の外部対策も併せて実施しましょう。

検索エンジンからの評価の向上

検索エンジンは、質の良いWebページを上位に表示させます。Webページの品質を測定する指標はいくつかありますが、その指標の中にソーシャルメディアからの評価が含まれていると考えられます。そのため、多くのシェア、またはブックマークされているページは品質が良いと判断される可能性があります。


詳細は、Google 検索エンジン最適化手法 を参照して下さい。

客観的評価の可視化

SNSボタンには、どれだけのユーザからシェア、ブックマークされたかを数値で表示できるタイプのものがあります。それらの数値から、どのWebページがユーザの反応が大きかったのかを知ることができます。そのため、訪問者は反応の大きいページだけを読んだり、管理者は反応の小さいページを改善したりする手がかりになります。


ただし、ページを見たユーザが SNS ボタンを押してくれるとは限りません。以下の、LukeW の調査によれば、PV に対して平均 0.25 % しか SNS ボタンはクリックされないという報告があります。


LukeW | Data Monday: What Percent of Page Views Share on Social Media?

そのため、ソーシャルメディアでの拡散や、アクセスを期待しても最初は期待通りにいかないかもしれません。しかし、共有したいと思えるような良質なコンテンツを作成した場合、PV に対するクリック率は高くなるため、SNS ボタンを設置したら良質なコンテンツを作成することに集中しましょう。

SNSボタンの種類

SNS ボタンの種類には、大きく分けてシェア系のボタンと、ブックマーク系のボタンがあります。すべてのボタンを設置するより、それぞれのボタンの役割と作成したコンテンツと相性の良い SNS ボタンを必要な分だけ設置すると良いでしょう。


本ページでは代表的な 5 つの SNS ボタンを解説していますが、その他にも LINE、mixi、GREE、Linkedin、Tumblr、pinterest、YouTube などがあります。それぞれの SNS ボタンは性質が異なるため、設置する場合はよく理解してから設置しましょう。例えば、mixi や GREE などは他の SNSボタンと比べて年齢層が若い傾向があるため、専門性の高い技術的なコンテンツには向いていません。

Twitterボタン

自分のタイムラインに URL 付きのツイートとして反映され、鍵付きアカウントでなければ誰でも自由に閲覧することができます。以下が、Twitter ボタンの例です。ボタンの大きさや、バルーンの位置などはカスタマイズ可能です。




Twitter ボタン

Twitter ボタンを設置するには、上記のリンクからコードを取得して HTML 内に貼り付けることで設置します。取得したコードの a タグ内に書かれた "Tweet" が、後続の JavaScript によって Twitter ボタンに変わります。JavaScript が何らかの理由により読み込まれなかった場合は、ボタンに変換されず文字列として "Tweet" と表示されます。


<!-- ボタンに変換される -->
<a href="https://twitter.com/share"
   class="twitter-share-button">Tweet</a>

<!-- headタグ内部または、bodyタグの終了直前に配置することを推奨 -->
<script>
  ・・・(省略)・・・
</script>
 Twitterボタンを設置するサンプルコード

Twitter ボタンは a タグ内に "属性" と "属性値" を付加することで、カスタマイズが可能です。下記のサンプルコードでは、属性名 "data-url" に 属性値 "https://murashun.jp/" を付加した例になります。


<!-- ボタンに変換される -->
<a href="https://twitter.com/share"
   class="twitter-share-button"
   data-url="https://murashun.jp/">Tweet</a>

<!-- headタグ内部または、bodyタグの終了直前に配置することを推奨 -->
<script>
  ・・・(省略)・・・
</script>
 data-url属性を付加したサンプルコード

Twitter ボタンのパラメータ一覧
属性名属性値の例属性値の説明
data-urlhttp://murashun.jp/シェアするURLを指定することが出来ます。指定されたURLはどれだけシェアされたかをカウントするキーになります。省略時は、Twitterボタンが設置されたURLが指定されます。
data-viamurashunユーザアカウントを指定することが出来ます。指定した場合、投稿フォームの末尾に "@murashunさんから" と付加されます。
data-text(任意)投稿フォームに任意のテキストを付加することが出来ます。
data-relatedmurashunユーザアカウントを指定することが出来ます。(複数指定する場合は":"で区切ります。)指定した場合、ツイート後に指定ユーザアカウントのフォローを促す画面が表示されます。
data-count
  • none
  • horizontal
  • vertical
ツイート数の表示有無、または表示位置を指定できます。"none": ツイート数を非表示
"horizontal": ツイート数を右に表示
"vertical": ツイート数を上に表示
省略時は、"horizontal" が指定されます。
data-langja言語をアルファベット2文字で指定することが出来ます。省略時は、地域に合った言語が自動で設定されます。
data-size
  • medium
  • large
ボタンの大きさを指定することが出来ます。省略時は、medium が設定されます。
data-hashtagshashtagハッシュタグを指定することが出来ます。(複数指定する場合は","で区切ります。)指定した場合、投稿フォームに "#hashtag" と付加されます。

Facebookボタン

自分のFacebookタイムラインにアクティビティとして反映され、公開する範囲を設定することができます。




Facebookボタン

Facebookボタンを設置するには、上記のリンクからコードを取得してHTML内に貼り付けることで設置します。取得したコードの div タグが、後続のJavaScriptによってシェアボタンに変わります。


<!-- ボタンに変換される -->
<div class="fb-share-button"
     data-href="https://murashun.jp/"
     data-layout="button_count"></div>

<!-- headタグ内部または、bodyタグの終了直前に配置することを推奨 -->
<div id="fb-root"></div>
<script>
  ・・・(省略)・・・
</script>
 Facebookボタンを設置するサンプルコード

Facebookボタンは div タグ内に属性を付加することで、カスタマイズが可能です。

Facebookボタンのパラメータ一覧
属性名属性値の例属性値の説明
data-hrefhttp://murashun.jp/シェアするURLを指定することが出来ます。指定されたURLはどれだけシェアされたかをカウントするキーになります。省略時は、Facebookボタンが設置されたURLが指定されます。
data-layout
  • box_count
  • button_count
  • button
  • icon_link
  • icon
  • link
シェア数の表示有無、または表示位置を指定できます。
"box_count": シェア数を上に表示
"button_count": シェア数を右に表示
"button": シェア数を非表示(ボタンのみ)
"icon_link": シェア数を非表示(アイコン+リンク)
"icon": シェア数を非表示(アイコンのみ)
"link": シェア数を非表示(リンクのみ)
省略時は、"icon_link" が指定されます。

Google+ボタン

自分のGoogle+タイムラインに反映され、公開する範囲を設定することができます。




Google+ボタン

Google+ボタンを設置するには、上記のリンクからコードを取得してHTML内に貼り付けることで設置します。取得したコードの div タグが、後続のJavaScriptによって +1 ボタンに変わります。


<!-- ボタンに変換される -->
<div class="g-plusone" 
     data-href="https://murashun.jp/"></div>

<!-- headタグ内部または、bodyタグの終了直前に配置することを推奨 -->
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'ja'}
</script>
 Google+ボタンを設置するサンプルコード

Google+ボタンは div タグ内に属性を付加することで、カスタマイズが可能です。

Google+ボタンのパラメータ一覧
属性名属性値の例属性値の説明
data-hrefhttp://murashun.jp/シェアするURLを指定することが出来ます。指定されたURLはどれだけシェアされたかをカウントするキーになります。省略時は、Google+ボタンが設置されたURLが指定されます。
data-size
  • small
  • medium
  • standard
  • tall
ボタンのサイズ※1を指定できます。
"small": 幅 24 px × 高さ 15 px
"medium": 幅 32 px × 高さ 20 px
"standard": 幅 38 px × 高さ 24 px
"tall": 幅 50 px × 高さ 20 px
省略時は、"standard" が指定されます。また、"tall" を指定した場合、バルーンがボタンの上に表示されます。
data-
annotation
  • none
  • bubble
  • inline
ボタンの横に表示する +1 情報の表示有無を指定できます。
"none": +1 情報を非表示
"bubble": +1 情報の数を表示
"inline": +1 情報の数とユーザの画像を表示
省略時は、"bubble" が指定されます。
data-width250data-annotation"inline" に設定した場合、幅をpx単位で設定できます。省略時は、450pxが指定されます。
data-align
  • left
  • right
ボタンの位置を指定できます。
"left": ボタンを左寄せにする
"right": ボタンを右寄せにする
省略時は、"left" が指定されます。
data-expandTo
  • top
  • right
  • bottom
  • left
マウスを重ねた時のバルーンが表示される位置を指定できます。
"top": ボタンの上にバルーンを表示
"right": ボタンの右にバルーンを表示
"bottom": ボタンの下にバルーンを表示
"left": ボタンの左にバルーンを表示
省略時は、最適な位置を自動で指定されます。
data-callback関数名を指定できます。指定した場合、ボタンをクリックしたタイミングで、指定された関数が実行されます。
data-onstart
interaction
関数名を指定できます。指定した場合、マウスをボタンに重ねてバルーンが表示されたタイミングで、指定された関数が実行されます。
data-onend
interaction
関数名を指定できます。指定した場合、バルーンが閉じたタイミングで、指定された関数が実行されます。
data-recommendations
  • true
  • false
バルーン内におすすめの表示有無を指定できます。
"true": おすすめを表示する
"false": おすすめを表示しない
省略時は、"false" が指定されます。

はてなブックマークボタン

自分のはてなブックマークに登録され、公開・非公開を選択できます。また、他のSNSと連携することも可能です。


このエントリーをはてなブックマークに追加

はてなブックマークボタン

はてなブックマークボタンを設置するには、上記のリンクからコードを取得してHTML内に貼り付けることで設置します。取得したコードの a タグが、後続のJavaScriptによってブックマークボタンに変わります。


<!-- ボタンに変換される -->
<a href="http://b.hatena.ne.jp/entry/https://murashun.jp/" 
   class="hatena-bookmark-button"
   data-hatena-bookmark-layout="standard-balloon"
   data-hatena-bookmark-lang="ja"
   title="このエントリーをはてなブックマークに追加">
<img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" 
     alt="このエントリーをはてなブックマークに追加"
     width="20"
     height="20"
     style="border: none;" /></a>

<!-- headタグ内部または、bodyタグの終了直前に配置することを推奨 -->
<script>
  ・・・(省略)・・・
</script>
 はてなブックマークボタンを設置するサンプルコード

はてなブックマークボタンは a タグ内に属性を付加することで、カスタマイズが可能です。

はてなブックマークボタンのパラメータ一覧
属性名属性値の例属性値の説明
hrefhttp://murashun.jp/ブックマークするURLを指定することが出来ます。指定されたURLはどれだけブックマークされたかをカウントするキーになります。
hatena-bookmark-title(任意)ブックマーク時にエントリーされるタイトルを指定します。
hatena-bookmark-layout
  • simple
  • simple-balloon
  • standard-balloon
  • vertical-balloon
ブックマーク数の表示有無、または表示位置を指定できます。
"simple": ブックマーク数を非表示
"simple-balloon": ブックマーク数を右に表示
"standard-balloon": ブックマーク数を右に表示
"vertical-balloon": ブックマーク数を上に表示
hatena-bookmark-lang
  • ja
  • en
言語をアルファベット2文字で指定することが出来ます。
"ja": 日本語で表示
"en": 英語で表示

pocketボタン

自分のpocketブックマークに登録されます。気になるページを後で読むために一時的にクリップするためのサービスです。ただし、pocketボタンは他の SNS ボタンと異なり、クリックした瞬間にブックマークを追加する仕様になっています。最初からブックマーク目的でクリックする分には問題ありませんが、誤ってクリックした場合などは驚かれるかもしれません。



Pocket Button
Pocket Button Documentation

pocket ボタンを設置するには、上記のリンクからコードを取得してHTML内に貼り付けることで設置します。取得したコードの a タグが、後続のJavaScriptによってブックマークボタンに変わります。


<!-- ボタンに変換される -->
<a class="pocket-btn"
   data-pocket-label="pocket"
   data-pocket-count="horizontal"
   data-lang="en"></a>

<!-- headタグ内部または、bodyタグの終了直前に配置することを推奨 -->
<script>
  ・・・(省略)・・・
</script>
 pocket ボタンを設置するサンプルコード

pocket ボタンは a タグ内に属性を付加することで、カスタマイズが可能です。

はてなブックマークボタンのパラメータ一覧
属性名属性値の例属性値の説明
data-save-urlhttp://murashun.jp/ブックマークするURLを指定することが出来ます。指定されたURLはどれだけブックマークされたかをカウントするキーになります。
data-pocket-count
  • none
  • horizontal
  • vertical
ブックマーク数の表示有無、または表示位置を指定できます。
"none": ブックマーク数を非表示
"horizontal": ブックマーク数を右に表示
"vertical": ブックマーク数を上に表示
省略時は、"none" が指定されます。
data-pocket-align
  • left
  • right
ボタンの位置を指定できます。
"left": ボタンを左寄せにする
"right": ボタンを右寄せにする
省略時は、"left" が指定されます。

SNSボタンを設置する問題点

SNSボタンを設置する問題点として、読み込み表示速度が遅いデザインが統一されていないなどが挙げられます。また、シェア数、ブックマーク数を表示している場合、多くのカウント数を獲得できている場合は問題ありませんが、何もカウントされていない場合は、人気のない記事であることが伝わります。人気のない記事は、面白くない記事だと思われる可能性があります。Web サイトに訪問するユーザは、カウント数が獲得できていない記事より、多くのカウント数を獲得している記事を優先して読みたくなる心理 (社会的証明) が働きます。そのため、ある程度人気が出るまではカウント数を非表示にすることも検討して下さい。


カウント数の問題はユーザ次第なので良質なコンテンツを作る以外に方法はありませんが、読み込み速度の問題とデザインが統一されていない問題は解決することができます。それぞれの問題点は、次章より詳しく説明します。

SNSボタンの読み込み速度

SNS ボタンの読み込み速度は一定ではありませんが、およそ 2 ~ 3 秒ほどかかります。Web パフォーマンスのレポートによれば、操作開始時間が 2 秒遅いと直帰率が 50 % も増加するデータがあります。SNS ボタンの読み込み速度が遅い原因は、script タグの埋め込みや、通信のリクエスト回数が増えることが要因であると考えられます。


script タグをページ内に埋め込むと、script の命令によっては実行が完了するまでレンダリングが停止します。そのため、script タグがページの冒頭にある場合は、以降のレンダリングが停止するため、ユーザは script が完了するまで空白のページのまま待たされることになります。


通信のリクエスト回数は、SNS ボタンを設置することで専用の script や画像をロードするために、外部サーバと通信を行うために増大します。1 回のリクエストにかかるコストは小さいですが、多くなると速度の低下に繋がります。

SNSボタンの読み込み速度における対策

SNSボタンの読み込み速度における対策として、script を </body> 直前に配置したり、非同期読み込みや、遅延読み込みがあります。


非同期読み込みとは、script の読み込みが完了していなくてもレンダリングが停止しない読み込み方法です。Twitter や Facebook は同期読み込みになっていますが、Google+ は最初から非同期読み込みになっており、各ソーシャルボタンでも差があるため注意が必要です。


script を非同期化するためには、適切な場所に js.async=true; を追記します。下記のサンプルコードは、Twitter と Facebook の例です。


<!-- ボタンに変換される -->
<a href="https://twitter.com/share"
   class="twitter-share-button">Tweet</a>

<!-- headタグ内部または、bodyタグの終了直前に配置することを推奨 -->
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
 Twitterボタンを非同期化するためのサンプルコード

<!-- ボタンに変換される -->
<div class="fb-share-button"
     data-href="https://murashun.jp/"
     data-layout="button_count"></div>

<!-- headタグ内部または、bodyタグの終了直前に配置することを推奨 -->
<div id="fb-root"></div>
<script>
(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)) return;js=d.createElement(s);js.id=id;js.async=true;js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.3&appId=655546001226718";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));
</script>
 Facebookボタンを非同期化するためのサンプルコード

遅延読み込みとは、script の読み込みを遅延させてレンダリングを優先させる読み込み方法です。遅延読み込みを行うには、setTimeout() と Jquery を使って実装します。


<!-- 後続のscriptでココにSNSボタンのコードを追加する -->
<div id="snsbutton"></div>

<script>
  var snscode = 'SNSから取得したコードを貼り付ける';

  // 3 秒後に上記のコードを snsbutton に追加する
  setTimeout(function(){
    $('#snsbutton').append(snscode);
  }, 3000);
</script>
 遅延読み込みを行うサンプルコード

setTimeout() を使用することで、任意の時間経過後に script を実行することが出来ます。上記のサンプルコードでは、3 秒後に snscode を snsbutton に追加することで遅延読み込みを実装しています。SNS コードを貼り付ける際は、文字をエスケープしなければならないことに注意して下さい。

デザインの統一性

各 SNS ボタンはサイズや、バルーンの形も微妙に異なります。そのため、SNS ボタンを並べた際に幅や高さに統一感がなく、見た目が美しくありません。以下は、SNS ボタンをオリジナルのデザインにカスタマイズする方法を説明します。

デザインの統一性における対策

各SNSボタンのパラメータで、ある程度カスタマイズは可能ですが、デザインを統一できるほどの柔軟性はありません。しかし、a タグのリンクからクエリーを飛ばすことで、オリジナルデザインのボタンにすることが出来ます。


<!-- Twitter公式のボタンを使わずにオリジナルのデザインにする -->
<a href="https://twitter.com/share?url=http%3a%2f%2fmurashun%2ejp">
Twitterでシェアする
</a>
 Twitter 公式のボタンを使わずにオリジナルのデザインにするサンプルコード

上記のように、a タグ内にテキストや、画像を使うことでオリジナルのボタンにすることが出来ます。また、リンクの URL にはパラメータを付与することでカスタマイズすることが出来ます。上記の例では、リンクの末尾を ? で区切り、シェアする URL を設定する url パラメータを設定しています。ただし、URL には使用可能な文字が決められているため、"パーセントエンコーディング" と呼ばれるエンコード方法で一部の文字をエスケープしています。下記の例では、例えば "http://""http%3a%2f%2f" にパーセントエンコーディングされています。


<!-- URLにパラメータを付与する場合は ? と & を使う -->
<a href="https://xxx.com/xxx?url=[URL]&text=[テキスト]">
Twitterでシェアする
</a>
 URLにパラメータを付与するサンプル

上記のように、URL にパラメータを付与する場合は、クエリーを飛ばす URL の末尾に ? を付けます。そして、パラメータ名と値を設定します。パラメータ名と値の間には = を付けます。また、複数のパラメータ名を指定する場合は、& を付けて区切ります。日本語もパーセントエンコードすることで指定が可能です。


Twitterのクエリ先https://twitter.com/share
使用可能なクエリパラメータurlviatextrelatedhashtags

<!-- Twitter ボタンをオリジナルのデザインにカスタマイズする -->
<a href="https://twitter.com/share?url=[URL]&text=[テキスト]">
<!-- ここに任意のテキストや画像を配置する -->
Twitterでシェアする
</a>
 Twitter ボタンをオリジナルのデザインにカスタマイズするサンプル


Facebookのクエリ先http://www.facebook.com/sharer.php
使用可能なクエリパラメータu

<!-- Facebook ボタンをオリジナルのデザインにカスタマイズする -->
<a href="http://www.facebook.com/sharer.php?u=[URL]">
<!-- ここに任意のテキストや画像を配置する -->
Facebookでシェアする
</a>
 Facebook ボタンをオリジナルのデザインにカスタマイズするサンプル

Google+のクエリ先https://plus.google.com/share
使用可能なクエリパラメータurl

<!-- Google+ ボタンをオリジナルのデザインにカスタマイズする -->
<a href="https://plus.google.com/share?url=[URL]">
<!-- ここに任意のテキストや画像を配置する -->
Google+でシェアする
</a>
 Google+ ボタンをオリジナルのデザインにカスタマイズするサンプル


はてなブックマークのクエリ先http://b.hatena.ne.jp/add
使用可能なクエリパラメータurl

<!-- はてなブックマークボタンをオリジナルのデザインにカスタマイズする -->
<a href="http://b.hatena.ne.jp/add?url=[URL]">
<!-- ここに任意のテキストや画像を配置する -->
はてなブックマークにブックマークする
</a>
 はてなブックマークボタンをオリジナルのデザインにカスタマイズするサンプル


pocketのクエリ先http://getpocket.com/edit
使用可能なクエリパラメータurl

<!-- pocket ボタンをオリジナルのデザインにカスタマイズする -->
<a href="http://getpocket.com/edit?url=[URL]">
<!-- ここに任意のテキストや画像を配置する -->
pocket にブックマークする
</a>
 pocket ボタンをオリジナルのデザインにカスタマイズするサンプル

オリジナルデザインにおけるシェア数の表示

オリジナルのデザインにした場合、シェア数が表示できないという問題点があります。シェア数の表示が非表示のままで良いという場合は問題ありませんが、表示させたいという場合はプログラムを組む必要があります。プログラム言語は何でも構いませんが、一部の SNS では "スクレイピング" と呼ばれる方法で情報を切り出す必要があります。以降は Perl でシェア数を切り出す方法を解説します。

Twitterのツイート数を調べる

Twitter のツイート数を調べるには、リクエスト先の URL に、調べる対象の URL を付与します。そうすると、JSON形式と呼ばれるシンプルなデータ構造で、データが返却されます。それらのデータから必要な部分だけを切り取ることでツイート数を取得できます。


ただし、下記のコード (count.json) は 2015 年 11 月 20 日からは使用できません。 ツイッターのインフラは自社開発の "Manhattan" に移行していますが、ツイート数カウントの部分だけは、古いインフラの "Cassandra" で動作しています。ツイートの件数を新しいインフラ向けに再開発するには開発リソースを割く必要がありますが、そうすることで他の重要な機能の開発が遅れる可能性があるため、廃止を決定したそうです。


持続的なプラットフォームのための難しい決断

ツイッターボタンのデザインも刷新され、新しいツイートボタンにはツイート数の表示がなくなります。公式のツイートボタンを使わずデザインをカスタマイズし、count.json を使ってツイート数を取得している Web サイトは何らかの対応が必要になります。ただし、count.json の代替方法は今のところ存在しません。


#!/usr/bin/perl

use LWP::UserAgent;
my $ua = LWP::UserAgent->new;

# リクエスト先のURL
my $reqURL = 'http://urls.api.twitter.com/1/urls/count.json?url=';

# ツイート数を調べるURL
my $url = 'https://murashun.jp/';

# リクエストを投げる
my $req = HTTP::Request->new(GET => $reqURL . $url);
my $res = $ua->simple_request($req)->content;

# 下記のようにJSON形式でデータが返ってくる
# {
#     "count": 2,
#     "url": "https://murashun.jp/"
# }

# countの数字だけを切り出す
$res =~ /"count":(\d+)/;
 ツイート数を Perl で調べるサンプルコード

Facebookのシェア数を調べる

Facebook のシェア数を調べるには、FQL(Facebook Query Language)と呼ばれるクエリーを使用します。リクエストの URL の一部に FQL が使用されていますが、基本的には Twitter と同様に、シェア数を調べる URL を付与します。URL を " で囲んでいることに注意して下さい。


#!/usr/bin/perl

use LWP::UserAgent;
my $ua = LWP::UserAgent->new;

# リクエスト先のURL
my $reqURL = 'https://api.facebook.com/method/fql.query?format=json&query=select share_count from link_stat where url=';

# シェア数を調べるURL
my $url = 'https://murashun.jp/';

# リクエストを投げる
my $req = HTTP::Request->new(GET => $reqURL . '"' . $url . '"');
my $res = $ua->simple_request($req)->content;

# 下記のようにJSON形式でデータが返ってくる
# {
#     "share_count":0
# }

# share_countの数字だけを切り出す
$res =~ /"share_count":(\d+)/;
 シェア数を Perl で調べるサンプルコード

Google+のシェア数を調べる

Google+ のシェア数を調べるには、"スクレイピング" を行う必要があります。Google+ の場合はリクエストを投げてデータを取得するインターフェースは用意されていません。そのため、方法としては邪道ですが、公式の Google+ ボタンが取得するデータからシェア数をカウントしている数値部分をスクレイピングすることで実装します。


#!/usr/bin/perl

use LWP::UserAgent;
my $ua = LWP::UserAgent->new;

# リクエスト先のURL
my $reqURL = 'https://apis.google.com/_/+1/fastbutton?url=';

# シェア数を調べるURL
my $url = 'https://murashun.jp/';

# リクエストを投げる
my $req = HTTP::Request->new(GET => $reqURL . $url);
my $res = $ua->simple_request($req)->content;

# 下記のようにHTML形式でデータが返ってくる
# <!DOCTYPE html>
# ・・・ (中略) ・・・
# </html>

# スクレイピングによりシェア数の数値だけを切り出す
$res =~ /\[2,(\d+),\[/;
my $count = $1;
 シェア数を Perl で調べるサンプルコード

はてなブックマークのブックマーク数を調べる

はてなブックマークはリクエスト先のURLに、調べる対象のURLを付与します。そうすると、カウント数のみのデータが返却されます。JSON形式のデータ構造でないことと、ブックマーク数が0の場合は空データを返す点について注意して下さい。


#!/usr/bin/perl

use LWP::UserAgent;
my $ua = LWP::UserAgent->new;

# リクエスト先のURL
my $reqURL = 'http://api.b.st-hatena.com/entry.count?url=';

# シェア数を調べるURL
my $url = 'https://murashun.jp/';

# リクエストを投げる
my $req = HTTP::Request->new(GET => $reqURL . $url);
my $res = $ua->simple_request($req)->content;

# 空データの場合は 0 を設定する
if($res eq ""){ $res = 0; }
 ブックマーク数を Perl で調べるサンプルコード

pocketのブックマーク数を調べる

pocket も Google+ と同じようにリクエストを投げてデータを取得するインターフェースは用意されていません。そのためスクレイピングを行いブックマーク数だけを取り出します。


#!/usr/bin/perl

use LWP::UserAgent;
my $ua = LWP::UserAgent->new;

# リクエスト先のURL
my $reqURL = 'https://widgets.getpocket.com/v1/button?label=pocket&count=vertical&align=left&v=1&url=';

# シェア数を調べるURL
my $url = 'https://murashun.jp/';

# リクエストを投げる
my $req = HTTP::Request->new(GET => $reqURL . $url);
my $res = $ua->simple_request($req)->content;

# 下記のようにHTML形式でデータが返ってくる
# <!html>
# ・・・ (中略) ・・・
# </html>

# スクレイピングによりブックマーク数の数値だけを切り出す
$res =~ /id="cnt">(\d+)/;
my $count = $1;
 ブックマーク数を Perl で調べるサンプルコード

pocketから返ってくるHTMLの中には以下のコメントが含まれています。


<!--
    Please do not scrape this for the Pocket count. 
    It is not relible for you to use and will likely change. 
    Contact us at api@getpocket.com for an official API. 
    Thanks! 
-->
 pocketから返ってくるHTML内にあるコメント

上記のコメントを訳すと、返却されるデータは予期せず仕様変更される可能性があるため、スクレイピングしないで下さいとあります。上述の通り、スクレイピングは方法としては邪道であるため、推奨は出来ません。

まとめ

シェア系を3種類、ブックマーク系を2種類紹介しましたが、SNSボタンはその他にもありますが、設置率の高い代表的なボタンに絞って解説しました。すべてのSNSボタンを設置すれば良いというわけではないので、自分のWebサイトに合ったSNSボタンだけを設置すると良いでしょう。