I'm looking to embed an HTML5 video player in the Facebook feed, similar to what sites like YouTube and Vimeo do already, using the "text/html" tag:
<meta property="og:type" content="video">
<meta property="og:video:url" content="...">
<meta property="og:video:secure_url" content="...">
<meta property="og:video:type" content="text/html">
As I understand this requires whitelisting from Facebook currently, and when I use the same tags I just see a white box with a "Download File" link.
This is expected, however as my site has not launched yet and I do not know the final URL, I'm not able to apply for whitelisting, currently I just need to be able to demo this behavior.
Is there any way of enabling this feature in test just to show how it would work and begin developing the Facebook integration before asking about whitelisting?
Related
Using Chrome browser, when I share a link from my website on facebook, the 'preview' is a video in mp4 format i.e not swf format. The problem is that a download button is showing up on the video player on facebook.
Based on this post I was able to remove the download button on my website using controlsList="nodownload" attribute, but I still can't remove it from facebook posts.
As far as I know, this video preview is built based just OG metatags, which I believe are correct:
<meta property="og:video:url" content="https://cdn.domain.com/path/to/video/file.mp4" />
<meta property="og:video:secure_url" content="https://cdn.domain.com/path/to/video/file.mp4" />
<meta property="og:video:width" content="768" />
<meta property="og:video:height" content="432" />
<meta property="og:video:type" content="video/mp4" />
Question: Is there anything I can do to fix this or does it depends 100% on facebook?
Note: Due to privacy policies I can't share here an example but here is an example with similar OG metatags, post it on your facebook timeline and you'll see the download button as shown in this screenshot example below : https://i.stack.imgur.com/mck0N.png
Thanks.
Question: Is there anything I can do to fix this or does it depends 100% on facebook?
This is entirely on Facebook's end.
You've provided Facebook with the URL to your video content. How they present it is up to them.
On my website, I use JWPlayer to play video content. I would love to embed a player hosted on my website into a Facebook post that plays in the post and not link to another website. When I use JWPlayer's embed wizard on their website, it creates a page on their server with the player and gives some iframe code that I can paste into Facebook. This works completely fine. However, I really need to be able to make an automated process that creates embed pages on my own site independent of JWPlayer's website.
I took the source code and modified it to fit my website, but unfortunately Facebook does not allow it to play inline. It shows the splash image, title, and description but does not have a play button. When I click the image, it takes me to my website rather than playing the video within the post.
When researching the issue on Facebook's dev reference, I saw that you need a secure URL. My website has an SSL certificate. However, it does not have an EV certificate like JWPlayer's website. Could this be the issue? I don't want to spend the money on it unless I know it will work.
Here is my html heading if it helps at all. And I am using JWPlayer 7. Any help will be much appreciated.
<head prefix="og:http://ogp.me/ns#">
<title>HTTP test video</title>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<meta property="og:url" content="https://www.examplewebsite.com/embed/player.html">
<meta property="og:title" content="HTTPS test video">
<meta property="og:image" content="http://www.examplewebsite.com/embed/og_image.jpg">
<meta property="og:description" content="This is a test.">
<meta property="og:type" content="video">
<meta property="og:video:url" content="https://examplewebsite.com/embed/jwplayer.flash.swf">
<meta property="og:video:secure_url" content="https://examplewebsite.com/embed/jwplayer.flash.swf">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="480">
<meta property="og:video:height" content="270">
</head>
Alright, I figured out the problem. For some reason, the og:url tag was messing the whole thing up. I removed that tag and everything works fine as far as displaying inline. I do not know why that fixes it, but it works. However, I believe JWPlayer 6 and 7 don't support Facebook embed... But that is a different issue.
I am trying to share video from my site on facebook. I want the video should play on facebook rather than redirecting me on my site when i clicks on it. I have used this but it didn't work
<meta property="og:video" content="http://website.com/files/Video.mp4" />
<meta property="og:type" content="video.movie">
<meta property="og:video:secure_url" content="https://server.com/files/Video.mp4" />
<meta property="og:video:type" content="video/mp4" />
I have try to debug it using debug tool and its looks everything is perfect. Most of the example on web is explaining about sharing ".swf" files. I am wondering how can i share ".mp4" for video because its really hard for me to convert all the video into ".swf" format
Here is a sample url that i am trying to share
http://perform-ers.com/channel/people-are-awesome/watch?m=664
As you already found out; you need to link to a SWF file, which is the video player and which in turn (knows how to) include the video to play. You can't directly link to a MP4 file.
I have found thousands of solutions for embedding a flash player in a Facebook wall, most of them considerably outdated and almost nothing posted after the major UI changes that FB has made relatively recently.
That being said, the most simple and (theoretically) still valid way for doing this that I've found is through posting a link that points to an HTML which presents the Open Graph tags that FB would read and interpret, as follows:
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>My title!</title>
<meta property="og:title" content="My title!">
<meta property="og:type" content="video.movie">
<meta property="og:url" content="http://mysite.com/url/">
<meta property="og:description" content="content description">
<meta property="og:image" content="http://mysite.com/URL_THUMBNAIL.jpeg">
<meta property="og:site_name" content="mysite.com">
<meta property="og:video" content="http://mysite.com/flash.swf?flashVar=0101">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="300">
<meta property="og:video:height" content="200">
It is important to note that the flashVar is necessary for the kind of application I am using, and I wouldn't expect that to be the problem, as it isn't pointed out as so when I use Facebook's object debugger (developers.facebook.com/tools/debug/).
Furthermore, the most intriguing problem is that this solution actually works when I post the link with an account that still uses the old Facebook interface (without Graph Search) - a little "play" button will appear [as shown on the following link] on the thumbnail and, when I click on it, the SWF starts to play on my Facebook wall.
http://das.ufsc.br/~alexandrec/SSoldFB.png
However, when I try to post the same link on my FB account (which already has the Graph Search and all the other UI changes), this play button won't appear [as shown below] and, if I try to click on the thumbnail, another window will open with the link specified on og:url
http://das.ufsc.br/~alexandrec/SSnewFB.png
I am wondering if this is a matter of having my website put on some sort of white list, but I haven't found any up-to-date documentation that mentions an actual list of this kind - and as my link works on the old UI I believe I would already be on that list.
There is another way for posting SWF files on the wall through the Graph API, making a POST request of an object with a source, a message and so on, but I find this way not so interesting as I can't specify the width and height of the embedded player and that is pretty essencial for my application.
Anyone knows why this happens? Has Facebook decided that it won't allow users to post SWFs anymore, or is this just a (hopefully temporary) Facebook bug? Is there any other way to make this work (taking into consideration my necessity for defining height and width of the embedded player)?
When you share a YouTube link on FB it automatically embeds the YT player into your wall.
At first I thought it is an FB effort, but then I noticed this happens with many videos websites (that FB probably never heard of), even from smaller countries.
So my question is, what guidelines must I follow for my video website, in order for FB to detect my player and automatically embed it in ones wall after sharing a link to that video?
Keep in mind I'm not talking about using the API. I'm talking about a user sharing a link to the page that contains that video.
See the Attaching Audio and Video Data section of Facebook's OpenGraph Protocol, for example:
<html xmlns:og="http://ogp.me/ns#">
<head>
...
[REQUIRED TAGS]
<meta property="og:video" content="http://example.com/awesome.flv" />
<meta property="og:video:height" content="640" />
<meta property="og:video:width" content="385" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
...
</head>