The Facebook sharing button is only shown after the update.

Question

Last week, I added Facebook and Twitter sharing buttons to my rails app. I thought they were working fine, but it seems like they are not securely loaded and require updates to show them. I thought this was a problem with turbolinks, as this often happens, so I installed jquery-turbolinks'em. This is not a problem with turbolinks.

After inspecting, I found answers such as this and adding twttr.widgets.load(); at the end of my Twitter function, solved this problem, I was out of luck with getting FB.XFBML.parse(); to make the share share button to download without updating. On this On the Facebook page, the sharing button does not appear as one of the things that can be fixed using this code.

My code, which is in 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

This is because sometimes your FB object is not even defined and the FB.XFBML.parse () function is called. You must make calls to the FB object when it is initialized. Thus, your code will change to the following:

 <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 the sharing button on the client side, and not the server sharing button. The server side is needed only if you intend to perform additional processing after it is displayed on the server side. Most likely, you do not need to output to the server.

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

you can also just go to https://developers.facebook.com/docs/plugins/share-button/ miss in the url you would like to share and you will get an example code for you. you can then, based on this code, change the URL of the server-side shared page using a variable in its place. This will allow you to use a snippet of reusable code that you can use 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 display the page, just set {$ pageURLValue} to what the current page is. Sorry, I do not know the rails, so the variable tag may be different. replace {$ pageURLValue} with what matters for rails.

Answer 3

I was struggling with the same problem - I had a popup with an iframe pointing to the html page containing the Twitter button. I got a popup from the very beginning. This seems to cause the Twitter button to not display. Instead of hiding it with the display: none / visibility: the hidden position of the popup is far (left: -10000px) and reset the left position when you want to show the popup. Hope this can help someone.

Answer 4

I included the Facebook page widget on my website, which was Angular SPA, and I had the same "needs to be updated" problem because I mistakenly placed the Script in the parent page named "index.html" ", but I put the built-in DIV in another subview specifically on the page "social_media.html". "index.html" loaded and ran Script the first time I visited any page of my website, but at that moment there was no visibility of the DIV on my as yet unused and not the requested "social_media.html" view, so when the user finally goes to the link, using the sub view for "social_media.html", "index.html" was not "reloaded" and thus did not restart Script unless I clicked the update. To fix this, I just put Script and DIVS in the same "social_media.html" to download and run immediately in all requests to download "social_media.html" as a watch page. Note: I also had to add the DhruvPathak approach too.

Answer 5

Just call the function FB.XFBML.parse(); dynamically instead of reloading the page.