ソーシャルシェアボタンの設置方法のまとめです。GoogleアナリティクスによるSNSボタン押下数の効果測定やFacebookでキャッシュクリアしないと正しく出なかったりする件の対処法、ogpタグなど、いくつかハマったものの解決方法も併せて記載しています。

■ ソーシャルボタンの表示サンプル

■ シェアしたときの表示サンプル（google+の例）

1.対応しているSNS

本記事で対応しているSNSは以下です。

Facebook（※いいねボタンではなくシェアボタンです）
Twitter
Line
Google+
はてブ

2.シェアボタンを実装する前にやること

シェアボタンを実装する前に、以下の内容を検討して下さい。

メタタグやogpタグが適切に記載されているか？
→ ないと魅力半減です。
GoogleアナリティクスでKPI測定するか？
→ シェアボタン押された回数計測できます

2.1 メタタグやogpタグ（Open Graph Protocol）が適切に記載されているか？

ogpタグを設定しないと、各種SNSでシェアしたときの見栄えが制御できません。最低限、以下のタグが設定されているかを確認してください。

title
HTMLのタイトルタグ。これを書かない、というのはHTMLとしてあり得ない
meta/description
ディスクリプション。og:descriptionがある場合は、og:descriptionが優先されるが、念のため入れておいた方がよい。
meta/author
なくてもよいが、SNSによっては、著作者情報を表示するところで拾ってくれる
meta/og:title
SNS版のタイトル。できるだけキャッチーにしておいたほうがよい。
meta/og:description
SNS版のディスクリプション。できるだけキャッチーにしておいた方がよい。
meta/og:url
リンク先となるURL。
meta/og:type
ページの種類。いろいろ指定でき、SNSによっては若干挙動が変わる（らしい）が、とりあえず迷ったらarticleにしておけば何とかなる
meta/og:image
SNSでシェアする際に表示される代表画像。これを書かないと、サイト内の画像が適当に選ばれることも多いので、必ずデザイナーさんに作って貰うべし！
ちなみに、画像のサイズをちゃんと作らないと（特にFacebookで）見栄えがおかしくなるので、注意。また、絶対パス形式のURL（http://～または https://～から始まるURL）を指定しないと、Facebookのogpタグチェックで引っかかります（問題なく画像が表示されることが多いみたいですが、文法的に正しくない模様）
meta/twitter:site
TwitterでいわゆるTwitter Cardを表示する場合は必要。
meta/twitter:card
同上。いろいろ種類があるが、まよったらsummaryでなんとかなる
meta/fb:admins
facebookインサイトを利用する場合のみ必要。なくてもOK

■ ソーシャルボタン設置のためのメタタグやogpタグの実装例

sample.html


<title>現職でも、転職先でも、なるべく多く賞与をもらいたい！そんな方にベストスケジュールをご紹介</title>
<meta name="description" content="賞与は、自身の査定と会社の業績に応じて支払われます。ボーナス転職を考える方は、現職の規定や転職先の査定期間を確認し、ベストな時期を選びましょう。最優先は、円満な転職であることもお忘れなく！">
<meta property="og:title" content="現職でも、転職先でも、なるべく多く賞与をもらいたい！そんな方にベストスケジュールをご紹介"/>
<meta property="og:description" content="賞与は、自身の査定と会社の業績に応じて支払われます。ボーナス転職を考える方は、現職の規定や転職先の査定期間を確認し、ベストな時期を選びましょう。最優先は、円満な転職であることもお忘れなく！"/>
<meta property="og:image" content="https://lets.pitajob.jp/contents/column/feature/WF000000033/images/WF000000033_1.png"/>
<meta property="og:url" content="https://lets.pitajob.jp/contents/column/feature/WF000000033/WF000000033.html"/>
<meta property="og:type" content="article"/>
<meta name="twitter:site" content="@xxxxxxxxx">
<meta name="twitter:card" content="summary">
<meta property="fb:admins" content="xxxxxxxx" />

2.2 Googleアナリティクスと連携するか？（ボタンのKPI計測）

Googleアナリティクスのレポート内には、各種SNS操作を記録する箇所があります（ユニバーサルアナリティクス場合、集客＞ソーシャル > プラグイン）。この機能を使って、ボタンが押された回数をGoogleアナリティクスで記録することができます。

実装方法は主に以下の２つで

自分でGoogleアナリティクスのイベントの送信とそのコールバックでシェアする処理を実装する
各SNSが提供するGoogleアナリティクス用のライブラリを利用する

という選択肢があります。後者だと、解析できることが増える（らしい）ですが、SNSごとにライブラリを読み込んだり、処理をかき分けたりと面倒なため、ここでは、前者の方法で実装します。

