Twitter embeds display differently in different browsers / platforms

[playability]

Hi, I am trying to embed a curated selection of tweets on my website.

However, the cards are only rendered correctly in Chrome (MacOS), not in Safari or Chrome (Android). Instead of showing the cards, these browsers only show text without profile pictures, images or formatting.

Any help with this would be much appreciated.

• Julian

[gbalan0n]

Hi there,

Thanks for bringing this to our attention. May I ask what method are you using to embed Tweets and is it only Tweets with cards (and not Tweets with other media such as photos and videos) that experience this behavior?

[playability]

Hi!

Thanks for getting back to me. I’m using the embed codes that I get from Twitter by clicking “embed” on the tweet I want to embed, e.g.

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">My gratitude &amp; admiration to <a href="https://twitter.com/brtmoments?ref_src=twsrc%5Etfw">@brtmoments</a> <br><br>Some of the warmest &amp; most kickass people I&#39;ve ever met❤️<br><br>And I was blown away by the caliber of the people who rolled thru kraftwerk 🔥<br><br>ty <a href="https://twitter.com/playability?ref_src=twsrc%5Etfw">@playability</a> for this portrait of me in the control room♥️<br>ty <a href="https://twitter.com/q2design?ref_src=twsrc%5Etfw">@q2design</a> for this CB pixel art❤️ <a href="https://t.co/0n1WsUUUiw">pic.twitter.com/0n1WsUUUiw</a></p>&mdash; ezra shibboleth.eth (@shibboleth88) <a href="https://twitter.com/shibboleth88/status/1518604832533512192?ref_src=twsrc%5Etfw">April 25, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

This happens with any kind of tweet I embed, regardless of whether it’s a card, image, video, or just text.

• Julian

[gbalan0n]

Thank you Julian! Unfortunately I am still not able to reproduce the behavior :\ Are you able to see the Tweet embed render in this jsbin file on Safari or Chrome (Android)? Do you see any errors in the console? It looks like you are only getting the bare bones embed code on your site, could there be anything blocking the widgets-js script from running?

[playability]

Hi Gabby, thanks for your reply. The jsbin file renders correctly in Chrome (Android and MacOS) and in Safari.

But when I check my website’s JavaScript console I get tons of errors of the following type:

Tweet.html:1 Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

Any idea what might be the cause?

[gbalan0n]

Hey, thanks for letting me know. Hmm… since Tweets render correctly for you on the jsbin across different browsers, I think the issue may be localized to your development environment. Do you have any Chrome extensions toggled on? I found this resource that could be helpful if so. If not, would you mind sharing a code block example of how you are injecting Tweets into your site?