【JQuery】Facebook、Twitter、LINEのシェアとはてなブックマークをカスタムボタンにする

gekkado未分類

日本で一番手数料の安いクラウドファンディングとして話題沸騰中のCrowdFans（クラウドファンズ）でも、各プロジェクトページにシェアボタンを設置しています。

クラウドファンズでもやっているのFacebook、Twitter、LINE、はてなブックマークのボタンのカスタム方法を紹介します。

方針

やり方はいくらでもあると思いますが、各ページで共通で利用できる処理にしたかったので、htmlにはリンクURLを書かず、jqueryでリンクURLを設定する方針としました。

注意ポイント

注意ポイントですが「1ページに複数箇所をおけるようにする」ために、jqueryを使うときにidではなくclassをセレクタに使います。

例えば、クラウドファンズのプロジェクト詳細ページでは、「ページ上部」と「ページ下部」の２箇所でシェアボタンをおいていますが、classにすることで両方を同時に動作させれます。

1. ページ上部のシェアボタン

2. ページ下部のシェアボタン

実装

先にHTMLとjsを記載して、後ろで簡単に解説します。

HTML部分（js加工前）

<div class="col-lg-4 text-center">
  
  <a class="js-facebook-share" target="_blank" rel="nofollow">
    <img class="share-btn" alt="Facebookでシェアする" src="/assets/sns_btn_facebook.png">
  </a>

  <a class="js-twitter-share ml-3" target="_blank" rel="nofollow">
    <img class="share-btn" alt="Twitterでシェアする" src="/assets/sns_btn_twitter.png">
  </a>

  <a class="js-line-share ml-3" rel="nofollow">
    <img class="share-btn" alt="LINEでシェアする" src="/assets/sns_btn_line.png">
  </a>

  <a class="js-hatena-share mx-2" target="_blank" rel="nofollow">
    <img class="share-btn" alt="はてなでシェアする" src="/assets/sns_btn_hatena.png">
  </a>
  
</div>

js部分

<script>
$(function(){
  var url = location.href;
  var title = $('title').html();

  // twitter シェアの生成
  var text = encodeURIComponent(title);
  var tweet_url = 'http://twitter.com/share?url=' + url + '&text=' + text;
  $('a.js-twitter-share').attr("href", tweet_url);

  // facebookシェアの生成
  var facebook_url = 'https://www.facebook.com/sharer/sharer.php?u=' + url;
  $('a.js-facebook-share').attr("href", facebook_url);

  // LINEシェア
  $('.js-line-share').off('click');
  $('.js-line-share').on('click', function(){
    var message = title + ' ' + url;
    var shareLink = 'http://line.me/R/msg/text/?' + encodeURIComponent(message);
    window.open(shareLink, '_blank');
  });

  // はてなブックマーク
  var hatena_url = 'http://b.hatena.ne.jp/entry/' + url;
  $('a.js-hatena-share').attr("href", hatena_url);
  // 標準のはてなブックマークボタンには次の２つも付くが無くても動作する
  // $('a.js-hatena-share').attr("data-hatena-bookmark-title", title);
  // $('a.js-hatena-share').attr("data-hatena-bookmark-layout", "simple");
});
</script>

解説

HTMLでは、好きな画像をimgタグで設置し、aタグで囲っているだけです。
htmlページの読み込みが終わったタイミングで、jqueryを使い、要素をclassで検索して、リンクを設定しています。

例えば、Facebookシェア用aタグのclassに「js-facebook-share」を設定して、jqueryで検索して利用しています。ここをidにしてしまうと、片方しか動かなくなる場合があるので注意してください。

LINEだけ少し違う方法になっている理由は「過去の動作実績がある方法だから」というだけなのでhrefで良いかもしれません。ただ、Android、iOSのLINEアプリがバージョンアップしたときに動かなくなると嫌だなと思い、動作実績のある方法にしました。
また、clickイベントをoffしてからonしているのは、「２回以上」このスクリプトを読み込んでも正常に動作するようにするためです。（つまり、絶対に１回しか呼ばない自信があるときはoffの処理は不要です。）

また、上記コードのようにjsでurlとtitleを取得すれば、各ページでこのまま利用できて便利です。

クラウドファンズがSNSで沢山シェアされますように！！