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
Related
UPDATE: It turns out the page shouldn't have both the "og:video" and "og:video:url" tags. I removed one of them and everything worked as it should.
Problem Statement
I have a page with OpenGraph tags to allow play a video in the Facebook News feed. Sharing the URL to Facebook appears to work, but the video does not properly play.
OpenGraph Tags
<meta property="og:title" content="Jamie McMurray Ready to Defend Rolex 24 Title">
<meta property="og:url" content="http://media.weei.com/theme/9084/a/112508981/jamie-mcmurray-ready-to-defend-rolex-24-title.htm">
<meta property="og:image" content="http://media.weei.com/hosting/media/weei/1640379/mrn-autoracingpodcast-300x300.png">
<meta property="og:site_name" content="WEEI">
<meta property="og:description" content="He and his Chip Ganassi teammates are back together one year removed from winning a watch in the Rolex 24.">
<meta property="og:video" content="https://dih1l34ei3029.cloudfront.net/56275703/audiogram.mp4">
<meta property="og:video:url" content="https://dih1l34ei3029.cloudfront.net/56275703/audiogram.mp4">
<meta property="og:video:secure_url" content="https://dih1l34ei3029.cloudfront.net/56275703/audiogram.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="300">
<meta property="og:video:height" content="300">
According to the Facebook Debugger, FB is picking up the necessary tags.
Outcome
When I attempt to embed the page in Facebook, it looks like it's trying to play the video.
But when I click the Play icon, it doesn't work.
I haven't been able to find any guidance online as to why these videos aren't playing. I've double checked the tags, inspected the video codecs... everything looks like it should be working.
But it's not.
Any guidance you can provide would be greatly appreciated.
It turns out the page shouldn't have both the "og:video" and "og:video:url" tags. I removed one of them and everything worked as it should.
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 have a custom skin on my jwplayer and I'm trying to get it to play inline in the facebook stream, like the youtube player. I've spent two days looking at docs and tweaking code for this and can't figure out what I'm doing wrong. Here's an example of my meta tags:
<meta property="og:site_name" content="Contour"/>
<meta property="fb:app_id" content="188896031148408"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://www.contour.com/stories/jimmy-the-greek-board-view-of-summer-x-park-course"/>
<meta property="og:title" content="Jimmy the Greek board view of Summer X park course"/>
<meta property="og:video" content="http://www.contour.com/flash/jwplayer.swf?playlistfile=/stories/39073.xml&skin=/flash/jwskin.zip&repeat=list&autostart=true"/>
<meta property="og:video:type" content="application/x-shockwave-flash"/>
<meta property="og:image" content="http://s3.amazonaws.com/contour.staging/images/assets/12133/quarter/F71C41BCA5B9825898ECBC56151E8BB820100905-94257-1dzxruc-0.jpg"/>
<meta property="og:description" content="Jimmy the Greek Marcus was kind enough to bust out a few warm up laps with a boardcam mount. This years setup was primarily cement with some skatelite features around the perimeter. Thanks man, you killed it on Sunday"/>
The facebook url linter shows that it's picking up the info. There's even a 'video' heading that says "Status: Video embedding on Facebook enabled". Yet, it doesn't work.
I've tried using 'video' and 'swf' as the og:type. I've tried specifying the video height/width. I've tried using different video types. When I load the og:video url in a browser I get a swf that autoplays my video.
Right now, the thumbnail that appears in the facebook stream does NOT link to the video's page as it normally would, which I take as a sign that I'm on the right track. However, it also does not play a video :) The little blue play button also does not show up on my thumbnail.
Any ideas would be greatly appreciated. Thanks!
If you use jwplayer swf object to play directly your youtube video
You should encode your param with URL-ENCODE method. Like that:
http://yoursite.com/player.swf?file=http%3A%2F%2Fyoutube.com%2Fwatch%3Fv%3DB-YRHQN5e9Q&image=http%3A%2F%2Fi1.ytimg.com%2Fvi%2FB-YRHQN5e9Q%2Fhqdefault.jpg&autostart=true
I haved the same problem, but I solved this.
I have no idea which tag solve my problem, but when my code is looks like this, jw player 5.1 pro is working on facebook:
<html xmlns:fb="http://ogp.me/ns/fb#">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# video: http://ogp.me/ns/video#">
<script type="text/javascript" src="/embeds/jwplayer5/swfobject.js"></script>
<meta property="og:type" content="video.movie" />
<meta property="og:video:height" content="260" />
<meta property="og:video:width" content="420" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:title" content="Big Buck Bunny" />
<meta property="og:description" content="Big Buck Bunny is a short animated film by the Blender Institute, part of the Blender Foundation." />
<meta property="fb:admins" content="100000446876505">
<meta property="fb:app_id" content="257720611082074">
<meta property="og:image" content="http://zobolio.com/embeds/posters/ezekiel.png" />
<meta property="og:video" content="http://zobolio.com/embeds/jwplayer/player.swf?file=http%3A%2F%2Fwww.zobolio.com/embeds/ezekiel.mp4&autostart=true" />
<meta property="og:video:secure_url" content="https://zobolio.com/embeds/jwplayer5/player.swf?file=http%3A%2F%2Fwww.zobolio.com/embeds/ezekiel.mp4&autostart=true" />
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>