turbolinks 5を使用していると、ページの遷移時にtwitterのフォロー／シェアボタンが表示されなくなってしまう問題の解決方法。

解決方法

基本的にはCompatibilityのページに書いてあるとおりだが、順を追って説明していく。なおこれはCompatibilityのページのSolution #2に該当する。

まずはTwitterボタンのページでサイトに貼り付けたいボタンのソースをゲットする。通常はそいつをボタンを表示させたい箇所に貼り付ければいいわけだが、turbolinksを使用する場合は、ちょっと違う。取得したソースはaタグとscriptタグがあると思うのだが、そのうちaタグの方だけを貼り付けるようにする。下は@XXXXユーザーのフォローボタンの例。

📄フォローボタンのhtml

<a href="https://twitter.com/XXXX" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @XXXX</a>

ボタンを貼り付けたらCoffeeScriptを作成する。ファイル名は任意。

📄app/assets/javascripts/twitter.coffee

twttr_events_bound = false

$ ->
  loadTwitterSDK ->
    bindTwitterEventHandlers() unless twttr_events_bound

bindTwitterEventHandlers = ->
  $(document).on 'turbolinks: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 = (callback) ->
  $.getScript('//platform.twitter.com/widgets.js', callback)

これだけ。

なお本家Compatibilityのサイトと若干CoffeeScriptのソースが異なるので注意。本家版はgetScriptに時間がかかった場合にエラーが出るようになっていたので、それを修正した。（PR出してるけどマージされるかは不明）

turbokinks 5、いまのところすごくいい感じ。パフォーマンスの向上を肌で感じることができてる（気分。）

関連する記事

• [rails] 特定のページのみで実行するJavascript
• simple_formとTwitter bootstrapで作る俺流鉄板Railsアプリ（その１）
• 【tubetop】YouTubeの国別人気動画を自動集約するサイトを作ってみた
• Ruby on Railsでカンマ付き金額を扱う
• simple_formとTwitter bootstrapで作る俺流鉄板Railsアプリ（その３）