Our support pages contains link to our videos on youtube with additional instructions. I've a requirement that when a link to our support pages are shared, the thumbnail should be displayed. i.e., link is to our website, but the thumbnail should be from our youtube video. The share can happen on social sites or email, etc. I've tried sending sharable link and something like below, but it does not work:
<img src="https://i.ytimg.com/vi/f3Synm4U4Uk/hqdefault.jpg"">
How does youtube do that? When you share their sharable link, the thumbnail and video button shows up. It is almost like the receiver(WhatsApp/telegram/etc) sends a get request to youtube to get the thumbnail upon receiving the YouTube link and display that.
You can't always control how a third-party client displays a link to your website, but a standard way of doing this is via the Open Graph protocol. This allows your website to contain metadata that robots can use to categorize your website and add metadata to links.
To tell a robot which image to show with your link, you can use the og:image tag, like so:
<meta property="og:image" content="https://c7.uihere.com/files/293/500/890/adorable-animal-cat-cute-thumb.jpg" />
Along with the thumnail you can add a lot of other metadata, such as a title and a description:
<meta property="og:title" content="Your link title" />
<meta property="og:description" content="Some description of your webpage" />
Related
I want to play video from google drive in exoplayer. I copied the shareable link. But this link leads to google drive video player page. I have checked shareable link response, it contains link for video thumb image and also the video link. But this video link is calling any code further to play the video. I want to get or more specifically extract the true video playable link from the response. Here is the code portion from the response which contains important links,
<meta name="referrer" content="origin">
<title>KOB-S3-E1.mp4 - Google Drive</title>
<meta property="og:title" content="KOB-S3-E1.mp4">
<meta property="og:type" content="video.other">
<meta property="og:site_name" content="Google Drive">
<meta property="og:url" content="https://drive.google.com/file/d/1eqNQOwDzDDjHizpUz-sB86VK4LisqGu1/view?usp=sharing&usp=embed_facebook">
<meta property="og:image" content="https://lh4.googleusercontent.com/eqNekxifrzidbBB-SzJbdJJ1xcOY6NFgR_0wIXHAnX-uHLO3FfUmgt-AokDallwbAXI=w1200-h630-p">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:video" content="https://video.google.com/get_player?docid=1eqNQOwDzDDjHizpUz-sB86VK4LisqGu1&ps=docs&partnerid=30&cc_load_policy=1">
<meta property="og:video:type" content="application/x-shockwave-flash">
The image thumb link is working, but the I can't find the link which I can use to play video in exo player android app.
This is the original shareable link:
https://drive.google.com/file/d/1eqNQOwDzDDjHizpUz-sB86VK4LisqGu1/view?usp=sharing
Google Drive video's are not designed to be streamed directly as you want - it can be done, see below, but you need to be aware that, as this is not the intended use, you could find it stops working overnight if Google Drive update the way they have architected or deployed their solution.
With the above caveat in mind, there are approaches that will allow you extract the original video URL - see this answer for a good example which outlines a number of approaches: https://stackoverflow.com/a/52397246/334402
One thing to be aware of - your original hosted video is actually being delivered using ABR streaming protocols, which means the video is copied into different resolutions/bitrates on the server side and each copy broken into chunks. The player can decide which resolution to download for the next chunk based on the current network conditions and player capabilities. See, for example, the 'quality' options for your video by looking at the settings:
Depending on the approach you use you may need to be aware of the particular URL for the specific resolution you want.
If you simply want to play the video back in an app and it does not need to be via ExoPlayer you may find it much easier to simply use the standard embed code within a Webview in your app.
I am trying to share a custom HTML/JavaScript player in Facebook. Is it possible?
I have tried with
<meta property="og:video" content="https://***/player.html">
<meta property="og:video:type" content="text/html">
<meta property="og:video:secure_url" content="https://***/player.html">
<meta property="og:video:width" content="500">
<meta property="og:video:height" content="500">
What I want to do is a system like the Twitter player cards. I wish to have my player embed in Facebook in an iframe (like Twitter). This way I can have a custom skin for my player and control it the way I want.
The code above is working if I link an MP3 file in secure_url & video but not when I link the player (example of link: https://***/player.html)
When shared on Facebook I have my link in a "video" element with the source set to my link.
well, youtube and soundcloud use html players for sharing. "https://www.youtube.com/embed/xPR-Ej-ENbk". So it should be possible, I am working on the same issue here, but when rendered on facebook am getting a div with class name "me-cannotplay", and am still trying to figure out if this something related to getting white listed by facebook or if there is something wrong with the html player i am using.
As #WizKid said, a simple answer is that you just cannot embed any javascript in facebook story.
When I click the share button for one of my wordpress posts, a popup window successfully opens. It displays the correct thumbnail image, and the title and summary text are correct as well.
However, when I actually go and look at the share on facebook, the thumbnail is not correct. For some reason facebook always shows the thumbnail for the first share I ever made for every single share I make.
What's weird is the title and summary are always correct, but I just can't get the thumbnail to work properly.
Here is the code I use for my Facebook share buttons:
<a class="facebook" onclick="return !window.open(this.href, 'Facebook', 'width=640,height=300')" href="http://www.facebook.com/sharer.php?s=100&p[title]=This Is The Title Of My Post&p[summary]=This is the summary of my post.&p[url]=http://www.mywebsite.com/individual-wordpress-post/&p[images[0]=http://www.mywebsite.com/images/this-is-my-thumbnail-image.jpg" target="_blank"><img class="size-full wp-image-96 alignleft" alt="shareonfacebook" src="http://www.mywebsite.com/images/this-is-my-facebook-share-button-image.jpg" /></a>
I put this code together after reading the following answers here.
Any ideas why the title and summary are always correct, but the thumbnail is never right? Remember, when I click the share button, the thumbnail is correct in the popup window but not the same when I go and look at the share on facebook.
Thanks for the help I really appreciate it.
Facebook uses the Open Graph protocol to determine what information is displayed when sharing a web page. The problem is more than likely not with your link but with missing Open Graph tags.
To debug the problem, copy/paste the URL you're testing into the Facebook Open Graph Debugger and press the 'Debug' button. The debugger will display the information Faceebook will use when sharing that specific URL.
As an example, the Open Graph tags for the home page of Stackoverflow are:
<meta name="og:type" content="website" />
<meta name="og:image" content="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon#2.png?v=fde65a5a78c6"/>
<meta name="og:title" content="Stack Overflow" />
<meta name="og:description" content="Q&A for professional and enthusiast programmers" />
<meta name="og:url" content="http://stackoverflow.com/"/>
The output for the Open Graph debugger is shown below.
To resolve your problem, you can:
Change your Wordpress theme to output the Open Graph tags on each post/page.
Install a plugin to output the Open Graph tags. Facebook have an official plugin or you can use Wordpress for SEO which will output Open Graph tags and also meta-data tags for Twitter.
To solve this problem you need just to edit your theme header.php and set this code below the tag:
<?php
if ( has_post_thumbnail())
{
$fb_image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
}
?>
<meta property="og:image" content="<?php echo $fb_image[0];?>" />
In some websites like facebook, when we post some link it show us thumbnails from that website, Like this in Picture below:
How to do that?
you need to fetch that URL and read the meta tags which will give you some information such as title, description etc. If you need to fetch the image weather read the image meta tag (exists if any) or read the first available image from the web page.
It's just a post/comment like any other. Only thing you need is info about that page. You can use curl for example to fetch page's data. Info you are looking for are in head of document in meta tags.
<meta name="og:type" content="website" />
<meta name="og:image" content="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon#2.png?v=fde65a5a78c6"/>
<meta name="og:title" content="Post a link and show thumbails from that link - php" />
<meta name="og:description" content="In some websites like facebook, when we post some link it show us thumbnails from that website, Like this in Picture below: How to do that?" />
Take those info and make your post/comment/whatever.
EDIT:
You don`t even need curl, you can use file_get_contents check out this answer
Trying to implement the example from here.
Facebook Share passes along the URL of
your page to our servers, which in
turn looks up certain HTML tags within
it. Those tags are used to display a
preview of the page. In order to
provide this preview, we always look
for the title of the page, a summary
of the main content and an image.
http://developers.facebook.com/docs/share
I added the share button to my site as described on the share page linked above.
<a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
In the header I added the tags it requires to create the preview in the news feed.
(I used the example tags, just to see if it would work.)
<meta property="og:title" content="Smith hails 'unique' Wable legacy" />
<meta property="og:description" content="John Smith claims beautiful football
is the main legacy of Akhil Wable's decade at the club. " />
<meta property="og:image" content="http://www.onjd.com/design05/images/PH2/WableAFC205.jpg" />
</script>
When the shared button is clicked it takes me to small shared window and I hit share.
However, when I navigate to my news feed, no preview of the page shows and none of the header tag information. It just shows:
Greg McNulty http://localhost:2259/iState/Shared.aspx?id=a051fc1b-4f51-485b-a07d-0f378528974e localhost 7 minutes ago · LikeUnlike · Comment · Share
Why isn't the preview working? (I get this same result without the header tags.)
Thank You.
(FYI - I am using the share because it allows for multiple shares of the same page whenever needed, compared to the like that allows it once and then the button physically changes saying the page is already liked.)
You can test how Facebook servers see your webpage by feeding the URL to this service.
http://developers.facebook.com/tools/lint/
In order for OpenGraph to work a facebook server must be able to visit the URL without a session or cookie. This means "localhost" web pages cannot pass open graph data.