I want to embed my flash video player on facebook so that when people share my videos on facebook, it will let them play the video on Facebook.
I saw some posts here on stackoverflow about this topic and that a whitelisting wouldn't be required anymore, but i can't find any informations about it beyond December 2013.
Is it still possible? If yes, does it require a whitelisting?
You want your SWF file in a Facebook post like this: Example?
note: Facebook will only display SWF files that are hosted from an HTTPS server. If you can do that part then read on..
1) You need to have an HTML page on your site that is then posted as a link on your Facebook status. It's from the meta tags contained in that linked page that Facebook will read and load the SWF data.
2) Put the meta tags somewhere within the < head > .... < / head > section of your page's HTML.
(note: To make the above example work I had used old style embedding back then but you can try the newer OG tags. Good Reference). Below is an example for your own html (SWF goes in "video_src")
< head >
<meta name="title" content="My Video SWF inside FBook" />
<meta name="description" content="Just a test for embedding SWF in a status" />
<meta name="medium" content="video" />
<link rel="image_src" href="https://website.com/files/test_Thumbnail.jpg"/>
<link rel="video_src" href="https://website.com/files/test_VideoPlayer.swf"/>
<meta name="video_width" content="504" />
<meta name="video_height" content="283" />
<meta name="video_type" content="application/x-shockwave-flash"/>
< /head >
3) Currently the maximum Width is 504 and Height is 283. Check this page for updates whenever Facebook changes its mind about those settings.
You can check how Facebook will "parse" your html link using their Debugger Tool. Just paste your html page link as you would in a wall post and it will show a live preview.
UPDATE: For HTML5 Video (note: I havent tried this part myself but just my understanding..)
Assuming you've gone with OG: tags then you can just put multiple OG:Video links (first one should be Flash followed by fallback to HTML5 which should be the direct link to video file).
I cant confirm this now but.. Don't be surprised if the HTML5 video file is played by a system player (in a pop-up window?) and not with your own custom-design JS/CSS interface.
<meta property="og:video" content="https://website.com/files/test_VideoPlayer.swf" />
<meta property="og:video:secure_url" content="https://server.com/files/test_VideoPlayer.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
followed by... (for non-Flash)
<meta property="og:video" content="http://website.com/files/Video.mp4" />
<meta property="og:video:secure_url" content="https://server.com/files/Video.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="500" />
<meta property="og:video:height" content="280" />
Related
On a blogger styled blog, where 1 day I might have an image in a blog post, and the next day have a YouTube video, is it possible, when linking the blog posts to facebook, to have facebook find and post the video the same way it finds the images on blog post?
I've seen other people talk about the "meta tags":
<meta name="og:type" content="video"> // This is important so that OP will recognize your site as video streaming site like YouTube & Vimeo
<meta property="og:video:type" content="application/x-shockwave-flash"> // Don't Change this
<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="mySWFVideoPlayer.swf?url=Video_Soure"> // You will need to echo/print the Video Source (I.E. *.mp4) with a help of PHP or whatever your server uses
but meta tags are only used in the of the blog/webpage, so this means I would only be able to setup 1 video for the whole blog, but I would like to use the videos embedded in each post (if there was a video embedded)
For YouTube video embedded try this . This might be helping you in some way . Meta tag is very useful in this way .
<meta name='og:title' content='Big Buck Bunny'/>
<meta name='og:type' content='movie' />
<meta name='og:url' content='http://testsite.com/testfile.html' /> //Your html meta tag file path
<meta name='og:image' content='http://testsite.com/image.jpg' /> //Your image path
<meta name='og:site_name' content='TestSITE'>
<meta name='og:description' content='Big Buck Bunny is a short animated film by the Blender Institute, part of the Blender Foundation.'/>
<meta property='og:video' content='http://testsite.com/jwplayer/player.swf?file=video.mp4' /> //Your video path with player
<meta property='og:video:height' content='640'>
<meta property='og:video:width' content='385'>
<meta property='og:video:type' content='application/x-shockwave-flash' />
<meta property='og:video' content='http://testsite.com/video.mp4' /> //Your Video
<meta property='og:video:type' content='video/mp4' /> //Your Video Type for Mobile
<meta property='og:video:type' content='text/html' /> //Video type for other
Am facing issue with sharing videos on facebook wall. Actually the video is sharing on FB wall but the video is not playing inline.
This is the shared page meta details,
<meta property="og:site_name" content="Staging Derbywire">
<meta property="og:url" content="http://staging.derbywire.com/video/ticker/102">
<meta property="og:title" content="Derbywire mobile market place">
<meta property="og:type" content="video">
<meta property="og:image" content="http://s3.amazonaws.com/derbywire_development/system/attachments/96/original/open-uri20130822-8464-10q2etf?1377170817">
<meta property="og:description" content="Derbywire is a collective space where creatives can sell buy digital content">
<meta property="og:video" content="http://staging.derbywire.com/video/player">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="480">
This is the link for that page http://staging.derbywire.com/video/ticker/102
While validating this page using the following link
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fstaging.derbywire.com%2Fvideo%2Fticker%2F102
Its not giving any errors, But its not playing the video.
I gave the source video URL as http://staging.derbywire.com/video/player
This page has the video player
All the configurations are i did correctly. But the video is not playing. But i changed the source as YOUTUBE link then it was working.
Can any one help me out from this issue.
<meta property="og:video" content="http://staging.derbywire.com/video/player" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
You have to give the URL of the actual SWF file that plays the video here – the address you have given (http://staging.derbywire.com/video/player) however delivers a full HTML document. Facebook is not so silly to just embed full HTML documents into their page.
So change that property to the address of a stand-alone SWF file that will play the actual video.
I Found the solution for playing shared Video/Audio in Facebook wall.
For Videos i gave the meta tag like this
<meta property="og:video" content="https://d12zt1n3pd4xhr.cloudfront.net/fp/swf/flowplayer-3.2.16.swf?config={'splash': true, 'clip':{'url': '<%= url %>'},'plugins': {'controls':{'url':'https://d12zt1n3pd4xhr.cloudfront.net/fp/swf/flowplayer.controls-3.2.15.swf','bottom': 20}}}">
For Audio i gave the meta tag like this
<meta property="og:video" content="https://d12zt1n3pd4xhr.cloudfront.net/fp/swf/flowplayer-3.2.16.swf?config={'clip':{'url': '<%= url %>', 'provider': 'audio'},'plugins': {'audio': {'url': 'https://releases.flowplayer.org/swf/flowplayer.audio.swf'},'controls':{'url':'https://d12zt1n3pd4xhr.cloudfront.net/fp/swf/flowplayer.controls-3.2.15.swf', 'backgroundColor':'#002200', 'fullscreen': false, 'height': 50, 'autoHide': false}}}">
If you gave the proper meta tags in your link page facebook automatically play the video/audio.
For HTTPS users, you have to give HTTPS SWF configuration. Otherwise the file wont play inline.
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]
When I share YouTube video link on Facebook, facebook renders video in page.
Is that because YouTube supports something like oembed or facebook is doing something very custom for YouTube or combination of both?
Facebook will allow you to embed video as long as it is in SWF format, like youtube embeds. Use these open graph tags on your page:
<meta property="og:video" content="http://example.com/awesome.swf" />
<!-- these 3 are optional -->
<meta property="og:video:height" content="640" />
<meta property="og:video:width" content="385" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
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>