Having a weird problem with social icons on my page. G+ is working perfectly but the Twitter Share button + FB Like button do not load up when my html page has finished loading.
Twitter:
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
here I only see the plain text "Tweet" (as a link) when the page finished loading. Not the actual twitter button.
Facebook (using some rails code here to display the current URL), here I don't see anything:
<div id="fb-root"></div>
<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/all.js#xfbml=1&appId=.......";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="<%= request.original_url %>" data-width="100" data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="false" data-send="false"></div>
Funny thing is: After the page has loaded and when I hit the reload button (CMD+R), the icons are showing up perfectly!
No idea how to solve that issue. I have tried to show the content using JS only when the document has finished loading but that did not solve it.
The turbolinks gem caused the problem.
Solved by following these tips here: http://reed.github.io/turbolinks-compatibility/twitter.html
http://reed.github.io/turbolinks-compatibility/facebook.html