Twitter embeds just a blockquote

I’ve seen some discussion about Twitter embeds, and I think I saw a screenshot that showed a proper embed. Mine still look like blockquotes, though, with a link to the featured pic, instead of actually showing it. (As shown below)

Am I doing something wrong? I’ve resorted to taking a screen shot of the tweet then using that image.

Are you self hosting? If so, you need to add a twitter developer key.

Resources:

1 Like

No, not self-hosting, and do not have access to the installation via FTP or SSH. I might be able to get the hosting owner to make the change for me.

But, a question: Based on what I read, the Twitter developer key was only need to make the cards look right in emails. Is it also needed to make the Twitter cards display correctly on the web site? If so, I will get one right away. Being a news site, we use tweets regularly in stories.

You’re right, I just tried embedding a tweet using /twitter {url} and it worked perfectly (both in the editor and in casper). Are you seeing this happen with multiple tweets? It sounds like you are, but want to confirm! Do you see any errors in your console?

Yes, all tweets. They have always shown up as plain block quotes.

(I need to clarify the hosting situation: I am not on Ghost Pro, but on another hosting service that doesn’t provide any access to the server. So yes, I am self-hosting, but “managed hosting” would be a better way to put it. So I don’t have access to the console.)

As I said, if the developer key will make them work correctly on the web site, I will get one and try to get the hosting owner to add it.

The screenshot I shared with you is a local ghost installation without the twitter developer key, so I don’t think you need it for the web.

Do you see any errors in your browser console? If not, what happens when you go to https://YOUR_SITE_URL/ghost/api/canary/admin/oembed/?url=https%3A%2F%2Ftwitter.com%2Fshanselman%2Fstatus%2F1475556695048810497&type=embed? You need to be logged in for this to work.

One other thing - are you able to share the URL to your site? You might have certain security measures (e.g. CSP) which might prevent the tweets from becoming interactive. The way the embed works is the tweet starts as a blockquote, and after the twitter javascript loads, becomes interactive

1 Like

Ah, you meant browser console, not the operating system console on the server.

Yes, a number of errors, with a different set depending on how I was viewing the post. (I actually published a test post to see what errors were generated.) I’m not copying them here for now, as they would make the reply rather tedious. :slight_smile:

However, I did add a tweet card to an existing story from some months ago, and republished it. Here it is. The tweet card is at the bottom; it’s a repeat of a tweet I screen-captured earlier in the story. Let me know what you find out. Thanks for the help!

Also, you asked about what happens when I use that URL. The result:

{"url":"https://twitter.com/shanselman/status/1475556695048810497","author_name":"Scott Hanselman","author_url":"https://twitter.com/shanselman","html":"<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">I hate this no man’s land between Christmas and New Years. I have a week’s vacation here but in this weird space time has no meaning.</p>&mdash; Scott Hanselman (@shanselman) <a href=\"https://twitter.com/shanselman/status/1475556695048810497?ref_src=twsrc%5Etfw\">December 27, 2021</a></blockquote>\n<script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n","width":550,"height":null,"type":"twitter","cache_age":"3153600000","provider_name":"Twitter","provider_url":"http://www.twitter.com/","version":"1.0"}

Twitter card looks correct to me!

image

And the result you shared suggests there’s no issue with the server fetching tweets, so I think there might be a browser-specific issue. If you have any browser settings or extensions that do content filtering (such as ad blockers or third party script blockers), the twitter javascript might be blocked by it.

This is weird to me. The tweet on my site looks like just a block quote in preview. But, I looked at it on my iPhone in Safari, and it looks okay.

Thanks for your help with this. I’ll start using Twitter cards again, rather than having to do screen shots every time.

Try clearing that web browser cache and cookies.

I found a similar issue in the Ghost Admin area for only a few secs when I added a tweet card.