I'm using the Tweet Lookup API (part of V2). When a user shares a link in a tweet, a preview of that URL is generated in that tweet. I want to recreate this using API. So how can I get the preview image of the URL and also other details like the domain, etc?
For example, if you look at this tweet: https://twitter.com/elonmusk/status/1429907171639103489
If you see the above tweet, there’s a URL preview card, with image of starlink and a brief description of the link. How to get these details through the Twitter API?
I suppose I am a little late, but..!
Unfortunately, to my knowledge there is no way to get the preview image from the twitter API.
You have to find the link from the tweet, get that site and scrape the image from there. Websites can tell twitter what image they want to use by making a tag that has the property "twitter:image"!
--
What you can do, for example, is get the original URL for the post from entities!
E.g. making the tweet look-up like this:
https://api.twitter.com/2/tweets/1532014165686206466?tweet.fields=entities
From there, get the original url, for example from the "unwound_url" in the JSON response of that look-up example.
You need to make a request to that site and from the html response, look for a tag that has the property set to "twitter:image"
In that tags content you have your image link!
See:
https://developer.twitter.com/en/docs/twitter-api/tweets/lookup/api-reference/get-tweets-id
https://developer.twitter.com/en/docs/twitter-api/data-dictionary/object-model/tweet
I hope my rambling made sense and good luck!
Unfortunately, this is impossible because Twitter requires URLs with Twitter meta tags in order to show these Links as cards with images. So the only way to do that is to add these meta Tags in the head of your website :
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="LINK TITLE HERE">
<meta name="twitter:description" content="LINK DESCRIPTION HERE">
<meta name="twitter:image" content="PREVIEW IMAGE HERE">
This is how I made it on my own website. I hope that will help you.
Related
An url was postet at reddit: https://www.reddit.com/r/harrypotter/comments/apwv4v/rawenclaw_or_hufflepuff/
But reddit was not able to retrieve an image from the website and is showing a default image.
How do you tell websites like reddit which image to show there? And how can you set this image in a nuxt vue file?
Reddit (and most of the other major sites that do this, like Facebook and Twitter) uses the og:url Open Graph tag, if present.
Full details of Open Graph can be found at http://ogp.me/, but fundamentally:
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
If an og:image is not present, most sites will try to guess which image on the page is the right one. They'll often get it wrong.
Telegram show description meta tag as link preview.
I changed the description meta tag but the link preview of my website didn't changed.
How to force telegram to update link preview?
Go to #webpagebot and send the link (up to 10) you want to update. Automatically will scan your site and generate the new image thumbnail, site name and description.
Remember to have og prefix in your html tag as: <html prefix="og: http://ogp.me/ns#"> or telegram bot will not update the graph cache.
via telegramgeeks
You may add /?v=n at the end of URL when sharing the link, where n can be any number and should increase after an update.
Sending the pure link to #webpagebot would not work so I used
<meta property="og:url" content="https://mylink.com" />
and it worked.
Actually it still works, added this line of code to my html head:
<meta prefix="og: http://ogp.me/ns#" />
then move to telegram bot and update your link 10 times:https://telegram.me/webpagebot?.
Once you have done that, you can copy your link again and the preview comes out.
I am trying to figure out if it's possible to pass in more than a URL to share when using the LinkedIn JS API.
My code is:
IN.UI.Share().params({
url: 'http://www.example.com'
}).place.();
Now I have tried to pass in other params like:
IN.UI.Share().params({
url: 'http://www.example.com',
title: 'A Title',
summary: 'A Small summary'
}).place.();
But that did wot work. It seems to just ignore those extra params.
I know I can do it using the custom share functionality:
http://www.linkedin.com/shareArticle?mini=true&url={articleUrl}&title={articleTitle}&summary={articleSummary}&source={articleSource}
But I want to use the JS API so I can get back a token to verify if it was posted properly. With the shareArticle way it takes about 20-30 seconds to actually verify if it was shared using this: (https://developer.linkedin.com/retrieving-share-counts-custom-buttons).
Unfortunately there is no way to do this. The Linkdin Javascript API and Linkdin Share button relies completely on meta tags to scrape information. Such a Pity.
Just set the og: property tags on the page that you are sharing, that way LinkedIn knows that the title, image, etc., fields, are all actually appropriate and right for the site. You can set them like so...
<meta property='og:title' content='Title of the article"/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg"/>
<meta property='og:description' content='Description that will show in the preview"/>
<meta property='og:url' content='//www.example.com/URL of the article" />
Source: LinkedIn Developer Docs: Making Your Website Shareable on LinkedIn.
Works for my site!
You can always use the LinkedIn Poster Inspector on your site's URL to make sure you did it right!
I am using links like this : https://plus.google.com/share?url=www.myurl.com to share articles on Google+ from a website.
This works fine but the preview image of the share is not right.
I read in the Google doc that you need to specify an image like this:
<img itemprop="image" src="thumbnail.jpg" />
The thing is, the image I want to use is not being displayed on the page I want to share. I have specific thumbnail images (of smaller size than the images displayed in the article) that I'd like to use.
Is there a way to specify an image for Google, like the og:image tag for Facebook for example, without having to use the tag?
Is there a way to specify an image for Google, like the og:image tag for Facebook for example, without having to use the tag?
https://developers.google.com/+/plugins/snippet/:
2. Open Graph protocol
If the page contains Open Graph properties for the title, image, and description, they will be used for the +Snippet.
Additionally, the schema.org tag that defines your page's preview image does not need to be displayed on the page, you could instead define it within your HEAD as metadata:
<meta itemprop="image" content="thumbnail.jpg" />
Most of the news/blogs websites include RSS feeds link in their header. For example:
<link rel="alternate" type="application/rss+xml" title="Example Feed" href="http://example.com/feed/" />
I want to know what is the practical use of adding above? Is it to tell the browser that the website has RSS feeds? In past Firefox has the button in the address bar, but now they have remove it. Also if some user want to subscribe the RSS, he needs to enter the feeds url directly. So where it is being used? Thanks
Yes, it is to tell anything consuming the page (e.g. a browser) that there is an alternative form of the content elsewhere.
Most browsers used to all have an RSS button that would light up if it saw this, to allow you to subscribe to the feed.
RSS has (arguably) dropped in popularity, so this is less common today by default in browsers. But extensions and so on will still use it.
Or indeed, if you add a "normal" url to something like Google Reader, it will fetch that page, and look for an rss link in the head tag, to find the final feed url.