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

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

SNS ボタンの読み込み速度における対策として、script を </body> 直前に配置したり、非同期読み込みや、遅延読み込みがあります。非同期読み込みとは、script の読み込みが完了していなくてもレンダリングが停止しない読み込み方法です。

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>

<!-- ボタンに変換される -->
<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>

遅延読み込みとは、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 ボタンのパラメータで、ある程度カスタマイズは可能ですが、デザインを統一できるほどの柔軟性はありません。しかし、a タグのリンクからクエリーを飛ばすことで、オリジナルデザインのボタンにできます。

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

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

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

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

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

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

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

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

Twitterのツイート数を調べる

ツイッターのインフラは自社開発の "Manhattan" に移行していますが、ツイート数カウントの部分だけは、古いインフラの "Cassandra" で動作しています。ツイートの件数を新しいインフラ向けに再開発するには開発リソースを割く必要がありますが、そうすることで他の重要な機能の開発が遅れる可能性があるため、廃止を決定したそうです。そのため、従来は count.json という API でツイート数を取得できていましたが、それ以降はできなくなりました。

count.json の代替方法としては、count.jsoon というサードパーティ製の API が一般的です。登録申請方式ですが、従来と同じように API をコールするだけでカウントが取得できるようになります。

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+)/;

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

はてなブックマークはリクエスト先の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; }

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

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

#!/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;

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!
-->

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