turbolinks対応はてブボタン/Twitterボタン/Facebookいいねボタン/Google Analytics/Pocket/Google+ をきれいに表示[Rails 4]


Rails 4のturbolinksに対応させつつ、はていなブックマークやTwitter、Facebookいいねボタンなどのソーシャルボタンを縦でずらさずにキレイに並べる方法をまとめました。また、Google Analyticsの導入も一緒にしちゃいます! あと、PocketとGoogle+にも対応しました!


😼 各種ボタンの設置 - slim

以下のようにボタンの表示を設定します。canonical_urlはシェアしたいURL、page_title
そのページのタイトルです。

.social.clearfix
/! Facebook
.button.facebook
#fb-root
.fb-like data-href=("#{canonical_url}") data-layout="button_count" data-send="false" data-show-faces="false" data-width="120"
/! Twitter
.button.twitter
a.twitter-share-button data-lang="en" data-text=("#{page_title(controller_name, action_name)}") data-url=("#{canonical_url}") href="https://twitter.com/share" Tweet
/! Pocket
.button.pocket
a.pocket-btn data-lang="en" data-pocket-align="left" data-pocket-count="horizontal" data-save-url=("#{canonical_url}") href="https://getpocket.com/save" Pocket
/! Hatena
.button.hatena
a.hatena-bookmark-button data-hatena-bookmark-lang="ja" data-hatena-bookmark-layout="standard" href=("http://b.hatena.ne.jp/entry/#{canonical_url}") title="このエントリーをはてなブックマークに追加"
img alt="このエントリーをはてなブックマークに追加" height="20" src="http://b.st-hatena.com/images/entry-button/button-only.gif" style=('border: none') width="20" /
/! Google plusone
.button.google
.g-plusone data-href=("#{canonical_url}") data-size="medium"

ボタンの種類等は、公式サイトをみて調整してください。

はてなブックマークボタンの作成・設置について

Twitter / Twitterボタン

Like Button - Facebook開発者

🎉 headダグへのJavaScriptの追加

Google Analytics、TwitterボタンのJavaScriptの読み込みをheadタグ内に書き込みます。
ここでは本番環境でのみ、Google Analyticsを読み込むように設定しています。

erb: # hamlの場合は :erb
<script>
(function(w,d){
var s,e = d.getElementsByTagName("script")[0],
a=function(u,f){if(!d.getElementById(f)){s=d.createElement("script");
s.async=!0;s.src=u;if(f){s.id=f;}e.parentNode.insertBefore(s,e);}};
a("https://apis.google.com/js/plusone.js");
a("//b.st-hatena.com/js/bookmark_button_wo_al.js");
a("//platform.twitter.com/widgets.js","twitter-wjs");
a("https://widgets.getpocket.com/v1/j/btn.js?v=1");
})(this, document);
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-Y', 'YOUR_DOMAIN');
ga('send', 'pageview');
</script>

UA-XXXXXXXX-Yは、Google Analyticsでサイトを登録するともらえる『トラッキングID』をセットしてください。

🎃 turbolinks対応でボタンのjsを読み込むようにjs追加

さらにFacebook/Twitter/はてぶのJavaScriptファイルをturbolinksでもよしなに読み込んでくれるようにjsを追加します。
ここでは、coffeescriptを使ってコードをかきます!

