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

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_IDはFacebook開発者で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;
    }
  }
}