AgentSpyname AgentSpyname - 7 months ago 26
Javascript Question

Twitter Widget Not Always Loading

I have a basic Twitter Widget like this on a webpage:

<div class="twitter mobile-hide">
<a class="twitter-timeline" href="https://twitter.com/TheStickyNoteEd" data-widget-id="722809724224151554">Tweets by @TheStickyNoteEd</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>
</div>


Sometimes, the widget will disappear only leaving a Link to the Twitter. I am just running the webpage locally on my hard drive. It does not seem to relate to domain restrictions as I have also deployed it here: http://beta.thestickynote.com/ and the problem continues to occur.

The site may ask you for a username/pass, just use this generic guest login.

User:beta
Pass: thestickynote

What could be causing this problem?

Answer

This problem can be caused by the Domain restrictions of your browser to prevent cross site scripting. When running files locally, sometimes the browser considers each file its own "Domain" and so it will not allow the page to draw data from the Twitter server.

When this occurs, the fallback is to display the link to your Twitter account, as evidenced by the part of the markup:

<a class="twitter-timeline" href="https://twitter.com/TheStickyNoteEd" data-widget-id="722809724224151554">Tweets by @TheStickyNoteEd</a>

Update

This problem may be related to your use of Turbolinks. Turbolinks is a Javascript library which makes pages load faster, but it seems to break the Twitter widget's functionality, causing the fallback link to appear.

Update 2

Inline Javascript is not loaded when a page is fetched by AJAX, this is causing the widget not to load.

Comments