##作ったもの
デザインをフルカスタマイズでき、シェア数なども表示できる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シェアボタンをフルカスタマイズして、さらにシェアカウントまで表示することができました。
あとのデザインは、お好きにカスタマイズしちゃいましょう！！