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.
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'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.
Reading the The Open Graph protocol site > http://ogp.me/ for reference.
<meta property="og:video:secure_url"content="https://www.example.com/my.swf?v=1"/>
<meta name="og:video:height"content="164"/>
<meta name="og:video:width"content="164"/>
<meta name="og:video:type"content="application/x-shockwave-flash"/>
It looks like I would need to whitelist http://www.facebook.com/help/contact.php?show_form=video_embed_whitelist because of my using https
I take it that Facebook allow SWF players for video wrappers from all of the talk in forums i have seen, although I have not seen any non-standard/custom video players being embedded on a Facebook wall post.
To wall post a custom swf video it looks like i would have to:
make a facebook app
make a html *page to hold the swf with the open graph meta tags shown above
post a status update with the link to the *page
Now for the tricky part of this question...
I use Node.js (particularly Socket.io) and rather than make lots and lots of SWF files I want to make one SWF that connects to get the video (this could be done with a flashvar like v=1), But I am wondering would Facebook block this server connection?
If this is possible I was looking at this: http://blog.ionelmc.ro/2008/11/29/flash-socket-bridge-with-haxe/ But I am also not so sure - although this code looks like node it seems now that I've had a coffee it's only client side. Also I am unfamiliar with swf/flex/flash/wtf and was wondering while reading a lot of different flash javascript bridge code on various websites if this all is even possible with a simple swf or are they talking about air?
Does anyone know of a javascript library / flash library that could connect to node.js, socket.io or some other module? I feel I am going mostly on theory here, apologies.
Create the content as follows in your node.js file.
<html xmlns:og="http://ogp.me/ns#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="REFRESH" content="1;url=http://www.xyz.com/">
<meta property="og:title" content="HERE GOES THE VIDEO TITLE" />
<meta property="og:description" content="HERE GOES THE VIDEO DESCRIPTION" />
<meta property="og:image" content="HERE GOES THE PATH OF VIDEO THUMBNAIL" />
<meta property="og:image:secure_url" content="HERE GOES THE SECURED PATH OF VIDEO THUMBNAIL" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video" content="HERE GOES THE PATH OF VIDEO FLV PATH" />
<meta property="og:video:secure_url" content="HERE GOES THE PATH OF VIDEO SECURED PATH" />
<meta name="og:video:height" content="303" />
<meta name="og:video:width" content="404" />
</head>
</html>
Then you need to call this file through sharer.php file as below in url in encoded format
http://www.facebook.com/sharer/sharer.php?u=[url encoded format pointing to that file with parameters if any]
I'm trying to set up a page which can be properly scraped by Facebook when it's shared/liked. The page will have a YouTube video associated with it, so in the content attribute of the og:video tag, should I put the YouTube video embed link or the actual youtube page link for it to appear on Facebook with the little "Preview" button that plays the video in Facebook?
Hope someone can help! Thanks!
You have two options. You can either set the og:video to https://www.youtube.com/v/YOUTUBECODE or set the og:url to the YouTube page.
In my examples, I'm embedding this video https://www.youtube.com/v/BQBjVr1iHH4 in the following page https://www.keithandthegirl.com/vip/bonus/episode/9/40/this-is-40. I would like Facebook to show the YouTube video whenever anyone shares my page on Facebook.
Option 1: setting the og:video to https://www.youtube.com/v/YOUTUBECODE
The meta tag will look like
<meta property='og:video' content='https://www.youtube.com/v/BQBjVr1iHH4' />
Notice the structure of the YouTube URL is different than the typical URL. You will need to isolate the "v" query from the YouTube link and use it in the og:video link format I showed above. In my example, the value of v is BQBjVr1iHH4.
Option 2: setting the og:url to the YouTube page.
If you don't have the ability to isolate the v code, you can set the og:url tag to the YouTube page. In my example, it would look like this:
<meta property='og:url' content='https://www.youtube.com/watch?v=BQBjVr1iHH4' />
This will tell Facebook to get the Open Graph tags from https://www.youtube.com/watch?v=BQBjVr1iHH4 and use that in the embed. That means the description and title will come from the YouTube page. However, if someone clicks the link, they'll go to your website.
In my example, if someone pastes the following link while I use the second option https://www.keithandthegirl.com/vip/bonus/episode/9/40/this-is-40 Facebook will see the URL is set to YouTube and query that YouTube link for the OG info. Everything will look like YouTube except the link will click to https://www.keithandthegirl.com/vip/bonus/episode/9/40/this-is-40
One other note: make sure to use https, not http. Facebook will not embed any non-secure video on the site.
Here's what I found:
Using Facebook's Open Graph Protocol, Publisher can now use any video from any URL, as long as the URL has correctly formatted metadata in the <head> of its HTML. Here's the list of information that should be in the <head>:
Thumbnail image's URL:
<meta property="og:image" content="image_src URL">
Video file URL (e.g. SWF, MP4, ..):
<meta property="og:video" content="video_src URL">
Your page's URL:
<meta property="og:url" content="URL">
Title:
<meta property="og:title" content="title">
Description:
<meta property="og:description" content="description">
Video pixel width:
<meta property="og:video:width" content="video_width">
Video pixel height:
<meta property="og:video:height" content="video_height">
Content Type:
<meta property="og:type" content="video">
You can see from the source code of a YouTube page, the og:video tag is in the following format
<meta property="og:video" content="http://www.youtube.com/v/k86xpd26M2g">
You can also see an example of the metadata used from YouTube simplified in the source code of the following URL: http://fb.stevelarsen.co.uk/example.html
You can read more about the Open Graph protocol here: http://ogp.me/
<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>
The link of the .flv file.... check out https://developers.facebook.com/docs/opengraph/#types
For those who stumbled at the debugger provided by facebook please note the following:
When you are logged into the debugger you are under https session. In order to see your video in the debugging you need to add the secure url for video in meta. Adding youtube videos is easy, simply put the page url in og:url and it will work.
Spent and hour to come to this conclusion. Its too late I am too tired, wanna sleep now :)
I figured it out. I had a look at how Collegehumor.com does it and they include a bunch of stuff not mentioned in the Facebook API. Rather than just the following:
<meta name="og:video" content="whatever"></meta>
<meta name="video_style" content="whatever"></meta>
<meta name="video_height" content="whatever"></meta>
<meta name="video_width" content="whatever"></meta>
you also need link rel="video_src" and it helps to have videothumbnail and og:image too - I'm not entirely sure which one did it but there you go. That works :)