The Card validator is displaying my summary card correctly, however, when I actually try to share it buy clicking the "twitter-share-button" it does not display a twitter card, it only shows a regular tweet.
This what the validator says:
Your site is whitelisted for summary_large_image card
INFO: Page fetched successfully INFO: 18 metatags were found INFO:
twitter:card = summary_large_image tag found INFO: Card loaded
successfully
These are the tags I'm using:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="#username">
<meta name="twitter:creator" content="#username">
<meta name="twitter:title" content="Some Title">
<meta name="twitter:description" content="Some description.">
<meta name="twitter:image" content="http://example.com/images/dog.jpg">
This is the html:
<a class="twitter-share-button"
href="https://twitter.com/intent/tweet?text=Testing Testing Testing">
Tweet</a>
For anyone strugling with tyhe same issue, I'm responding to my own question.
Here's what I found out:
1. First off, keep in mind that the card only shows in the final posted Tweet - not in the Tweet composer window. However, in my case, it wasn't showing in the final posted tweet either.
2. You have to include the link to the page you want to share after the text parameter. Additionally you need to encode its URL value. So, instead of text=http://example.com use text=http%3A%2F%2Fexample.com. If you go to http://www.w3schools.com/tags/ref_urlencode.asp you can make this encoding convertion automaticaly.
3. I've been told that sometimes there is a delay as twitter's crawler caches your site, which would explain why the card doesn't show in the final posted tweet in your fist attempts to share it. In my case it took 48 hours, after which, clicking the share button will post the card immediately.
Hope this my be helpful to someone else...
Related
I wonder how to get the summary card (shown below) using Tweepy?
Thanks.
Dan
the summary card is shown in the circle
The Twitter Card is generated by Twitter when a Tweet (or a Direct Message) includes a URL.
Using Tweepy you can get the content of the Tweet including the URL, in both the t.co form (used by Twitter) and the original one:
'urls': [{'url': 'twitter tiny url', 'expanded_url': 'https://www.example.com',
In order to be able to generate the Twitter Card preview the web page must include specific META tag
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="#beppecatanese" />
<meta name="twitter:title" content="My GitHub space" />
<meta name="twitter:description" content="View my GitHub space." />
<meta name="twitter:image" content="https://github.com/gcatanese" />
The Twitter Card is not always correctly generated, I am explaining this here if you are interested
I would like to show a preview of the twitter card I have. I've set all
meta tags:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Vrienden uitnodigen">
<meta name="twitter:description" content="SayHi.Dog is een nieuw platform voor hondenouders. Leer wat het is, meld je hond aan, win prijzen en verdien beloningen voor jouw hond.">
<meta name="twitter:image" content="https://sayhi.dog/sayhi-fb.png?v=1">
<meta name="twitter:domain" content="https://sayhi.dog">
And I make the button share it like this:
https://twitter.com/intent/tweet?text={{ urlencode($shareLink) }}
But I only see the url in text, no card preview when the user want's to share the url.
When I check it here https://cards-dev.twitter.com/validator it's showing the card correctly but not in preview mode when the user want's to share the url.
How can I fix this?
Card previews do not show in the web sharing dialog, but they will work in the Tweet when it is posted.
If you are using the web sharing dialog, hit enter after you put in the URL. Then the preview should show. That worked for me.
I read these 2 doc pages: summary and
summary-card-with-large-image, but I don't really see the difference.
Example:
<meta name="twitter:card" content="summary" /> <!-- or summary_large_image -->
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />
What is the actual difference betwen both at the end? The rendering looks identical:
You're quite right and I'll make a note to update these documentation pages. A summary card usually has a small image on the left of the text in the timeline - this variance in the docs may be the result of using embedded Tweets. Both examples in the documentation show what I'd expect a summary card with large image to render as.
As suggested by #AndyPiper, this is probably a documentation problem. Here is the result of a content="summary", screenshot from Twitter in Chrome browser (desktop):
This is the current twitter card data I have inside <head>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="#tradukka">
<meta name="twitter:title" content="Currency exchange: United States Dollar (USD) - Argentine Peso (ARS)">
<meta name="twitter:description" content="Currencies exchange updated in real time: United States Dollar (USD) - Argentine Peso (ARS) / 1 USD...">
<meta name="twitter:image" content="http://tradukka.com/meta/359ac65be829e896c12a3126fa9c71d0.jpg">
<meta name="twitter:image:width" content="750">
<meta name="twitter:image:height" content="370">
<meta name="twitter:url" content="http://tradukka.com/currency/usd/ars">
If I send a tweet with that link, all the information is being shown in the tweet, except the image:
I also tried using the card validator:
...it fetches everything except the image.
Also, I already tried using twitter:image:src as well. The domain is whitelisted. Any ideas on why the image is not being displayed inside the tweet?
The issue was caused by robots.txt. Make sure that the twitter bot is allowed to crawl the directory containing the twitter images (in this case, /meta).
I am also facing the same problem.
The solution is just switching from summary card with large image to summary.
To apply this you have to edit the script
"meta content='summary_large_image' name='twitter:card'"
as
"meta content='summary' name='twitter:card'"
This solves the problem, but I don't know why the large image type cards are not working.
Looking to set up a Twitter product card integrated through Shopify -- while the product info is populating in the validator preview and the got confirmation that the card was approved, there is no next step available. The help article that shopify provided instructs to use "catalog view" as next step however I haven't been able to access. Any insights?
https://docs.shopify.com/manual/configuration/store-customization/social-media/twitter/taking-advantage-of-twitter-cards
EDIT: If you're already able to view the proper card in the validator tool, then all that's left is to tweet out a link and see if it works!
--
It looks like Twitter has changed their Card Application & Validation pages since that Shopify article was written.
According to https://dev.twitter.com/cards/types/product, just copy and paste this code into your twitter-card snippet, and update it with your information.
<meta name="twitter:card" content="product">
<meta name="twitter:site" content="#iHeartRadio">
<meta name="twitter:creator" content="#iHeartRadio">
<meta name="twitter:domain" content="iheart.com">
<meta name="twitter:title" content="24/7 Beatles — Celebrating 50 years of Beatlemania">
<meta name="twitter:image" content="http://radioedit.iheart.com/service/img/nop()/assets/images/05fbb21d-e5c6-4dfc-af2b-b1056e82a745.png">
<meta name="twitter:label1" content="Genre">
<meta name="twitter:data1" content="Classic Rock">
<meta name="twitter:label2" content="Location">
<meta name="twitter:data2" content="National">
Once you've done that, you can go back to the Validator Page (https://cards-dev.twitter.com/validator) to check that everything works the way it should.