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.
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.
Currently, I'm using this to make a beautiful embed:
<meta name="description" content="Watch non-copyrighted media online.">
<meta name="keywords" content="bruh,dev,BruhDev,memes,meme,code,developer,software,engineer,coder,code,programmer,program,develop,develope,games,media,movies,tv,shows,movie,show,series,episode,season,seasons,episodes,netflix,hbo,hulu">
<meta name="theme-color" content="#FFA90A">
And this is how it looks like on Discord:
click here for image
But this is not enough, I want to embed an entire player into this, which you can see on
http://media.bruhdev.com/media/movies/watch/3, like on Youtube: click here for image
For the video, I use this HTML (view page source to see): http://media.bruhdev.com/media/movies/embed/3
How do I put this on the embed of my site?
*Don't mind the actual video, that's the thing about all my friends wanting their funny video's on here.
Thank you ahendwh2 for the answer, for anyone finding this post, here is an answer: https://stackoverflow.com/a/47112759/7409991
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" />
I'm attempting to set a custom thumbnail for when people share my website on Facebook. I followed this post here: How does Facebook Sharer select Images and other metadata when sharing my URL?
It seems this info may be outdated because I am unable to get it to work. Can anyone advise if there has been a change and how to handle this now?
I currently have this in my head but It is not working:
<head>
<meta property="og:image" content="http://placehold.it/350x150"/>
<meta property="og:image:secure_url" content="https://placehold.it/350x150" />
</head>
Figured it out. Facebook simply had not refreshed my images yet. I found this tool to help with this process:
https://developers.facebook.com/tools/debug/
Facebook development newbie.
I have added the meta tags to the html file which I want to share to Facebook.
like:
<meta property="og:type" content="article"/>
<meta property="og:title" content="title"/>
<meta property="og:description" content="description"/>
<meta property="fb:app_id" content="23232323323232"/>
<meta property="og:image" content="https://fajfladjfaljafl.jpg/>
I want to make the image thumbnail in Facebook profile different for different people. For example, people can do a small test here then share the result to Facebook, the image thumbnail should be the test result of that person. So how can I do this.
Now I am thinking to generate a new webpage within specific meta property for that person every time. But this's so dump!
Can I change <meta property="og:image" content="https://fajfladjfaljafl.jpg/> automatically when people share it to Facebook? or any other ideas?
Thank you very much!!
Hi everyone:
I am doing this via feed dialog. As what #Mosh Feu and #CBroe said, it doesn't make sense to change meta data.
I am using feed share link
https://www.facebook.com/dialog/feed?app_id=APP_ID&link=URL&picture=THUMBNAIL_URL&name=NAME&description=DESCRIPTION&caption=CAPTION&redirect_uri=REDIRECT_URI
to define the parameters every time.