What do I have to do to get the play button on a video thumbnail?
I tried using open graph parameters to show facebook that the URL is a website containing a video but I could not figure it out.
Defining a Flash video file associated with the page places a play button over your thumbnail image (now essentially a poster frame) and loads your linked video file on a user click or tap. It's possible to specify multiple video formats with an array of structured video properties: Flash, MP4, and WebM for example. Facebook currently supports Flash and HTML video links, roughly correlated to and content includes on your own web pages. Everything in one URL means you will have to move your FlashVars into query parameters except; width and height FlashVars are passed by Facebook at runtime.
<meta property="og:video" content="http://example.com/movie.swf?id=1">
<meta property="og:video:secure_url" content="https://example.com/movie.swf?id=1">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="400">
<meta property="og:video:height" content="300">
The "secure_url" property is required to play inline video for users browsing Facebook with HTTPS enabled. Facebook does not currently support direct MP4 or WebM videos but may add support in the future through a Facebook video playback wrapper. Publishers need to account for framed content with AllowScriptAccess set to "none."
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.
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'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?
I have a website that has a HTML5 video player.
I want to share the link ( ex: http://site.com/video/example-2 ) on facebook and one the users click on the image of that post on the facebook it starts playing the video there.
Just like youtube videos and vimeo videos.
How can I do that?
Thanks
I have a website that has a HTML5 video player.
You want to find a good SWF (*.SWF) video player that can stream video from url={video_Hot_link} (pass URL parameter to the SWF player)
Now after you got your SWF player ready for streaming some videos add Facebook Open Graph
to your <head> tag like below:
<meta property="og:type" content="video"> <!-- site/page type more information http://ogp.me/ -->
<meta property="og:video:type" content="application/x-shockwave-flash"> <!-- you need this because your player is a SWF player -->
<meta property="og:video:width" content="Width in Pixels"> <!-- player width -->
<meta property="og:video:height" content="Height in Pixels"> <!-- player height -->
<meta property="og:video" content="http://example.com/{path_to}/{swf_player}.swf?url={video_soure}"> <!-- You will need to echo/print the video source (*.mp4) with server-side code -->
<meta property="og:video:secure_url" content="https://example.com/{path_to}/{swf_player}.swf?url={video_soure}"> <!-- required for users whom use SSL (actually Facebook forces everyone to use SSL so you're required to use og:video:secure_url) so get a one -->
Additionally, you need to add the following prefix to <html> likeso
<html prefix="og: http://ogp.me/ns#">
Facebook no longer permits inline playback for third party players. Vimeo even mentions this in their documentation.
Moving forward you will need to use Facebook's own video hosting platform if you want to have videos play inline in the newsfeed.
I also used og:video to share video but on debugging it on https://developers.facebook.com/tools/debug/og/object/ , it gives warning error The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
I have an H.264-encoded mp4 file that I'm trying to get embedded into a Facebook post when the page that's serving it is Liked or Shared.
My understanding is that I simply need to have the right Open Graph <meta> tags in place on the URL that's being liked/shared. However, I've tried several different sets of <meta> tags and the video is still not embedding when I paste the URL into my Status Update and Post it. It does embed the image from the og:image property, but clicking on the image just passes the user off to og:url.
When I use the the Facebook Debugger tool, here's what it displays for Raw Open Graph Document Information:
Meta Tag: <meta property="fb:app_id" content="000000000000000" />
Meta Tag: <meta property="og:url" content="http://www.testdomain.com/path/to/shared/page" />
Meta Tag: <meta property="og:title" content="Example Page" />
Meta Tag: <meta property="og:description" content="Example Description" />
Meta Tag: <meta property="og:site_name" content="Example" />
Meta Tag: <meta property="og:image" content="http://content.example.com/images/example.png" />
Meta Tag: <meta property="og:type" content="video.other" />
Meta Tag: <meta property="og:video:width" content="400" />
Meta Tag: <meta property="og:video:height" content="300" />
Meta Tag: <meta property="og:video" content="http://static.example.com/flowplayer-3.2.15.swf?config=%7b%22clip%22%3a%22http%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4%3fv%3d0%22%7d" />
Meta Tag: <meta property="og:video:type" content="application/x-shockwave-flash" />
Meta Tag: <meta property="og:video" content="http://content.example.com/path/to/video.mp4?v=0" />
Meta Tag: <meta property="og:video:type" content="video/mp4" />
Meta Tag: <meta property="og:video" content="http://www.testdomain.com/path/to/shared/page" />
Meta Tag: <meta property="og:video:type" content="text/html" />
The values above have been replaced with dummy values, but they're all valid links.
Facebook seems to parse this out correctly, since it shows under Type of Share -> Video:
status: Video embedding on Facebook enabled
1: application/x-shockwave-flash
2: text/html
When I go directly to the flash player url (http://static.example.com/flowplayer-3.2.15.swf?config=%7b%22clip%22%3a%22http%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4%3fv%3d0%22%7d), the video plays correctly (embedded in the flash player).
Things I've tried/considered:
Skipping the flash player
Originally I didn't even have a flash player in the og:video list and was trying to just use the mp4 file first. Facebook didn't pick it up and treated the like/share as a plain link share.
Whitelisting
At one point apps/domains had to be whitelisted before embedded video was allowed. This is no longer necessary. I haven't whitelisted my domain.
HTTPS
Some sources say that the flash player being used needs to be hosted over HTTPS. My research indicates this should only apply if the user is browsing Facebook over HTTPS, which I haven't been when testing.
I'm currently running some tests with an HTTPS-served flash player to see if anything changes.
Older tags
For the heck of it, I tried adding older Facebook <meta> and <link> tags (e.g. title, video_src) to see if it would pick them up. It did not.
Cache refresh
I passed a ?fbrefresh=1 along with the URL in the Facebook Debugger to make sure the cached version of the URL got cleared. That did result in the newest meta information getting pulled in, but still no embed.
iPad
Since I've got the video/mp4 fallback in my og:video tags, I looked at my Facebook news feed in the iPad app. Excitingly, the thumbnail image had a little play button overlayed on it. However, touching the play button resulted in a redirect to the share URL instead of playing the video inline. Safari on the iPad had the same behavior (but with no play button overlay).
Document namespaces
I added the appropriate Open Graph / Facebook namespaces to my markup:
<html xmlns:og="http://ogp.me.ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# video: http://ogp.me/ns/video#">
But it didn't seem to have an effect. I don't think they're required.
Is there something that I'm missing here? I feel like a lot of resources I've found so far could be outdated since Facebook has changed their API several times, so it's possible that I've missed a newer requirement.
How can I get the video to embed and play back within the Facebook timeline?
Having a look at YouTube's og: meta tags, the only differences I can spot are:
YouTube's og:url and og:video are served from the same domain and subdomain (www.youtube.com). Mine are served from the same domain, but different subdomains (media: content.example.com, player: static.example.com). Does the subdomain have to be the sam across all of the og: meta information?
YouTube's share URL isn't a straight .swf per se, but it is flash content:
rob#uvm:~$ curl "http://www.youtube.com/v/oHg5SJYRHA0?version=3&autohide=1" > yt
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 4242 100 4242 0 0 43522 0 --:--:-- --:--:-- --:--:-- 55815
rob#uvm:~$ file yt
yt: Macromedia Flash data (compressed), version 10
Just realized that one of my URLs is actually on a different domain. I have a feeling that's the culprit. I'm moving some stuff around now to try it out. I've updated my meta tag data above. Feel a bit sheepish for not making this observation up front.
Here's what ended up working for me.
<!-- These two aren't necessary for embedding. -->
<meta property="og:site_name" content="Example">
<meta property="fb:app_id" content="000000000000000">
<!-- These are mostly needed. A few are probably still optional, but they're all good to have. -->
<meta property="og:type" content="movie">
<meta property="og:title" content="Example Page">
<meta property="og:description" content="Example Description">
<meta property="og:url" content="http://www.testdomain.com/path/to/shared/page">
<meta property="og:image" content="http://content.example.com/images/example.png">
<meta property="og:video" content="http://static.example.com/player.swf?file=http%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4%3fv%3d0&autoplay=true">
<meta property="og:video:type" content="application/x-shockwave-flash">
<!-- Not necessary, but might (can't find up-to-date docs) be used for iOS fallback. -->
<meta property="og:video" content="http://content.example.com/path/to/video.mp4?v=0">
<meta property="og:video:type" content="video/mp4">
Some observations and useful information:
Flash player
I switched to using JWPlayer since its query parameter flashvars configuration was slightly simpler than FlowPlayer's. I think I could have gotten FlowPlayer to work with a bit more effort. JWPlayer also has a nice instructional page for Facebook embedding. (Note: many Flash players require a purchased license for commercial use - make sure you get one if necessary.)
Open Graph <meta> tags
Using movie worked for for og:type. I was originally using video and video.other. Those probably work as well, but using movie definitely worked for me.
The following og: properties were not necessary for embedding: fb:app_id, og:video:width, og:video:height.
Note the URLEncoded file query parameter. Needing to do this should be fairly obvious, but keep in mind to encode the parameter values separately. The ampersand (&) before autoplay=true was XMLEncoded before getting added to the page markup. The ampersand was correctly decoded when viewing it in the Facebook Debugger's "Object Properties" section.
Hosting the content and shared url on separate subdomains didn't matter. The only domain concerns that might cause problems are within the flash player itself, and can be avoided with a correctly-configured crossdomain.xml on the content server.
Facebook Debugger Tool observations
The Debugger Tool's "Type of Share" section was slightly misleading:
This is what it showed when I had both application/x-shockwave-flash and video/mp4 types. I would have expected it to have two items in this list, but it just had the second. Despite that, the flash player still embedded.
I was initially wondering if Facebook was getting caught up with the URLEncoded parameters when I saw that it was showing everything represented as unicode:
However, looks like that's not a problem. Don't let it confuse you.
HTTPS
The code above doesn't embed with https Facebook browsing. Additionally, the og:video:secure_url meta property didn't work (maybe due to this). What I ended up doing was serving both the flash player and its source mp4 file parameter over https. The resulting meta tag looked something like:
<meta property="og:video" content="https://static.example.com/player.swf?file=https%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4&autostart=true" />
The og:video was the only one that needed to be over https; og:image, og:url, etc. were okay still being served over http.
Hopefully this'll help others avoid the dead ends and red herrings that I ran into while debugging and learning about all of this.
FYI video/mp4 is currently valid here in 2014.
See the meta provided on this page (ctrl-f mp4):
Seems like facebook only accept application/x-shockwave-flash or video/mp4 not text/html.
MIME type of the video. Either application/x-shockwave-flash or video/mp4.
https://developers.facebook.com/docs/sharing/webmasters