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]
Related
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 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" />
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.
I've been trying for the past couple days to get a small swf game working via a feed post to my wall (per the instructions at the Facebook Developers site). So far, I've had no success, despite having everything appear correctly in the OG Debugger. The metadata I'm using to generate the feed post is the following:
<head prefix="og: http://ogp.me/ns fb: http://ogp.me/ns/fb">
<meta property="fb:app_id" content="157726317622339" />
<meta property="og:type" content="game" />
<meta property="og:url" content="http://devapplatform.com:3557/site/feed_game/" />
<meta property="og:title" content="It Or Miss Mini Game" />
<meta property="og:description" content="Sebastian submitted to It or Miss, Come vote for them here!" />
<meta property="og:image" content="http://devapplatform.com:3558/images/catSurprise.jpg" />
<meta property="og:video" content="http://devapplatform.com:3558/images/catTest.swf" />
<meta property="og:video:width" content="398" />
<meta property="og:video:height" content="299" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
</head>
This code is stored on the following web page:
http://devapplatform.com:3557/site/feed_game/
If you want to test this code to see exactly what it's posting, you can simply launch my test app (make sure HTTPS is turned off for your account - I can't have HTTPS enabled on this app due to technical limitations of my environment. Rest assured HTTPS IS enabled on the production version of this app). The feed dialog should appear immediately after launch, during the loading process:
http://apps.facebook.com/itgirlsb/
DISCLAIMER: These links aren't guaranteed to always be available, due to them being hosted on a local test environment which gets powered off in the evenings PSD.
I can't see page or the image / SWF to test, but try these:
Your images should be at least 90x90px, otherwise we won't show the image, so there's nothing to click. Ideally make them 200x200px or more.
If you want the embed to work for anyone who is using secure browsing (https://www.facebook.com) then you need to host your SWF on a secure host. If it's on an http host, we can only embed it for users who have secure browsing disabled; otherwise the browser would throw mixed content warnings.
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 :)