Why doesn't the Twitter Summary card show a thumbnail in the Twitter widget for websites?


#1

Hello, I tried Googling for this but for some reason the Google search results just take me to the dev.twitter forum page and not to any particular discussion.

Anyway, I notice that the Summary card does not behave the same way in the Twitter Widget for Websites as it does in the official Twitter client. If I click on “Show Summary”, it shows only the text and links in the summary, and not the thumbnail image.

To see the issue, go to my web site here: http://www.wingedmammal.com/daily_emergence/emergence_0008.shtml

Now look at the Tweet that starts with “Testing “Summary” card”…, and then click on “Show Summary”. You’ll note no thumbnail shows up. If you look at that same Tweet on Twitter Web, the summary does show a thumbnail, see here: https://twitter.com/BattyBlogger

Is this a bug?


#2

It looks like TweetDeck also does not show the thumbnail for a Summary card, so I guess there is just no standardization for how Summary cards get displayed?


#3

The URL is:

The twitter:image URL referenced is:

http://www.wingedmammal.com/comic_con_2013/DSC_2338_thumb.png

When i type that into a browser, it doesn’t return an image.

That’s likely why our Card doesn’t show an image.


#4

Ryan: Good catch, thanks. However that doesn’t explain the different behavior between Twitter Web, the widget, and Tweetdeck. Why does it work in Twitter Web? Does Twitter Web have a fallback to the thumbnail that the other two do not use?

Open this in a browser and you will see the card thumbnail working despite the issue you mentioned:


#5

Ryan, I never got a response from you on this so I looked into the issue myself. It appears that the Web version of Twitter has an undocumented fallback to find the thumbnail for the Summary Card that other Twitter clients do not use. If “twitter:image” is set to a value, but that value is a URL that does not exist, Twitter web will fall back to “og:image” and attempt to use that URL instead. “og:image” is of course used by Facebook for its similar system of displaying meta-info about pages.

The reason this is a problem is that other clients, like Tweetdeck and the Web Widget, do not appear to use this fallback, creating the potential for bugs because the Web version will work as expected but the others will not.

Steps to see the problem:

  1. Create a web page that has a Tweet button, Summary Card info, and has “twitter:image” set to a URL that does not exist.
  2. Set “og:image” on that page to a URL that does exist and pointing to a valid thumbnail image.
  3. Tweet from the Tweet button on the page.
  4. In Twitter Web, look at the Tweet, click on Show Summary, and you’ll see the thumbnail came from “og:image”.
  5. In TweetDeck, look at the Tweet, you’ll see the card does NOT have the thumbnail.