質問: WebアプリをRubyonRails4.2.6で作成しています。 アプリ中にfacebookのシェアボタンを設置しております。 コードはfacebook for developersからそのまま持ってきたもので、 application.html.erbのタグ直下に下記のコードを、 ``` ``` シェアボタンを設置するビューファイルに下記のコードをそれぞれ記述しています。 ``` シェア ``` シェア自体は行うことが可能なのですが、 ページを読み込んだ際にボタンが表示されず、 「シェア」という文字リンクのみが表示されます。 ブラウザでページを更新すると、きちんとボタンが表示されます。 ページを読み込んだ際に、ボタンが1発で表示されるようにするには、 どのようにすれば良いでしょうか? 恐らくturbolinksの影響ではないかと思っていますが、 Javascript周りはあまり詳しくなく・・ご回答いただければ幸いです。
回答: 質問文にも書かれている通り、これはturbolinksが原因です。 turbolinksの影響でアプリケーション内のリンクから遷移したとき、 FacebookのJSがうまく読み込まれないためです。 解決方法はいくつかあります。 1つ目はturbolinksをオフにしてしまう方法です。その場合は、以下のリンクを参照してください。 Rails 4 で turbolinks をオフにする方法 実際にリリースされているアプリケーションでも、 turbolinksの対応が大変なためオフにしてしまうことはよくあるそうです。 しかし、turbolinksを使うことでページを高速に描画できるので、 できれば使いたい機能ではあります。 2つ目は、turbolinksに対応したJS(CoffeeScript)を使う方法です。 まず、app/assets/javascripts に以下のファイル(facebook.coffee)を追加してください。 ファイルの名前は好きな名前で問題ありません。 ``` # app/assets/javascripts/facebook.coffee $ -> loadFacebookSDK() bindFacebookEvents() unless window.fbEventsBound bindFacebookEvents = -> $(document) .on('turbolinks:request-start', saveFacebookRoot) .on('turbolinks:render', restoreFacebookRoot) .on('turbolinks:load', -> FB?.XFBML.parse() ) @fbEventsBound = true saveFacebookRoot = -> if $('#fb-root').length @fbRoot = $('#fb-root').detach() restoreFacebookRoot = -> if @fbRoot? if $('#fb-root').length $('#fb-root').replaceWith @fbRoot else $('body').append @fbRoot loadFacebookSDK = -> window.fbAsyncInit = initializeFacebookSDK $.getScript("//connect.facebook.net/ja_JP/sdk.js") initializeFacebookSDK = -> FB.init appId : 'YOUR_APP_ID' status : true cookie : true xfbml : true version: 'v2.11' ``` 今回はCoffeeScriptで記述しましたが、JavaScriptで記述しても構いません。 詳細な説明は省きますが、コードの `turbolinks:` の部分で 正常にFacebookのJSが読み込めるようにしています。 次に application.html.erb のFacebookの`` の部分を削除してください。 ただし、`` の部分は残してください。 これでシェアボタンが正常に読み込まれるようになるはずです。