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、いまのところすごくいい感じ。パフォーマンスの向上を肌で感じることができてる（気分。）