Video share on facebook wall using Graph API - facebook

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.

Related

Video not playing in Facebook News Feed

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.

How does Giphy share gifs to facebook? (2015, NOT FLASH ANYMORE)

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!

Blogger post with embedded YouTube video, linked and playable on facebook

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

Auto-embed videos in Facebook wall

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>

Open graph og:video Meta Tags content

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 :)