埋め込み動画プレイヤーを使用すると、ウェブサイトに簡単にFacebook動画とFacebookライブ動画を追加できます。動画またはライブ動画のソースには、Facebookページや個人のタイムラインで投稿された公開動画を使用できます。
埋め込み動画プレイヤー構成ツールコードサンプル設定コードの手動追加埋め込むFacebook動画のURLを選択します。
埋め込み動画プレイヤーのコードを生成するには、URLをコード構成ツールに貼り付け、[コードを取得]ボタンをクリックします。
スニペットをコピーし、目的のウェブサイトのHTMLに貼り付けます。
コードサンプルをコピーして自分のウェブサイトに貼り付けてください。data-href
の値を動画のURLに変更します。プレイヤーのサイズを変更する場合は、data-width
属性を使用します。
<html> <head> <title>Your Website Title</title> </head> <body> <!-- Load Facebook SDK for JavaScript --> <div id="fb-root"></div> <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script> <!-- Your embedded video player code --> <div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-show-text="false"> <div class="fb-xfbml-parse-ignore"> <blockquote cite="https://www.facebook.com/facebook/videos/10153231379946729/"> <a href="https://www.facebook.com/facebook/videos/10153231379946729/">How to Share With Just Friends</a> <p>How to share with just friends.</p> Posted by <a href="https://www.facebook.com/facebook/">Facebook</a> on Friday, December 5, 2014 </blockquote> </div> </div> </body> </html>
上述の構成ツールには、埋め込み動画プレイヤーで使用できる一部の設定が含まれていません。次のような設定も変更できます。
設定 | 説明 | デフォルト |
---|---|---|
| 動画の絶対URLです。 |
|
| 動画のフルスクリーンモードでの再生を許可します。 |
|
| ページの読み込み時に動画の再生を自動的に開始します。動画は音声なし(ミュート)で再生されます。音声は動画プレイヤーのコントロールからオンにできます。この設定はモバイル機器には適用されません。 |
|
|
|
|
| 動画表示枠の幅です。最小値 |
|
| 動画に関連するFacebook投稿がある場合は、 |
|
|
|
|
<div class="fb-video" data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553" data-width="500" data-allowfullscreen="true" data-autoplay="true" data-show-captions="true"></div>
自分で投稿した公開動画の場合は(「よくある質問」を参照)、動画投稿そのものから埋め込みコードを直接取得できます。
オプションメニューから[Embed Video
]を選択します。
動画をフルページビューで視聴している場合は、右下の[Embed Video
]ボタンを選択します。
公開動画をFacebookページに投稿している場合は(「よくある質問」を参照)、埋め込みコードをタイムラインから直接取得できます。Facebookの投稿の右上に表示されるアイコンをクリックします。
ドロップダウンメニューから[Embed Video
]を選択します。(Facebookページのみ)。
動画投稿を埋め込むためのコードが記載されたダイアログが表示されます。このコードをコピーし、ウェブページ内で投稿を表示させたい場所にコードを貼り付けます。
技術的な詳細については、「コードの手動追加」セクションをご覧ください。
コードジェネレーターを使用しなくても、コードを手動で埋め込むこともできます。
まず、シェアする動画投稿のURLを取得する必要があります。公開された動画投稿からのみURLを取得できます(「よくある質問」を参照)。公開された動画投稿であれば、投稿日時のすぐ横に、次のような地球儀のアイコンがグレーで表示されています。
次のサンプルURLを使ってテストすることもできます。
"https://www.facebook.com/FacebookDevelopers/videos/10152454700553553/"
埋め込み動画プレイヤープラグインや他のソーシャルプラグインを使用するには、ウェブサイトにFacebook JavaScript SDKを追加する必要があります。ページへのSDKの読み込みは1度だけで構いませんが、次のように<body>
タグを開いた直後にSDKを読み込むように設定することをおすすめします。
<div id="fb-root"></div> <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
JavaScript SDKの実装方法に関する詳細は、「JavaScript SDK - Quickstart (JavaScript SDK - クイックスタート)」をご覧ください。
次に、ウェブサイトの任意の場所に埋め込み動画プレイヤータグを配置します。{your-video-post-url}
は投稿のURLに置き換えます。
<div class="fb-video" data-href="{your-video-post-url}" data-allowfullscreen="true" data-width="500"></div>
ここまでの手順を終えたら、埋め込み動画プレイヤーをテストできます。すべてを統合すると次のようなコードになります。
<html> <title>My Website</title> <body> <div id="fb-root"></div> <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script> <h1>My Video Player</h1> <div class="fb-video" data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553" data-width="500" data-allowfullscreen="true"></div> </body> </html>
テストサンプルでは次のスクリーンショットのような画面が表示されます。
サイズ、言語、その他の設定を変更する場合は、このページに後述されている手順に従います。
埋め込みコードがCMSによって生成されるケースでは、未加工の投稿URLのみが必要です。投稿のURLの取得には、次の2つの方法があります。
これらの方法の該当箇所は次のスクリーンショットに赤線でハイライト表示されています。
埋め込み動画プレイヤーをウェブサイトに自動的に統合する場合、Graph APIを使用して動画を集約させることもできます。たとえば、Page Videos APIエンドポイントを使用すると、/{page-id}/videos
へのリクエストに対して次のような形式(短縮版)の応答が送信されます。
{ "data": [ { "id": "1234567890", "created_time": "2015-02-25T23:22:06+0000", "description": "My Video Caption", "embed_html": "<iframe src=\"https://www.facebook.com/video/embed?video_id=1234567890\" width=\"1280\" height=\"720\" frameborder=\"0\"></iframe>", "format": [] } ] }
動画のURLを取得するには:
id
値を使用して、次の構造に合わせてURLを作成します。
"https://www.facebook.com/video.php?v={id}"
動画の埋め込みには、embed_html
プロパティを使用しないでください。このトピックに関する詳細は、「よくある質問」セクションをご覧ください。
デスクトップ版の埋め込み動画プレイヤーの幅は、次のサンプルにあるように、埋め込み動画プレイヤータグのdata-width
属性を使って変更できます。最小値は220
です。上限値に制限はありませんが、プレイヤーが親要素よりも大きく表示されることはありません。
プラグインのサイズの変更にはCSSスタイルタグを使用しないでください。表示エラーが発生することがあります。
<!-- WRONG! --> <style type="text/css"> .fb-video { width: 500px; } </style> <div class="fb-post" data-href="{your-video-post-url}"></div> <!-- CORRECT --> <div class="fb-video" data-href="{your-video-post-url}" data-allowfullscreen="true" data-width="500"></div>
data-allowfullscreen="true"
プロパティを追加することで、動画のフルスクリーンモードでの再生が可能になります。
携帯サイトでは、埋め込み動画プレイヤーのサイズがその親要素の内側の幅に合わせて自動的に調整されます。
Facebook JavaScript SDKのローカライズバージョンを読み込むことで、埋め込み動画プレイヤープラグインの言語を変更できます。SDKを読み込むときに、src
の値を変更して、自分のロケールが使用されるようにします。たとえば、フランス語(フランス)の場合は、ロケールのen_US
をfr_FR
に置き換えます。
src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v3.2"
使用する言語によっては、ソーシャルプラグインの幅の調整が必要になる場合があります。詳しくは、「ローカライズと翻訳」ページをご覧ください。
WordPressサイトでJavaScript用Facebook SDKをすでに使用している場合は、投稿にfb-video
タグを追加することで、埋め込み動画プレイヤープラグインを使用できます。
<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" data-width="500" data-allowfullscreen="true"></div>
Facebook SDK for Javascriptを使用していないWordPressサイトに、各動画投稿から取得できるスニペットをコピーして貼り付ける方法で動画を埋め込むと、多くの場合、埋め込み動画プレイヤープラグインが表示処理を行いません。これは、WordPressではすべての&
文字が#038;
に変換されてしまい、プレイヤーが正しく認識されなくなることが原因です。
回避策として、次のコードを使用してプラグインを追加します。
<script>window.fbAsyncInit = function() { FB.init({ xfbml : true, version : 'v3.2' }); }; (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" data-width="500" data-allowfullscreen="true"></div>
今後、WordPressとより簡単に統合するための新たな方法がリリースされる予定です。
video
のembed_html
プロパティを使用することはできますか。できません。embed_html
プロパティは使用しないでください。代わりに、埋め込み動画プレイヤープラグインを使用してください。
embed_html
プロパティについて:Graph APIエンドポイントvideo
には、embed_html
という名前のプロパティがあります。この値には、ウェブページに埋め込んで、リクエストされた動画を再生するためのHTML要素が含まれます。
この値を埋め込み動画プレイヤープラグインと混同しないでください。今後はこのプロパティを使用せず、代わりに埋め込み動画プレイヤープラグインを使用することをおすすめします。
embed_html
プロパティを使用すると、動画プレイヤーに次のような不具合が発生します。
embed_html
プロパティの例(現在は利用できません):{ "embed_html": "<iframe src=\"https://www.facebook.com/video/embed?video_id=1234567890\" width=\"1280\" height=\"720\" frameborder=\"0\"> </iframe>" }