SNSシェアボタンをフルカスタマイズしてシェア数も表示する

作ったもの

デザインをフルカスタマイズでき、シェア数なども表示できるSNSシェアボタン

↓こんな感じ♪

なぜ作ったか

いいね！やツイートボタンで、SNS側が用意しているsocial pluginを使っている方は多いと思いますが、表示が遅かったり、デザインやz-index的なもので苦労や妥協をしている方も多いかと思います。

逆にシェアボタンのデザインをフルカスタマイズする方法や、しているメディアもみかけますが、今度はシェア数などのデータが入れられないなどのデメリットもあります。

そこで、デザインもフルカスタマイズでき、シェア数も表示できるソーシャルボタンを実装したのでやり方をまとめておきます。

実装！！

※今回はruby on railsとajaxを使ってます。

1. デザインされたシェアボタンを配置する

ソーシャルボタンを表示するHTMLを作成する。
参考：http://simplesharingbuttons.com/

若干のカスタマイズは必要ですが、最初のテンプレート作成としては使えるかと。

※私の場合は、はてブのプラグインも導入しました。

_social_buttons.html.erb

    <%= stylecheet_link_tag 'social_button' %>

    <ul class="share-buttons js-socialActionArea">
      <li class="facebook" data-url="<%= request.url %>"><a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fjob-share.net%2F&t=JobShare-%E5%8F%8B%E9%81%94%E6%B1%82%E4%BA%BA%E5%BF%9C%E6%8F%B4%E3%82%B5%E3%82%A4%E3%83%88" target="_blank"><img src="images/flat_web_icon_set/color/Facebook.png"></a></li>
      <li class="twitter" data-url="<%= request.url %>"><a href="https://twitter.com/intent/tweet?source=http%3A%2F%2Fjob-share.net%2F&text=JobShare-%E5%8F%8B%E9%81%94%E6%B1%82%E4%BA%BA%E5%BF%9C%E6%8F%B4%E3%82%B5%E3%82%A4%E3%83%88:%20http%3A%2F%2Fjob-share.net%2F&via=TeamJobShare" target="_blank" title="Tweet"><img src="images/flat_web_icon_set/color/Twitter.png"></a></li>
      <li class="hatebu" data-url="<%= request.url %>">
        <%= link_to "http://b.hatena.ne.jp/entry/#{request.url}", class: "hatena-bookmark-button", :'data-hatena-bookmark-layout' => "simple",  title: "TITLE", target: "_blank" %>
        <%= image_tag "social/Twitter.png", alt: "はてなブックマークに追加" %>
        <script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
      </li>
      <li class="google" data-url="<%= request.url %>"><a href="https://plus.google.com/share?url=http%3A%2F%2Fjob-share.net%2F" target="_blank" title="Share on Google+"><img src="images/flat_web_icon_set/color/Google+.png"></a></li>
      <li class="pocket" data-url="<%= request.url %>"><a href="https://getpocket.com/save?url=http%3A%2F%2Fjob-share.net%2F&title=JobShare-%E5%8F%8B%E9%81%94%E6%B1%82%E4%BA%BA%E5%BF%9C%E6%8F%B4%E3%82%B5%E3%82%A4%E3%83%88" target="_blank" title="Add to Pocket"><img src="images/flat_web_icon_set/color/Pocket.png"></a></li>
      <li class="linkedin" data-url="<%= request.url %>"><a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fjob-share.net%2F&title=JobShare-%E5%8F%8B%E9%81%94%E6%B1%82%E4%BA%BA%E5%BF%9C%E6%8F%B4%E3%82%B5%E3%82%A4%E3%83%88&summary=JobShare%E3%81%AF%E5%8F%8B%E9%81%94%E3%81%AE%E6%B1%82%E4%BA%BA%E3%82%92%E5%BF%9C%E6%8F%B4%E3%81%97%E3%81%A6%E3%80%81%E4%BA%BA%E8%84%88%E3%82%92%E9%80%9A%E3%81%97%E3%81%A6%E6%8E%A1%E7%94%A8%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%BD%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB%E3%83%AA%E3%82%AF%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%A7%E3%81%99%E3%80%82&source=http%3A%2F%2Fjob-share.net%2F" target="_blank" title="Share on LinkedIn"><img src="images/flat_web_icon_set/color/LinkedIn.png"></a></li>
    </ul>

cssは最低限これだけ。カスタマイズは各自でやりましょう。

social_button.css

    .share-buttons{
      list-style: none;
    }

    .share-buttons li{
      display: inline;
    }

2. 各種シェアボタンごとにシェア数を取得して表示する

各種SNSのAPIを叩いて、シェアカウントを取得して表示します。

pocketとgoogleだけはAPIでカウントだけ取得することができなかったので、ソーシャルボタンのHTMLをNokogiriでparseして吹き出しのカウント部分だけを取得するという強行突破な方法で取得しています。

social_button.js

    $(function(){
      $.each($(".js-socialActionArea").find("li"), function(index, target){
      getSocialCount(target);
    });

    function getSocialCount(target){
      var provider = $(target).attr("class");
      var url = $(target).data('url');
      $.ajax({
        method: "get",
        url: "/api/get_social_count?url="+url+"&provider="+provider
      }).done(function(data,status){
        $("<span class='top-social-count'>"+data.count+"</span>").appendTo($(target));
      });
    }

ajaxで取得しているrails側の部分は、

controllers/api_controller.rb

    def get_social_count
      count = eval("Api.get_#{params[:provider]}_count('#{params[:url]}')")
      render json: {count: count}
    end

model部分に、

model/api.rb

    def self.get_facebook_count(url)
      https://graph.facebook.com/#{url}
      data = get_access_to_api("https://graph.facebook.com/",url)
      return data["shares"]
    end                                                                                            

    def self.get_twitter_count(url)
      data = get_access_to_api("https://cdn.api.twitter.com/1/urls/count.json?url=",url)
      return data["count"]
    end

    def self.get_pocket_count(url)
      #apiから取得したボタンをhtml-parseしてカウント部を取得する
      api_url = "http://widgets.getpocket.com/v1/button?v=1&count=horizontal&url="
      data = URI("#{api_url}#{url}").read
      doc = Nokogiri::HTML(data, nil, 'utf-8')
      count = doc.css("#cnt").first.content
      return count.to_i
    end

    def self.get_hatebu_count(url)
      data = get_access_to_api("http://api.b.st-hatena.com/entry.count?url=",url)
      return data
    end

    def self.get_linkedin_count(url)
      data = get_access_to_api("https://www.linkedin.com/countserv/count/share?format=json&url=",url)
      return data["count"]
    end

    def self.get_google_count(url)
      api_url = "https://plusone.google.com/_/+1/fastbutton?url="
      data = URI("#{api_url}#{url}").read
      doc = Nokogiri::HTML(data, nil, 'utf-8')
      count = doc.css("#aggregateCount").children.text
      return count.to_i
    end

    def self.get_access_to_api(api_url, target_url)
      data = URI("#{api_url}#{target_url}").read
      json_data = ActiveSupport::JSON.decode(data)
      return json_data
    end

完成〜！これで、SNSシェアボタンをフルカスタマイズして、さらにシェアカウントまで表示することができました。
あとのデザインは、お好きにカスタマイズしちゃいましょう！！