I have a basic Twitter Widget like this on a webpage:
<div class="twitter mobile-hide">
<a class="twitter-timeline" href="" 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/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: / 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?
I have a basic Twitter Widget like this on a webpage:
<div class="twitter mobile-hide">
<a class="twitter-timeline" href="https://twitter./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./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./ 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?
Share Improve this question edited Apr 27, 2016 at 18:03 AgentSpyname asked Apr 25, 2016 at 23:37 AgentSpynameAgentSpyname 1051 silver badge9 bronze badges3 Answers
Reset to default 5I was having the same problem because I was using Next.js to pre-render my pages.
so the solution was to put the <script/> inside the <head></head> of my html.
import Head from "next/head";
const TwitterWidget = () => {
return (
<div>
<Head>
<script
async
src="https://platform.twitter./widgets.js"
charSet="utf-8"
></script>
</Head>
<a
className="twitter-timeline"
href="https://twitter./_THE_TIMLINE_URL_"
>
Tweets by _SOMEONE_
</a>
</div>
);
};
export default TwitterWidget;
Not like this:
const TwitterWidget = () => {
return (
<div>
<a
className="twitter-timeline"
href="https://twitter./_THE_TIMLINE_URL_"
>
Tweets by _SOMEONE_
</a>
<script
async
src="https://platform.twitter./widgets.js"
charSet="utf-8"
></script>
</div>
);
};
export default TwitterWidget;
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./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.
I had a similar problem with the widget as it was generated. After consulting in the Twitter dev forums I read a solution to add twttr.widgets.load(); at the end of the script, which I see your widget code doesn't have. That is, try using
<div class="twitter mobile-hide">
<a class="twitter-timeline" href="https://twitter./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./widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); twttr.widgets.load();</script>
</div>