HOME
Twitter、Facebook などの色々なソーシャルボタンをWebページに設置してみましょう。また、オフィシャルのソーシャルボタンはそれぞれデザインが異なるため、オリジナルのボタンにカスタマイズする方法も紹介します。
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ページの品質を測定する指標はいくつかありますが、その指標の中にソーシャルメディアからの評価が含まれていると考えられます。そのため、多くのシェア、またはブックマークされているページは品質が良いと判断される可能性があります。
詳細は、検索エンジン最適化とは を参照して下さい。
SNS ボタンには、どれだけのユーザからシェア、ブックマークされたかを数値で表示できるタイプのものがあります。それらの数値から、どのWebページがユーザの反応が大きかったのかを知ることができます。そのため、訪問者は反応の大きいページだけを読んだり、管理者は反応の小さいページを改善したりする手がかりになります。
ただし、ページを見たユーザが SNS ボタンを押してくれるとは限りません。以下の、LukeW の調査によれば、PV に対して平均 0.25 % しか SNS ボタンはクリックされないという報告があります。
そのため、ソーシャルメディアでの拡散や、アクセスを期待しても最初は期待通りにいかないかもしれません。しかし、共有したいと思えるような良質なコンテンツを作成した場合、PV に対するクリック率は高くなるため、SNS ボタンを設置したら良質なコンテンツを作成することに集中しましょう。
SNS ボタンの種類には、大きく分けてシェア系のボタンと、ブックマーク系のボタンがあります。すべてのボタンを設置するより、それぞれのボタンの役割と作成したコンテンツと相性の良い SNS ボタンを必要な分だけ設置すると良いでしょう。
本ページでは代表的な SNS ボタンを解説していますが、その他にも LINE、mixi、GREE、Linkedin、Tumblr、pinterest、YouTube などがあります。それぞれの SNS ボタンは性質が異なるため、設置する場合はよく理解してから設置しましょう。例えば、mixi や GREE などは他の SNS ボタンと比べて年齢層が若い傾向があるため、専門性の高い技術的なコンテンツには向いていません。
自分のタイムラインに URL 付きのツイートとして反映され、鍵付きアカウントでなければ誰でも自由に閲覧できます。以下が、Twitter ボタンの例です。ボタンの大きさや、バルーンの位置などはカスタマイズ可能です。
Tweet 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 ボタンは 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 | http://murashun.jp/ | シェアする URL を指定できます。指定されたURLはどれだけシェアされたかをカウントするキーになります。省略時は、Twitter ボタンが設置された URL が指定されます。 |
data-via | murashun | ユーザアカウントを指定できます。指定した場合、投稿フォームの末尾に "@murashunさんから" と付加されます。 |
data-text | (任意) | 投稿フォームに任意のテキストを付加できます。 |
data-related | murashun | ユーザアカウントを指定できます。(複数指定する場合は":"で区切ります。) 指定した場合、ツイート後に指定ユーザアカウントのフォローを促す画面が表示されます。 |
data-count |
| ツイート数の表示有無や表示位置を指定できます。none :ツイート数を非表示horizontal :ツイート数を右に表示vertical :ツイート数を上に表示省略時は、 horizontal が指定されます。 |
data-lang | ja | 言語をアルファベット2文字で指定できます。省略時は、地域に合った言語が自動で設定されます。 |
data-size |
| ボタンの大きさを指定できます。省略時は、medium が設定されます。 |
data-hashtags | hashtag | ハッシュタグを指定できます。(複数指定する場合は","で区切ります。) 指定した場合、投稿フォームに "#hashtag" と付加されます。 |
自分の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ボタンは div
タグ内に属性を付加することで、カスタマイズが可能です。
属性名 | 属性値の例 | 属性値の説明 |
---|---|---|
data-href | http://murashun.jp/ | シェアするURLを指定できます。指定されたURLはどれだけシェアされたかをカウントするキーになります。省略時は、Facebook ボタンが設置されたURLが指定されます。 |
data-layout |
| シェア数の表示有無、または表示位置を指定できます。box_count :シェア数を上に表示button_count :シェア数を右に表示button :ボタンのみ表示icon_link :アイコンとリンクを表示icon :アイコンのみ表示link :リンクのみ表示省略時は、 icon_link が指定されます。 |
自分のはてなブックマークに登録され、公開・非公開を選択できます。また、他の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
タグ内に属性を付加することで、カスタマイズが可能です。
属性名 | 属性値の例 | 属性値の説明 |
---|---|---|
href | http://murashun.jp/ | ブックマークするURLを指定できます。指定されたURLはどれだけブックマークされたかをカウントするキーになります。 |
hatena-bookmark-title | (任意) | ブックマーク時にエントリーされるタイトルを指定します。 |
hatena-bookmark-layout |
| ブックマーク数の表示有無、または表示位置を指定できます。simple :ブックマーク数を非表示simple-balloon :ブックマーク数を右に表示standard-balloon :ブックマーク数を右に表示vertical-balloon :ブックマーク数を上に表示 |
hatena-bookmark-lang |
| 言語をアルファベット2文字で指定できます。ja :日本語で表示en :英語で表示 |
自分のpocketブックマークに登録されます。気になるページを後で読むために一時的にクリップするためのサービスです。ただし、pocketボタンは他の SNS ボタンと異なり、クリックした瞬間にブックマークを追加する仕様になっています。最初からブックマーク目的でクリックする分には問題ありませんが、誤ってクリックした場合などは驚かれるかもしれません。
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 ボタンは a
タグ内に属性を付加することで、カスタマイズが可能です。
属性名 | 属性値の例 | 属性値の説明 |
---|---|---|
data-save-url | http://murashun.jp/ | ブックマークするURLを指定できます。指定されたURLはどれだけブックマークされたかをカウントするキーになります。 |
data-pocket-count |
| ブックマーク数の表示有無、または表示位置を指定できます。none :ブックマーク数を非表示horizontal :ブックマーク数を右に表示vertical :ブックマーク数を上に表示省略時は、 none が指定されます。 |
data-pocket-align |
| ボタンの位置を指定できます。left :ボタンを左寄せにするright :ボタンを右寄せにする省略時は、 left が指定されます。 |
SNS ボタンを設置する問題点として、読み込み表示速度が遅い、デザインが統一されていないなどが挙げられます。また、シェア数、ブックマーク数を表示している場合、多くのカウント数を獲得できている場合は問題ありませんが、何もカウントされていない場合は、人気のない記事であることが伝わります。人気のない記事は、面白くない記事だと思われる可能性があります。Web サイトに訪問するユーザは、カウント数が獲得できていない記事より、多くのカウント数を獲得している記事を優先して読みたくなる心理 (社会的証明) が働きます。そのため、ある程度人気が出るまではカウント数を非表示にすることも検討して下さい。
カウント数の問題はユーザ次第なので良質なコンテンツを作る以外に方法はありませんが、読み込み速度の問題とデザインが統一されていない問題は解決できます。それぞれの問題点は、次章より詳しく説明します。
SNS ボタンの読み込み速度は一定ではありませんが、およそ 2 ~ 3 秒ほどかかります。Web パフォーマンスのレポートによれば、操作開始時間が 2 秒遅いと直帰率が 50 % も増加するデータがあります。SNS ボタンの読み込み速度が遅い原因は、script タグの埋め込みや、通信のリクエスト回数が増えることが要因であると考えられます。
script タグをページ内に埋め込むと、script の命令によっては実行が完了するまでレンダリングが停止します。そのため、script タグがページの冒頭にある場合は、以降のレンダリングが停止するため、ユーザは script が完了するまで空白のページのまま待たされることになります。
通信のリクエスト回数は、SNS ボタンを設置することで専用の script や画像をロードするために、外部サーバと通信を行うために増大します。1 回のリクエストにかかるコストは小さいですが、多くなると速度の低下に繋がります。
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 ボタンはサイズや、バルーンの形も微妙に異なります。そのため、SNS ボタンを並べた際に幅や高さに統一感がなく、見た目が美しくありません。以下は、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 の末尾に ?
を付けます。そして、パラメータ名と値を設定します。パラメータ名と値の間には =
を付けます。また、複数のパラメータ名を指定する場合は、&
を付けて区切ります。日本語もパーセントエンコードすることで指定が可能です。
url
、via
、text
、related
、hashtags
<!-- Twitter ボタンをオリジナルのデザインにカスタマイズする -->
<a href="https://twitter.com/share?url=[URL]&text=[テキスト]">
<!-- ここに任意のテキストや画像を配置する -->
Twitterでシェアする
</a>
u
<!-- Facebook ボタンをオリジナルのデザインにカスタマイズする -->
<a href="http://www.facebook.com/sharer.php?u=[URL]">
<!-- ここに任意のテキストや画像を配置する -->
Facebookでシェアする
</a>
url
<!-- はてなブックマークボタンをオリジナルのデザインにカスタマイズする -->
<a href="http://b.hatena.ne.jp/add?url=[URL]">
<!-- ここに任意のテキストや画像を配置する -->
はてなブックマークにブックマークする
</a>
url
<!-- pocket ボタンをオリジナルのデザインにカスタマイズする -->
<a href="http://getpocket.com/edit?url=[URL]">
<!-- ここに任意のテキストや画像を配置する -->
pocket にブックマークする
</a>
オリジナルのデザインにした場合、シェア数が表示できないという問題点があります。シェア数の表示が非表示のままで良いという場合は問題ありませんが、表示させたいという場合はプログラムを組む必要があります。プログラム言語は何でも構いませんが、一部の SNS では "スクレイピング" と呼ばれる方法で情報を切り出す必要があります。以降は Perl でシェア数を切り出す方法を解説します。
ツイッターのインフラは自社開発の "Manhattan" に移行していますが、ツイート数カウントの部分だけは、古いインフラの "Cassandra" で動作しています。ツイートの件数を新しいインフラ向けに再開発するには開発リソースを割く必要がありますが、そうすることで他の重要な機能の開発が遅れる可能性があるため、廃止を決定したそうです。そのため、従来は count.json という API でツイート数を取得できていましたが、それ以降はできなくなりました。
count.json の代替方法としては、count.jsoon というサードパーティ製の API が一般的です。登録申請方式ですが、従来と同じように API をコールするだけでカウントが取得できるようになります。
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 にはリクエストを投げてデータを取得するインターフェースは用意されていません。そのためスクレイピングを行いブックマーク数だけを取り出します。
#!/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!
-->
上記のコメントを訳すと、返却されるデータは予期せず仕様変更される可能性があるため、スクレイピングしないで下さいとあります。上述の通り、スクレイピングは方法としては邪道であるため、推奨はできません。
シェア系を3種類、ブックマーク系を2種類紹介しましたが、SNS ボタンはその他にもありますが、設置率の高い代表的なボタンに絞って解説しました。すべての SNS ボタンを設置すれば良いというわけではないので、自分のWebサイトに合った SNS ボタンだけを設置すると良いでしょう。