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.
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'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?
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 found thousands of solutions for embedding a flash player in a Facebook wall, most of them considerably outdated and almost nothing posted after the major UI changes that FB has made relatively recently.
That being said, the most simple and (theoretically) still valid way for doing this that I've found is through posting a link that points to an HTML which presents the Open Graph tags that FB would read and interpret, as follows:
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>My title!</title>
<meta property="og:title" content="My title!">
<meta property="og:type" content="video.movie">
<meta property="og:url" content="http://mysite.com/url/">
<meta property="og:description" content="content description">
<meta property="og:image" content="http://mysite.com/URL_THUMBNAIL.jpeg">
<meta property="og:site_name" content="mysite.com">
<meta property="og:video" content="http://mysite.com/flash.swf?flashVar=0101">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="300">
<meta property="og:video:height" content="200">
It is important to note that the flashVar is necessary for the kind of application I am using, and I wouldn't expect that to be the problem, as it isn't pointed out as so when I use Facebook's object debugger (developers.facebook.com/tools/debug/).
Furthermore, the most intriguing problem is that this solution actually works when I post the link with an account that still uses the old Facebook interface (without Graph Search) - a little "play" button will appear [as shown on the following link] on the thumbnail and, when I click on it, the SWF starts to play on my Facebook wall.
http://das.ufsc.br/~alexandrec/SSoldFB.png
However, when I try to post the same link on my FB account (which already has the Graph Search and all the other UI changes), this play button won't appear [as shown below] and, if I try to click on the thumbnail, another window will open with the link specified on og:url
http://das.ufsc.br/~alexandrec/SSnewFB.png
I am wondering if this is a matter of having my website put on some sort of white list, but I haven't found any up-to-date documentation that mentions an actual list of this kind - and as my link works on the old UI I believe I would already be on that list.
There is another way for posting SWF files on the wall through the Graph API, making a POST request of an object with a source, a message and so on, but I find this way not so interesting as I can't specify the width and height of the embedded player and that is pretty essencial for my application.
Anyone knows why this happens? Has Facebook decided that it won't allow users to post SWFs anymore, or is this just a (hopefully temporary) Facebook bug? Is there any other way to make this work (taking into consideration my necessity for defining height and width of the embedded player)?
The problem I'm having is when I post a link to a post on my website to either Facebook or Google+ that link points to my homepage. Even in preview, the thumbnail displayed is that of the homepage.
From what I have found (which hasn't been much) it seems that the problem might be with the facebook metadata. I have tried to validate it on facebook's open graph validator and at first I was getting a 206 result when the links were working. Now I get: Facebook URLs aren't scrapable by this Debugger. Try your own. Not sure why.
Having the same issue with Google+. When I first published the website it was working fine and this happened out of nowhere.
Here is what I have in my header:
<!--Facebook Metadata /-->
<meta property="og:title" content="Website Title"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://URL.com/"/>
<meta property="og:image" content="http://URL.com/img.png"/>
<meta property="og:site_name" content="Site Name"/>
<meta property="fb:admins" content="User_1"/>
<meta property="og:description" content="Website Descriptiom"/>
<!--Google+ Metadata /-->
<meta itemprop="name" content="Google+ ID">
<meta itemprop="description" content="Description">
<meta itemprop="image" content="Empty">
I have tried removing it and still the problem persists. I do want to point out that I have an html site with a wordpress blog that's being hosted on my server. Wondering if the issue might be with wordpress?
Should the metadata be placed on the index.html and the wordpress homepage or just the index.html? Any help would be appreciated. Thanks.
When you delete those metadata tags, specifically the og: ones (facebook's open graph meta tags) - you have to tell Facebook to pick up a new copy of your page as they cache everything. If you haven't tried this already:
Remove those tags
View the source on your live site, to confirm they are in fact removed
Go to http://developers.facebook.com/tools/debug and type in the URL of the page you are testing. This will tell Facebook to grab a new copy.
If that works (as it should), then you can play around with what tags to keep and how to make them dynamic - knowing that anytime you make a change, you will have to redo step #3 to tell FB to grab a fresh copy.