Facebook share button not showing until after refresh

Question

Last week I added Facebook and Twitter share buttons to my rails app. I thought they were working fine but it seems they were not reliably loaded and required a refresh to get them to show. I thought this was a turbolinks issue as these things often are so I installed the 'jquery-turbolinks'gem. It isn't a turbolinks issue.

After looking around I found answers like this one and whilst adding twttr.widgets.load(); to the end of my twitter function solved that problem, I've had no luck with getting FB.XFBML.parse(); to make the Facebook share button to load without a refresh. On this Facebook dev page it doesn't list the share button as one of the things that can be fixed with that code.

My code, which is in a partial, is as follows:

<script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk')); FB.XFBML.parse();</script>

<div class="share-buttons">
   <div id="fb-root"></div>
      <div class="fb-share-button" data-href="#{request.original_url}" data-width="110"></div>
</div>

Answer 1

It is because sometimes your FB object is not even defined, and your FB.XFBML.parse() function gets called. You need to make calls to FB object when it has initialized. So your code changes to this :

<script>
   (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

     window.fbAsyncInit = function(){  // this gets triggered when FB object gets initialized
            console.log("FB Object initiated");
            FB.XFBML.parse(); // now we can safely call parse method
       };

</script>

Answer 2

why not try a client side share button rather then the server side share button. Server side is only needed if you where going to do extra processing after it renders on the server side. Chances are you don't need to render on the server.

<a href="https://www.facebook.com/sharer/sharer.php?u=example.org" target="_blank">
  Share on Facebook
</a>

you could also just go to https://developers.facebook.com/docs/plugins/share-button/ pass in the url you would like to share it will generate example code for you. you can then based on that code, change the url of the shared page on the server side using a variable in its place. This would let you have a reusable code snippet that can be used for every page on your site.

<a href="https://www.facebook.com/sharer/sharer.php?u={$pageURLValue}" target="_blank">
  Share on Facebook
</a>

When you're rendering the page just set {$pageURLValue} to what the current page is. Sorry i don't know rails so the variable tag may be different. replace {$pageURLValue} with what ever the value tag is for rails.