酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

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

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


各種ボタンの設置 - slim

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.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を読み込むように設定しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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を使ってコードをかきます!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
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に以下の内容を追加しました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.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は所有していないので試せていません。 もし不具合があるようだったらぜひ教えて下さい!

Special Thanks

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単位

おすすめの書籍