Menu
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?
439
I 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.com/widgets.js"
charSet="utf-8"
></script>
</Head>
<a
className="twitter-timeline"
href="https://twitter.com/_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.com/_THE_TIMLINE_URL_"
>
Tweets by _SOMEONE_
</a>
<script
async
src="https://platform.twitter.com/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.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.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
