MD-Blog_Web Creative

Webサイト制作において、ソーシャルボタン（Facebookの「いいね！」やTwitterのツイートボタンなど）の設置はもはや当たり前になっているとは思いますが、ここで今一度おさらいしてみたいと思います。

ソーシャルボタンのメリット

• FacebookやTwitterなどの口コミを利用してサイトを手軽にアピールできる
  
• サイトに対するユーザーの反応を知ることができる
  
• 手軽に設置でき、ユーザーへのハードルが低い
  
• SEO対策としても効果的

ソーシャルボタンを設置する際は、ただボタンを置くだけではなく、ユーザーがわかりやすい場所に形や余白を考慮してページデザインを考える必要があります。

推奨は公式のソーシャルボタン

ユーザーがWebサイトに訪れたときに、すぐにソーシャルボタンだと認識出来るのはやはり公式のソーシャルボタンだと思います。

デザイン性だけを考えると様々なライブラリがあったりもするのですが、デザイン性が高いボタンが必ずしも押されるとは限りません。ソーシャルボタンは手軽にデザインをカスタマイズをすることが出来ますが、各サービスの仕様が変わってないか、利用規約に沿ったデザインになっているか、必ず確認する必要があります。

複数のボタンをまとめて設置してくれるライブラリや外部サービスもありますが、「最新の仕様に対応しているのか？」「サービス終了の可能性は？」などを考慮すると、公式のボタンを採用したほうが安全に思えます。何よりユーザーにとって分かりやすく、サイト運用上のリスクを減らすことが出来るからです。

設置時に気を付けること

ソーシャルボタンは簡単に設置できるため、数多くのソーシャルボタンを設置しがちですが、ボタンを大量に設置すればするほど各ソーシャルサービス（API）との接続が発生しますし、そのスクリプトの読み込みには時間がかかり、表示が遅くなることがあります。

特にスマートフォン向けのWebサイトの場合は、回線やスペックにも制限があるため、ページ表示までに時間がかかると、ユーザーが離れていく原因にもなるので、注意が必要です。

そのため簡単に出来ることとして、 - JavaScriptを最後に記述する - JavaScriptのファイルをまとめる などが必要になります。

またFacebookやTwitterの場合、非同期処理のプロパティも用意されているので、こちらも試す価値はありです。そのほか、scriptタグに「async属性」や「defer属性」を記載して非同期読み込みや遅延読み込みを利用する方法などもあります。

まとめ

簡単・便利・効果大という万能なソーシャルボタンですが、ソーシャルの仕様が変わったり、上記のようにページの表示時間に影響が出たりと気を付ける点もありますので、これらを考えつつ、Webサイトに取り入れることが重要ですね。

参考：各ソーシャルボタン公式ページ（2013.8.7時点）

Facebook いいねボタン
https://developers.facebook.com/docs/reference/plugins/like/

HTMLソース

<div class="fb-like" data-href="https://www.monster-dive.com/" data-width="250" data-layout="button_count" data-show-faces="true" data-send="false"></div>

Javascriptソース

(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/all.js#xfbml=1&appId=○○○○";
fjs.parentNode.insertBefore(js, fjs);

Twitter
https://dev.twitter.com/docs/tweet-button

HTMLソース例

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">Tweet</a>

javascriptソース例

!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";js.async=true;fjs.parentNode.insertBefore(js,fjs);}
}(document,"script","twitter-wjs");

Google+
https://developers.google.com/+/web/+1button/?hl=ja

HTMLソース

<div class="g-plusone"></div>

javascriptソース例

window.___gcfg = {lang: 'en-GB'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();

mixiチェック
http://developer.mixi.co.jp/connect/mixiplugin/mixicheck/
（※PartnerDashboard登録し、新規サービス追加の必要あり。）

HTMLソース

<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="○○○○○○"></a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script> 

はてなブックマーク
http://b.hatena.ne.jp/guide/bbutton

HTMLソース

<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async></script> 

LINE
http://media.line.naver.jp/howto/ja/

HTMLソース

<span> 
<script type="text/javascript" src="http://media.line.naver.jp/js/line-button.js?v=20130508" ></script> 
<script type="text/javascript">
new jp.naver.line.media.LineButton({"pc":false,"lang":"ja","type":"a"});
</script> 
</span>

Tumblr
http://www.tumblr.com/buttons?language=ja_JP

HTMLソース

<a href="http://www.tumblr.com/share" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('http://platform.tumblr.com/v1/share_1T.png') top left no-repeat transparent;">Share on Tumblr</a>
<script src="http://platform.tumblr.com/v1/share.js"></script> 

Pocket
http://getpocket.com/publisher/button

HTMLソース

<a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en"></a>

javascriptソース

!function(d,i){if(!d.getElementById(i)){
var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";
var w=d.getElementById(i);d.body.appendChild(j);
}}(document,"pocket-btn-js");

Pinterest
http://business.pinterest.com/widget-builder/#dopinit_button

HTMLソース

<a href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Fpinterest.com%2Fmonsterdive%2Fpins%2F&media=http%3A%2F%2Fmedia-cache-ec0.pinimg.com%2Foriginals%2F1f%2F5e%2F16%2F1f5e16bbdae9dd44f97503fae2e4e1bd.jpg&description=Next%20stop%3A%20Pinterest" data-pin-do="buttonPin" data-pin-config="beside"><img src="○○○○" /></a>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>