3.SNSシェアボタンの実装サンプル

SNSシェア機能は、ボタンとなるHTMLとボタンを押したときのjavascriptで構成されます。
まずは、html側の実装例です。

※ imgタグの画像は公式サイトなど、他のところから集めてきてください（ただし、利用規約に注意（←後述））。

<div>
  <ul>
    <li>
      <div class="sns_icon facebook_back"><a href="" target="_blank" title="Facebookでシェア"><img src="/images/social_facebook.png" alt="facebook"></a></div>
    </li>
    <li>
      <div class="sns_icon  twitter_back"><a href="" target="_blank" title="Twitterでシェア"><img src="/images/social_twitter.png" alt="twitter"></a></div>
    </li>
    <li>
      <div class="sns_icon  google_back"><a href="" target="_blank" title="Google+で共有"><img src="/images/social_google.png" alt="googleplus"></a></div>
    </li>
    <li>
      <div class="sns_icon  hatena_back"><a href="" target="_blank" title="はてなブックマークに登録"><img src="/images/social_hatena.png" alt="はてなブックマーク"></a></div>
    </li>
    <li>
      <div class="sns_icon line_back"><a href="" target="_blank" title="LINEに送る"><img src="/images/social_line.png" alt="LINE"></a></div>
    </li>
  </ul>
</div>

javascript側の実装例です。
なお、jQueryベースで記述していますので注意してください。

※ 引数のshareUrlはシェアするURL、descriptionは、シェアボタンを押したときのテキストボックスに入る値（例えばTwitterのつぶやきの初期値）です。
※ 下記コードのコメント内にも記載していますが、nonInteractionを1にすると、イベント発行したユーザーが画面から逃げても直帰扱いになります（逆に、直帰扱いにしないなら、該当の指定を削除してください）

// SNSの各種カウントを実装するためのjavascript。
// jqueryとgoogleアナリティクスのロード完了が前提のコードなので注意。
/**
 * SNSシェアボタンを指定された要素の下に埋め込む
 * @param shareUrl シェアするUrl。og:shareUrlの値と一緒にすることをオススメ
 * @param description ツイート本文などに埋め込む文言
 */ 
function setSnsShare(shareUrl, description) {
    // 都合に合わせてセレクタは変えてね！
    setTwitterLink(".twitter_back a", shareUrl,description);
    setFacebookLink(".facebook_back a", shareUrl, description);
    setGooglePlusLink(".google_back a", shareUrl, description);
    setHatebuLink(".hatena_back a", shareUrl, description);
    setLineLink(".line_back a", shareUrl, description);
}


function setTwitterLink(shareSelector, shareUrl, description) {
    $(shareSelector).attr("href", "https://twitter.com/share?shareUrl=" + shareUrl + "&text=" + encodeURIComponent(description));
    setShareEvent(shareSelector, 'Twitter', shareUrl);
}

function setFacebookLink(shareSelector, shareUrl, description) {
    $(shareSelector).attr("href", "https://www.facebook.com/sharer/sharer.php?u=" + shareUrl + "&t=" + encodeURIComponent(description));    
    setShareEvent(shareSelector, 'Facebook', shareUrl);
}

function setGooglePlusLink(shareSelector, shareUrl, description) {
    $(shareSelector).attr("href", "https://plus.google.com/share?shareUrl=" + shareUrl);
    setShareEvent(shareSelector, 'Google+', shareUrl);
}

function setHatebuLink(shareSelector, shareUrl, description) {
    $(shareSelector).attr("href", "https://b.hatena.ne.jp/add?mode=confirm&shareUrl=" + shareUrl + "&description=" + encodeURIComponent(description));
    setShareEvent(shareSelector, 'Hatena Bookmark', shareUrl);
}

function setLineLink(shareSelector, shareUrl, description) {
    $(shareSelector).attr("href", "http://line.me/R/msg/text/?" + encodeURIComponent(description + " " + shareUrl));
    setShareEvent(shareSelector, 'LINE', shareUrl);
}

/**
 *  シェアボタン押下時にGoogleアナリティクスへイベントを送信する
 *  @param selector イベントを付与するセレクタ
 *  @param snsName SNSの名前（Googleアナリティクス上の表示に使われる）
 *  @param shareUrl シェア対象のURL（Googleアナリティクス上の表示に使われる）
 */
