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 开发者_如何学JAVAappear 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 :)
加载中,请稍侯......
精彩评论