RubyonRails4で、Facebookのシェアボタンをページ読み込み時に表示させたい

WebアプリをRubyonRails4.2.6で作成しています。
アプリ中にfacebookのシェアボタンを設置しております。
コードはfacebook for developersからそのまま持ってきたもので、
application.html.erbの<body>タグ直下に下記のコードを、

Javascript
1<div id="fb-root"></div>
2<script>(function(d, s, id) {
3  var js, fjs = d.getElementsByTagName(s)[0];
4  if (d.getElementById(id)) return;
5  js = d.createElement(s); js.id = id;
6  js.src = 'https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.11';
7  fjs.parentNode.insertBefore(js, fjs);
8}(document, 'script', 'facebook-jssdk'));</script>

シェアボタンを設置するビューファイルに下記のコードをそれぞれ記述しています。

HTML
1<div class="fb-share-button" data-href="https://◯◯◯" 
2data-layout="button_count" data-size="small" 
3data-mobile-iframe="true">
4<a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse">
5シェア</a></div>

シェア自体は行うことが可能なのですが、
ページを読み込んだ際にボタンが表示されず、
「シェア」という文字リンクのみが表示されます。

ブラウザでページを更新すると、きちんとボタンが表示されます。

ページを読み込んだ際に、ボタンが1発で表示されるようにするには、
どのようにすれば良いでしょうか？
恐らくturbolinksの影響ではないかと思っていますが、
Javascript周りはあまり詳しくなく・・ご回答いただければ幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

質問文にも書かれている通り、これはturbolinksが原因です。
turbolinksの影響でアプリケーション内のリンクから遷移したとき、
FacebookのJSがうまく読み込まれないためです。

解決方法はいくつかあります。
１つ目はturbolinksをオフにしてしまう方法です。その場合は、以下のリンクを参照してください。
Rails 4 で turbolinks をオフにする方法

実際にリリースされているアプリケーションでも、
turbolinksの対応が大変なためオフにしてしまうことはよくあるそうです。
しかし、turbolinksを使うことでページを高速に描画できるので、
できれば使いたい機能ではあります。

２つ目は、turbolinksに対応したJS（CoffeeScript）を使う方法です。
まず、app/assets/javascripts に以下のファイル（facebook.coffee）を追加してください。
ファイルの名前は好きな名前で問題ありません。

CoffeeScript
1# app/assets/javascripts/facebook.coffee
2
3$ ->
4  loadFacebookSDK()
5  bindFacebookEvents() unless window.fbEventsBound
6
7bindFacebookEvents = ->
8  $(document)
9    .on('turbolinks:request-start', saveFacebookRoot)
10    .on('turbolinks:render', restoreFacebookRoot)
11    .on('turbolinks:load', ->
12      FB?.XFBML.parse()
13    )
14  @fbEventsBound = true
15
16saveFacebookRoot = ->
17  if $('#fb-root').length
18    @fbRoot = $('#fb-root').detach()
19
20restoreFacebookRoot = ->
21  if @fbRoot?
22    if $('#fb-root').length
23      $('#fb-root').replaceWith @fbRoot
24    else
25      $('body').append @fbRoot
26
27loadFacebookSDK = ->
28  window.fbAsyncInit = initializeFacebookSDK
29  $.getScript("//connect.facebook.net/ja_JP/sdk.js")
30
31initializeFacebookSDK = ->
32  FB.init
33    appId  : 'YOUR_APP_ID'
34    status : true
35    cookie : true
36    xfbml  : true
37    version: 'v2.11'