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.
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
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...
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.
I cannot get a caption to show up on a user-generated photo, like so:
Instead, this is a non-user generated photo,with a title and description:
after enabling user-generated photos (via iOS - Facebook Open Graph Api -- ensuring that photos are user generated ), it looks like this:
note- on the image above, both title and description are set just as in the first image. However, the description does not show up. The title, on the other hand, does.
After setting the title to empty, this is the result:
Open graph object on the web is like so:
<meta property="fb:app_id" content="<?php echo strip_tags($_REQUEST['fb:app_id']);?>">
<meta property="og:url" content="<?php echo strip_tags(curPageURL());?>">
<meta property="og:type" content="<?php echo strip_tags($_REQUEST['og:type']);?>">
<meta property="og:title" content="<?php echo strip_tags($_REQUEST['og:title']);?>">
<meta property="og:description" content="<?php echo strip_tags($_REQUEST['og:description']);?>">
<meta property="og:image" content="<?php echo strip_tags($_REQUEST['og:image']);?>">
<meta property="fb:explicitly_shared" content="true">
What do I need to do in order to get the caption to show up alongside having a user_generated, full size image?
Maybe something is configured incorrectly on facebook? Meal is a predefined object defined by facebook. Should I try using another one?
It's not a caption, it's a user message.
You need to set the message in your code and in settings as a field as described in https://developers.facebook.com/docs/opengraph/using-actions/
Allows users to write a personalized message attached to this action. You can only use this when the text is entered by the user and not pre-populated. You can mention users and pages inline using mention tagging.
Furthermore, in iOS code (objective-c) from this tutorial
https://developers.facebook.com/docs/tutorials/ios-sdk-tutorial/publish-open-graph-story/:
In this method:
- (void)postOpenGraphActionWithPhotoURL
setting this property:
action.message = #"your message here";
gives the desired result.