web-dev-qa-db-ja.com

グラフを開くog：videoメタタグコンテンツ

Facebookが共有/気に入ったときに適切にスクレイプできるページを設定しようとしています。このページにはYouTubeビデオが関連付けられているので、og：videoタグのコンテンツ属性に、YouTubeビデオ埋め込みリンクまたは実際のyoutubeページリンクを配置して、小さな「プレビュー」ボタンでFacebookに表示する必要がありますFacebookで動画を再生しますか？

誰かが助けてくれることを願っています！ありがとう！

facebookopengraph
28
basicallydan

2つのオプションがあります。 og:videoを https://www.youtube.com/v/YOUTUBECODE に設定するか、og:urlをYouTubeページに設定できます。

私の例では、次のページにこのビデオを埋め込みます https://www.youtube.com/v/BQBjVr1iHH4https://www.keithandthegirl.com/vip/ bonus/episode/9/40/this-is-4 。誰かがFacebookで私のページを共有するたびに、FacebookにYouTubeビデオを表示したいと思います。

オプション1：og:videoを https://www.youtube.com/v/YOUTUBECODEに設定する

メタタグは次のようになります

<meta property='og:video' content='https://www.youtube.com/v/BQBjVr1iHH4' />

YouTube URLの構造は、通常のURLとは異なります。 YouTubeリンクから「v」クエリを分離し、上記のog:videoリンク形式で使用する必要があります。私の例では、vの値はBQBjVr1iHH4です。

オプション2：YouTubeページにog:urlを設定します。

vコードを分離する機能がない場合は、og:urlタグをYouTubeページに設定できます。私の例では、次のようになります。

<meta property='og:url' content='https://www.youtube.com/watch?v=BQBjVr1iHH4' />

これにより、Facebookから https://www.youtube.com/watch?v=BQBjVr1iHH4 からOpen Graphタグを取得し、埋め込みで使用するように指示されます。つまり、説明とタイトルはYouTubeページから取得されます。ただし、誰かがリンクをクリックすると、そのWebサイトにアクセスします。

私の例では、2番目のオプションを使用しているときに誰かが次のリンクを貼り付けた場合 https://www.keithandthegirl.com/vip/bonus/episode/9/40/this-is-4 FacebookはURLがYouTubeに設定されていることを確認し、そのYouTubeリンクにOG情報を問い合わせます。すべてがYouTubeのようになりますを除くリンクをクリックして https://www.keithandthegirl.com/vip/bonus/episode/9/40/this-is -4

もう1つの注意：httpではなく、httpsを使用してください。 Facebookは、安全でないビデオをサイトに埋め込みません。

33
Michael Khalili

YouTubeページのソースコードから、og:videoタグの形式は次のとおりです

<meta property="og:video" content="http://www.youtube.com/v/k86xpd26M2g">

次のURLのソースコードで簡略化されたYouTubeから使用されるメタデータの例も見ることができます。 http://fb.stevelarsen.co.uk/example.html

Open Graphプロトコルの詳細については、こちらをご覧ください： http://ogp.me/

9
larsen161

私が見つけたものは次のとおりです。

FacebookのOpen Graph Protocolを使用すると、URLのHTMLの<head>のメタデータが正しくフォーマットされている限り、Publisherは任意のURLのビデオを使用できるようになりました。 <head>にあるべき情報のリストは次のとおりです。

  • サムネイル画像のURL：

    <meta property="og:image" content="image_src URL">

  • SWF URL：

    <meta property="og:video" content="video_src URL">

  • ページのURL：

    <meta property="og:url" content="URL">

  • 題名：

    <meta property="og:title" content="title">

  • 説明：

    <meta property="og:description" content="description">

  • ビデオのピクセル幅：

    <meta property="og:video:width" content="video_width">

  • ビデオピクセルの高さ：

    <meta property="og:video:height" content="name="video_height">

  • コンテンツタイプ：

    <meta property="og:type" content="video">
9
Ryan Walton
<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>

.flvファイルのリンク....チェックアウト https://developers.facebook.com/docs/opengraph/#types

4
Louy

Facebookが提供するデバッガーにつまずいた人のために、以下に注意してください：

デバッガーにログインすると、httpsセッションになります。デバッグでビデオを表示するには、ビデオにセキュアURLをメタで追加する必要があります。 youtubeビデオの追加は簡単で、ページのURLをog：urlに入れるだけで機能します。

この結論に至るまでに費やした時間。遅すぎて疲れた、今寝たい:)

0
Talha