First of all, please note that I searched for a SocialMediaStackExchange to ask this question on, but there doesn't seem to be one.
Here's what I'm wondering. When posting a tweet to twitter, if it is a youtube link or specific web site's link, then twitter will show an Expand functionality which the user can click to preview the media content right in the Twitter interface.
Does anyone know if this is determined by Twitter or if there is some way I can alter my web site to enable the preview on twitter?
I'd like to make it so when I tweet a blog entry that people can preview the first bit of contents of the article.
Here's an example: (simply adding the link, displays the preview content shown) In this case it is an article on InfoWorld.
There's a link on Twitter that explains Expanded Content, but not how to make it happen.
https://blog.twitter.com/2012/experience-more-with-expanded-tweets
You probably want to look at "Twitter Cards". They're really simple to set up. You add a few lines of code to your page's header, get your site validated (an automated process), and you're away.
Here, for example, is one of my tweets with "preview" content https://twitter.com/edent/status/516544061495193601
The extra HTML code is just:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="#edent">
<meta name="twitter:site" content="#edent">
<meta name="twitter:title" content="Tim Berners-Lee and the Freedom of The City">
<meta name="twitter:description" content="Last week, I had the privilege of being invited into the Guildhall to watch Tim Berners-Lee receive the Honorary Freedom of the City. I was one of a dozen bloggers and tweeters asked to live tweet th">
<meta name="twitter:image:src" content="https://shkspr.mobi/blog/wp-content/uploads/2014/09/TimBL-Least-Well-Dressed-435x375.jpg">
<meta name="twitter:image:width" content="280">
<meta name="twitter:image:height" content="150">
Different styles of cards have different sorts of previews - video, images, app installs, etc.
Also, I will point one important thing. For twitter:image meta its content parameter must be absolute path, not relative. Otherwise it will not work.
<meta name="twitter:image content="/resource/img.jpg"/> //will not work
<meta name="twitter:image content="https://yourdomain.com/resource/img.jpg"/> //will work
Related
A YouTube video is not being played due to copyright issue and gives a message as follows:
This video contains content from somebody, who has blocked it from display on this website or application.
Watch on YouTube.
Here is the JSfiddle for two videos, where one video is being played but the other is not:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<iframe allowfullscreen="" allow="autoplay; fullscreen" src="https://www.youtube.com/embed/UPLNXZQdGxo?autoplay=1" frameborder="0"></iframe>
<br />
<iframe allowfullscreen="" allow="autoplay; fullscreen" src="https://www.youtube.com/embed/6jiNS_4CEug?autoplay=1" frameborder="0"></iframe>
</body>
</html>
Is there a way to support playing such videos?
Video isn't available in my country/region
Some YouTube videos may not
be available in your country/region for the following reasons:
Video owners have chosen to make their content available only to
certain countries/regions (usually due to licensing rights) YouTube
may block specific content to comply with local laws
-- Youtube
Basically this means that the video isn't playable in your region. While it may become available in the future, currently you cannot do anything about that.
For future reference, this online tool checks if a video is available in your region.
Hope this answered your question!
the link you provided works for me. (I'm in Germany)
I think it is best to test your solution with different localization since I'm guessing YouTube is blocking it for you specifically for you. There might be plenty of reasons besides localization like age restriction etc.
Uploading Video to a different platform might help
On my website, I have some OpenGraph metadata so I can customize the thumbnail, title, and description for when it is shared in social networks or messaging apps:
<meta property="og:title" content="Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://mypage.com" />
<meta property="og:image" content="http://mypage.com/path/to/thumb.png" />
<meta property="og:description" content="Description of my page" />
The other day, sending messages via Messages/iMessage on iOS, I found that some shared links (not from my site) play a muted video instead of an static image as a thumbnail (it seems to happen since iOS 10). Here is an example from an Amazon link:
Is there a way to specify that instead of using a static image as a thumbnail, the app should use a video? Either using OpenGraph tags or a different system. I tried using this, but it doesn't seem to work:
<meta property="og:video" content="http://mypage.com/path/to/video.mp4" />
Also, I haven't been able to replicate this effect in a messaging system different than iMessage (I tried with Google Chat, Skype, WhatsApp, GMail...) and I have only seen the videos when it's an Amazon link, but looking at the source code I don't see anything that indicates that a video should be taken or which one (there are several, iMessage picked the first one), and I haven't found related information online. Maybe it's something that only works between Apple and Amazon, I wonder if it's something that any site could use.
I was using the right tag (og:video), but the problem was the file size of the video.
According to Apple's "Best Practices for Link Previews in Messages" Technical Note, both og:video or twitter:player:stream would work to add a video preview to a message (emphasis mine):
Videos in link previews
Putting a direct link to your video asset in the Open Graph metadata is better than referencing an embeddable video page. With the direct link to video, Messages will load and display fast, and use the system user interface for video playback.
If the link preview machinery encounters a og:video or twitter:player:stream that points to a downloadable single media asset (for example, an MPEG-4 file) that can be played, it will attempt to download the video and automatically play it back.
Video that can be streamed but not downloaded (such as HTTP Live Streams or QuickTime Reference Movies) will still play inline, but require the user to tap to start playback. Video that requires embedding HTML or plug-ins will not play inline.
And at the bottom of the page, it is specified that there are some limits for the linked media, and in particular there is a limit of 1MB per resource that I was not following (emphasis mine):
Limits
All limits are subject to change at any point in time; use these only as guidelines.
Icons should be square, and at least 108px per side.
Images should be at least 900px in width.
Images less than 150px in width will not be used, or may be presented as icons.
The main resource located at the link is limited to 1MB. The total size of sub-resources (the icons, images, and videos which are selected as most interesting) is limited to 10MB.
I am trying to create Twitter cards using the twitter meta tags (and Open Graph for other sites like Facebook). When I see my twitter feed from others like say NPR News the cards are expanded by default.
However when I post the same content - the card is not expanded by default. I have to click on the tweet and the click on "Details" or "View Summary" which redirects me to a new page where the card is expanded.
What makes twitter decide weather to display the card (in my case Summary Large) expanded or collapsed?
Edit:
Here are the meta tags in use,
<meta property="og:title" content="**masked**"/>
<meta property="og:description" content="**masked**" />
<meta property="og:image" content="**masked**" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image:src" content="**masked**" />
<meta property='twitter:site' content='**masked**'/>
(I am currently not using twitter:title and twitter:description since those are being read by twitter from the OpenGraph equivalent tags used.)
Take a look at this discussion. This is the expected behavior of Twitter cards (sadly).
If you want to show it by default, the tweet has to be either promoted or the image has to be hosted on Twitter's site (if it's hosted on a third party website, it will not show by default).
Twitter is now auto-expanding cards in their android and ios apps. Still not on desktop and mobile web though.
aug wrote
If you want to show it by default, the tweet has to be either promoted or the image has to be hosted on Twitter's site
but that's not true. I have had cards that were expanded by default. They were standard Summary Cards, though, and not Summary Cards with Large Image. Maybe that's where Twitter makes a difference? The reasoning could be that the small image shown in a standard Summary Card takes less bandwidth and attention. This is speculative. Can anybody confirm?
I have a collection of RSS feeds in my iOS app, and I need to get the main image to post alongside the title. The posts do not have any image or media:thumbnail elements to use. I have looked through all the elements that show up, and nothing else would give me an image or an image URL.
Is there any way to extract the main image of a page, or some other method, to get the thumbnail of the post?
Optimally, I would not want to have to load every single webpage to look at, because users on their data plan would not want that many pages loaded that they don't want to look at.
I am currently using KMXMLParser in my app.
Actually I think it's easy to look for Open Graph image in the page. Usually most of the news or blog sites follows open graph protocol. There will be a meta tag og:image in the meta data of the page. It's easy to fetch and analyse this metadata of the page rather than fetching the whole page and finding the big and small images.
As an example, the following is the Open Graph protocol markup for The Rock on IMDB:
<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
For more info on Open graph Protocol refer http://ogp.me/
Please remember that this won't work for all sites but most of the popular sites. So for those sites that dosen't follow this you have to find another way.
You could search for image URL's and then choose one of them (first you find?).
Most apps do that. Also I guess that's how Facebook chooses a thumbnail image when you share a link.
Alternatively you could download the images and choose the biggest, etc. Probably not worth the effort unless you pre-load images anyway.
I want to use regular share button like on this page https://twitter.com/about/resources/buttons#tweet but to add an embedded image from my site, not just link.
I know all about 1.1 api and uploading, but making an tw application and then ask visitor on my site to give permission to write on his timeline just to share one pic from my site is not likely scenario, so I think about alternatives.
I've noticed when just paste links of pic that are already uploaded on twitter into tweet, if you paste link like https://pbs.twimg.com/media/BPpk_KUCMNBXsPN.jpg that is not going to be embeded, but if you paste link like this pic.twitter.com/NuDSx1ZKwy it will be embeded. So I think if I make profile and app that will call https://upload.twitter.com/1/statuses/update_with_media.json and upload pic, and then paste link in share button I will get tweet with pic embeded. Or there is better way? I use php.
Look into twitter cards.
The trick is not in the button but rather the page you are sharing. Twitter Cards pull the image from the meta tags similar to facebook sharing.
Example:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="#site_username">
<meta name="twitter:title" content="Top 10 Things Ever">
<meta name="twitter:description" content="Up than 200 characters.">
<meta name="twitter:creator" content="#creator_username">
<meta name="twitter:image" content="http://placekitten.com/250/250">
<meta name="twitter:domain" content="YourDomain.com">
To create a Twitter share link with a photo, you first need to tweet out the photo from your Twitter account. Once you've tweeted it out, you need to grab the pic.twitter.com link and place that inside your twitter share url.
note: You won't be able to see the pic.twitter.com url so what I do is use a separate account and hit the retweet button. A modal will pop up with the link inside.
You Twitter share link will look something like this:
Share on Twitter
You're right in thinking that, in order to share an image in this way without going down the Twitter Cards route, you need to to have tweeted the image already. As you say, it's also important that you grab the image link that's of the form pic.twitter.com/NuDSx1ZKwy
This step-by-step guide is worth checking out for anyone looking to implement a 'tweet this' link or button: http://onlinejournalismblog.com/2015/02/11/how-to-make-a-tweetable-image-in-your-blog-post/.
You can create an href link like this:
Click to tweet
You can grab the image link if it has been tweeted first.
Go to the tweet, click on options & click Embed tweet. You will find the image link in the Embed tweet.
I used this code to solve this problem.
<img src="path_to_my_image"/>
You can check the tweet-button documentation here tweet-button
Using Javascript to create a twitter button, I use Fontawesome's classes for fetching the design. Remember to add the Fontawesome script in your HTML head.
let twitter_btn = document.createElement("i")
twitter_btn.className = "fa-brands fa-twitter-square fa-xl"
twitter_btn.setAttribute("index", array_index)
element.appendChild(twitter_btn)
twitter_btn.addEventListener("click", () => {
let url = "https://twitter.com/intent/tweet?url=" + params.url +
"&text=" + params.text
window.open(url)
})