function setShareEvent(selector, snsName, shareUrl) {
    $(selector).on('click', function(e){
        var current = this;
        //　*** Googleアナリティクスにイベント送らないなら、以下のコードは不要 ***
        // 'share'の文字列は任意に変えてもよい（Googleアナリティクス上の表示文字列として使われる）
        // 'nonInteraction' : 1にしないと、直帰率がおかしくなる（イベント発行したユーザーは直帰扱いでなくなる）ので注意
        ga('send', 'social', snsName, 'share', shareUrl, {
            'nonInteraction': 1
        });
        // *** Googleアナリティクス送信ここまで ****

        // このあたりは適当に書き換えて下さい
        window.open(current.href, '_blank', 'width=600, height=600, menubar=no, toolbar=no, scrollbars=yes');
        e.preventDefault();
    }); 
}

★ Googleアナリティクスへのイベント送信の公式ガイドはこちら
https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions

【補足】公式SNSボタンを使うか、自前で作るか

FacebookやTwitter、その他SNS各社から、「コピペするだけでつかえる公式のSNSボタン」を公開していることがあります。
これを使うと、シェア数がとれたりするなど、機能的に有利なこともありますが、どうしても「重い」というデメリットがあります（仮に「重く」無かったとしても表示速度が相手のサービスに依存してしまう）。

ajaxで遅延ロードするなど、多少の加工で対策をとることもできますが、今回紹介するような、css＋クリック時に各サービスに飛ばすといった設計の方がカンタンに自サイトで制御可能な範疇にできるので、レンダリング速度を制御するなどの面から有利かと思います。

【補足】LINEはプロキシ越えられません

LINEについては、プロキシ越えられないみたいです（2016年01月末現在）。そのため、プロキシ通さないと見られないようなネットワーク環境ではテストできないみたいですのでご注意ください。

【補足】シェアボタンを押すとSNS各社のクローラーがやってきます

SNSのシェアボタンは、各社のAPI呼び出しです。従って、これをコールすると、SNS各社のクローラーが呼び出し元URLにアクセスしてくることがあります（特にFacebook）。
現在のところ、ogpタグの設定をキャッシュして去って行く動きくらいしかしないはずなので、問題にはならないはずですが、支障があったり、気持ち悪さを感じる場合は、特定のIP以外はじくとか、ステージング用のURLがシェアされるようにするなどの工夫が必要となります。
ただし、これらの対応をすると、開発中の状態がキャッシュされてしまうことがあるので、後述のキャッシュクリア申請が必要になることがあります。

【補足】利用規約に注意！アイコンカスタマイズ不可のケースなども！

シェアボタンは各社のAPIの呼び出しとなるため、各サービスの利用規約に縛られます。
サービスによっては、SNSボタンのデザインやアイコン（ロゴ）の使い方、利用可能な文言などについても制約を加えているケースがあります。
特にデザインを重視して独自のアイコンを付与する場合、利用規約に違反しないようにご注意ください。

例えば、2016年4月現在のLINEの利用規約には、アイコンをカスタマイズできない旨の記述があります。

「LINEで送るボタン」利用ガイドライン
https://media.line.me/guideline/ja/

４. 利用条件
(2) 設置者は、LINEで送るボタンを外部サイトに設置する場合、専用アイコンを使用しなければなりません。但し、設置者は、専用アイコンの代わりに「LINEで送る」又は「LINE」というテキスト文字を使用することができます。
(3) 設置者は、専用アイコンの変更や改変を行なってはなりません。

4.リリース後にやること

4.1 Facebookのシェアボタンを押しても404になったり画像が正しく出ないときの対処

前述のとおり、シェアボタンを実装すると、SNSのクローラーがやってきて、ogpタグの内容をキャッシュしていきます。
特にfacebookの場合、キャッシュが強力すぎて簡単に消えないため、公開後にキャッシュクリアの申請をしておかないと、シェア時に見出しが404 NotFoundになったり、画像がでないことがあります。

※ サービスリリース成功の打上げの帰りに、「SNSボタン押したら、その後の画面の表示が403とか404になる」という指摘を貰って、リアルに凹んだりしたことがあります。同じあやまちのなきよう・・・

★ og:imageを設定しているのに、設定前の状態がキャッシュされて出てない例

★ キャッシュをクリアすると、最新のデータが反映される

■ Facebookでのキャッシュクリア申請の仕方

以下のURLにアクセス https://developers.facebook.com/tools/debug/og/object/
Fetch new scrape information をクリック
遷移後の画面で、正しくogpタグの内容が認識されていればOK

※ とあるURLをパラメータを変えて呼べば駆動するので、デプロイプロセスの中に組み込めば・・・という気もしますが、某つぶやきサービスのツイート数みたいに、「非公開API勝手に使ってたんだから、急に消されても文句ないよね？」と言われるリスクもあるので、業務フロー化するときは、公式なページで案内されている方法がよいかと思います。

WebサイトにSNSシェアボタンを設置＆効果測定する方法のまとめ