ready = ->
# Hatena
loadHatenaSDK()
# Facebook
loadFacebookSDK()
bindFacebookEvents() unless fb_events_bound
# Twitter
loadTwitterSDK()
bindTwitterEventHandlers() unless twttr_events_bound
# For turbolinks
$(document).ready(ready)
$(document).on('page:load', ready)
# ----------------------------------------- #
# Facebook
# ----------------------------------------- #
fb_root = null
fb_events_bound = false
bindFacebookEvents = ->
$(document)
.on('page:fetch', saveFacebookRoot)
.on('page:change', restoreFacebookRoot)
.on('page:load', ->
FB?.XFBML.parse()
)
fb_events_bound = true
saveFacebookRoot = ->
fb_root = $('#fb-root').detach()
restoreFacebookRoot = ->
if $('#fb-root').length > 0
$('#fb-root').replaceWith fb_root
else
$('body').append fb_root
loadFacebookSDK = ->
window.fbAsyncInit = initializeFacebookSDK
$.getScript("//connect.facebook.net/ja_JP/all.js#xfbml=1")
initializeFacebookSDK = ->
FB.init
appId : YOUR_APP_ID
channelUrl: '//WWW.YOUR_DOMAIN.COM/channel.html'
status : true
cookie : true
xfbml : true
# ----------------------------------------- #
# Twitter
# ----------------------------------------- #
twttr_events_bound = false
bindTwitterEventHandlers = ->
$(document).on 'page:load', renderTweetButtons
twttr_events_bound = true
renderTweetButtons = ->
$('.twitter-share-button').each ->
button = $(this)
button.attr('data-url', document.location.href) unless button.data('url')?
button.attr('data-text', document.title) unless button.data('text')?
twttr.widgets.load()
loadTwitterSDK = ->
$.getScript("//platform.twitter.com/widgets.js")
# ----------------------------------------- #
# Hatena
# ----------------------------------------- #
loadHatenaSDK = ->
$.getScript("//b.st-hatena.com/js/bookmark_button_wo_al.js")
# ----------------------------------------- #
# Google Analytics
# ----------------------------------------- #
$(document).on 'page:load page:restore', ->
if window.ga?
ga('set', 'location', location.href.split('#')[0])
ga('send', 'pageview')
# ----------------------------------------- #
# Google+
# ----------------------------------------- #
loadGoogleSDK = ->
$.getScript("https://apis.google.com/js/plusone.js")
# ----------------------------------------- #
# Hatena
# ----------------------------------------- #
loadHatenaSDK = ->
$.getScript("//b.st-hatena.com/js/bookmark_button_wo_al.js")
# ----------------------------------------- #
# Pocket
# ----------------------------------------- #
loadPocketSDK = ->
$.getScript("https://widgets.getpocket.com/v1/j/btn.js?v=1")
# ----------------------------------------- #
# Google Analytics
# ----------------------------------------- #
class @GoogleAnalytics
@load: ->
# Google Analytics depends on a global _gaq array. window is the global scope.
window._gaq = []
window._gaq.push ["_setAccount", GoogleAnalytics.analyticsId()]
# Create a script element and insert it in the DOM
ga = document.createElement("script")
ga.type = "text/javascript"
ga.async = true
ga.src = ((if "https:" is document.location.protocol then "https://ssl" else "http://www")) + ".google-analytics.com/ga.js"
firstScript = document.getElementsByTagName("script")[0]
firstScript.parentNode.insertBefore ga, firstScript
# If Turbolinks is supported, set up a callback to track pageviews on page:change.
# If it isn't supported, just track the pageview now.
if typeof Turbolinks isnt 'undefined' and Turbolinks.supported
document.addEventListener "page:change", (->
GoogleAnalytics.trackPageview()
), true
else
GoogleAnalytics.trackPageview()
@trackPageview: (url) ->
unless GoogleAnalytics.isLocalRequest()
if url
window._gaq.push ["_trackPageview", url]
else
window._gaq.push ["_trackPageview"]
window._gaq.push ["_trackPageLoadTime"]
@isLocalRequest: ->
GoogleAnalytics.documentDomainIncludes "local"
@documentDomainIncludes: (str) ->
document.domain.indexOf(str) isnt -1
@analyticsId: ->
# your google analytics ID(s) here...
GoogleAnalytics.load()

YOUR_APP_IDFacebook開発者でWebアップを登録するともらえるアプリケーションIDをセットしてください。

//WWW.YOUR_DOMAIN.COM/channel.htmlには、よいねを押してほしいURLのプロトコル以下をセットします。

Rails / Turbolinksに対応したソーシャルボタンを配置する(Facebook, Twitter, Google+, Pocket, はてブ) | Workabroad.jp』さんの記事にめちゃくちゃ助けてもらいました! ありがたうございます^^

🎂 CSS修正

SCSSに次の内容を追加しました。

.social {
line-height: 0.8;
margin-top: 10px;
font-size: 12px;
font-weight: normal;
.button {
float: left;
overflow: hidden;
margin-right: 5px;
margin-bottom: 4px;
&.facebook {
margin-right: 17px;
}
&.twitter {
width: 90px;
}
&.pocket {
width: 100px;
}
&.google {
width: 60px;
margin-right: 0;
}
&.hatena {
margin-right: 17px;
}
}
}

🐝 ブラウザで確認

MacのSafari/Firefox/Chromeで確認しました。

スクリーンショット 2015-01-31 21.00.18

Windowsは所有していないので試せていません。
もし不具合があるようだったらぜひ教えてください!

🚕 参考リンク

Turbolinks Compatibility with Google Analytics

Rails / Turbolinksに対応したソーシャルボタンを配置する(Facebook, Twitter, Google+, Pocket, はてブ) | Workabroad.jp

複数のソーシャルボタンをきれいに整列表示させる簡単な方法

最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた

ソーシャルボタンをキレイに並べる

JavaScript - Google AnalyticsをRails 4のTurbolinksに対応させる - Qiita キータ

Turbolinks Compatibility with Facebook

Turbolinks Compatibility with Twitter

Rails4 Turbolinksのメモ #mtsmhack - 130単位

📚 おすすめの書籍