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.
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.
If I paste the following URL into Facebook I can share an animated gif. It's not a movie and not flash, Facebook now supports gifs without those workarounds. I can click it to pause and it shows "GIF" in a circle while paused.
http://giphy.com/gifs/hot-funny-cartoon-fBEDuhnVCiP16
No matter what I replicate from that page's meta tags I cannot get Facebook to share an animated gif form my own page. I've even gone so far as to copy the entire code of that page and serve it myself (Changing <link rel="canonical" and <meta property="og:url" to match my url).
Open Graph Object Debugger gives identical results for both the real Giphy page and my replica. Interestingly, the preview in Object Debugger is the old style Flash movie for both pages. However, when I paste the Giphy url into my Facebook it shows the gif - my relica shows the Flash.
Do Giphy get some special treatment from Facebook? Do I need to do something different?
I was able to create an .html file which, when the link is pasted as a status, displays as an animating (and looping) GIF in the Facebook feed. In my html page, I use the following meta tags in the header:
<meta property="og:site_name" content="Site Name">
<meta property="og:url" content="url to GIF on web">
<meta property="og:title" content="Title of GIF page">
<meta property="og:description" content="Some description">
<meta property="og:type" content="video.other">
<meta property="og:image" content="Same as og:url above">
<meta property="og:image:width" content="800">
<meta property="og:image:height" content="400">
The thing that gave me trouble when I was working on this was the og:url property. It should point directly to the GIF, not the .html file that these meta tags are a part of. Also, og:image should be the same as og:url.
I didn't test if the width and height properties are required.
Product Manager for the Giphy API team here. No special treatment; I wish--filing bugs with Facebook takes forever.
The Flash tag is legacy and we should clean it up. FB now does support GIFs and the answer by vegashacker is essentially correct.
An important point which answers have missed, how to make GIF image (if clicked) redirects to the article which belongs to instead of the GIF link itself?
The important parts are:
<meta property="og:image" content="url/to/image.gif">
<meta property="og:url" content="url/to/image.gif">
<meta property="og:url" content="url/to/article">
Add two og:url tags. First one should be the same as og:image pointing to the GIF image URL. Second one should be the URL to the article.
Actually, I looked at their source code, and I am 99% sure that they are actually showing a video. For this gif, there are a number of open graph meta tags associated with the page:
<meta property="og:type" content="video">
<meta property="og:image" content="http://media.giphy.com/media/H2ANZTOXVepbO/giphy-facebook_s.jpg">
<meta property="og:image:width" content="480">
<meta property="og:image:height" content="270">
<meta property="og:video" content="http://giphygifs.s3.amazonaws.com/swiphy20141103.swf?api_hostname=&gif_url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FH2ANZTOXVepbO%2Fgiphy.gif&giphy_height=297&video_url=http%3A%2F%2Fmedia.giphy.com%2Fmedia%2FH2ANZTOXVepbO%2Fgiphy.mp4&giphyWidth=400&path=%2Fgifs%2Fstar-wars-80s-the-muppet-show-H2ANZTOXVepbO&destination_url=http%3A%2F%2Fgiphy.com%2Fgifs%2FH2ANZTOXVepbO&giphyHeight=297&gif_id=H2ANZTOXVepbO&mode=embed&giphy_width=400">
<meta property="og:video:secure_url" content="https://giphygifs.s3.amazonaws.com/swiphy20141103.swf?api_hostname=&gif_url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FH2ANZTOXVepbO%2Fgiphy.gif&giphy_height=297&video_url=http%3A%2F%2Fmedia.giphy.com%2Fmedia%2FH2ANZTOXVepbO%2Fgiphy.mp4&giphyWidth=400&path=%2Fgifs%2Fstar-wars-80s-the-muppet-show-H2ANZTOXVepbO&destination_url=http%3A%2F%2Fgiphy.com%2Fgifs%2FH2ANZTOXVepbO&giphyHeight=297&gif_id=H2ANZTOXVepbO&mode=embed&giphy_width=400">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="470">
<meta property="og:video:height" content="297">
and most of them are video tags. These tags are associated with the page and not a gif. If you share the straight gif image, then it will not animate.
To confirm this, if you plug the page into the Facebook URL debugger, then this can be confirmed. There is no mystery, this is shared as a flash video.
I have been working on this for a while with Facebook debugger and found how to post swf but just today I also successfully posted my animated gif.
I simply pasted my link https://www.example.com/my.gif into Facebook debugger and it said could not find URL but displayed fine giving app id number and then I went ahead and posted in my timeline for all to see :) So no html or tags to achieve that but simply a secure link to my gif file on my server.
Never did I work out how to achieve it via html embedded!
I have created a like button on my website, http://www.divecerts.com.
Screen shots of the problem found at http://www.divecerts.com/screen.html
the top screenshot shows the Like button being pressed with the FB popup and the correctly scraped information. The bottom screenshot shows what the actual post looks like on Facebook. There you can see that everything is correct except that the descrition is blank.
I have cleared the cache at using the Facebook debug tool (linter) a few times with no luck on solving the problem. The debugger shows the description fine BUT it does not show on the Facebook post. I have tried viewing/liking from different Facebook accounts on different computers using different browsers with the same results.
Here is my meta code
<head>
<meta property="og:title" content="DiveCerts.com | Diver Certification Record Search" />
<meta property="og:description" content="Search for SCUBA diving certifications records from the major training agencies in one click."/> <meta property="og:url" content="http://www.divecerts.com" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://www.divecerts.com/img/logofb.jpg" />
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">
any help would be greatly appreciated.
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.
Evening,
I'm pretty much clueless at this point regarding playing videos on FB walls. I'm using Ooyala as a "Video CMS" and have enabled everything for FB sharing on their end. My code includes the following.
<html xmlns:og="http://ogp.me/ns##">
<head>
...
<meta property="og:title" content="#video.title#">
<meta property="og:description" content="#video.description#">
<meta property="og:type" content="video">
<meta property="og:image" content="http://ak.c.ooyala.com/BjOGpsMToPbHODr_JC75EC5lJqe2gGZE/promo109538534">
<meta property="og:video" content="http://player.ooyala.com/player.swf?embedCode=#url.watch#&autoplay=1">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="396">
<meta property="og:video:height" content="297">
<meta property="og:site_name" content="AOPA">
</head>
The file the code is in is a coldfusion file (hence the double #). When I paste a sample video link:
http://www.aopa.org/aopalive/index.cfm?watch=VzbnZyMjoQKI1dI2Bwl-NeuiLToLxQpA
Into a wall, FB recognizes it as a video. When I hit play, I can see it's loaded the Ooyala player, (they have a Mac-like "loading" circle), but no video is called.
Any ideas? I've seen almost every variant of "og:" tags out there, but nothing has worked so far.
Thanks!
-Mitch
P.S.: Facebook, you're still linking to "http://www.facebook.com/2008/fbml" in some of your SDK's.
You need to add &keepEmbedCode=true to your queryString parameters. The meta video tag would then become -
<meta property="og:video" content="http://player.ooyala.com/player.swf?embedCode=#url.watch#&autoplay=1&keepEmbedCode=true">
Thanks,
Andrew
Andrew Spaulding | Senior Solutions Architect | Ooyala
www.flexdaddy.com
Andrew,
Thanks for the suggestion about the embed code, this still brought up the Ooyala player, but no video. After poking around (and looking at YouTube's source code for a single video), there needs to be some additional attributes added to the tag.
The correct code is below.
Thanks, have a good weekend,
-Mitch
<html lang="en" dir="ltr">
<head>
<meta property="og:title" content="#video.title#">
<meta property="og:description" content="#video.description#">
<meta property="og:type" content="video">
<meta property="og:image" content="http://ak.c.ooyala.com/BjOGpsMToPbHODr_JC75EC5lJqe2gGZE/promo109538534">
<meta property="og:video" content="http://player.ooyala.com/player.swf?embedCode=#url.watch#&autoplay=1&keepembedCode=true">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="396">
<meta property="og:video:height" content="297">
<meta property="og:site_name" content="AOPA">
</head>
I was having this issue because my og:url was incorrectly formatted.
Once I set the og:url to be the link back to my original page (canonical) hosting the video, the video would play. Before this, it would show a play link, but when I click on it, it would not play anything.