Facebookであなたのニュースフィードに自動再生ビデオを投稿することができる方法を紹介します。
Facebookの自動再生ビデオはタイムライン上に掲載され再生時に音もなく動画が再生されているだけですが興味がないであろう動画にも吸い込まれるように視聴してしまいます。
Facebookを利用する人は知っていると思いますが（Youtubeと比較した場合、特にいくつかの動画は、再生数をFacebookでは2015年に一日あたり80億のビデオ再生に2014年の一日あたり〜10億ビデオ再生から飛躍的に伸びています）、事実としてFacebookのビデオ視聴市場は急速に成長している。
そうしたのびを利用したい場合は、Facebookでより密接に統合しようとする必要があります。
すでにWordPressのためのFacebookのインサイト記事を設定する方法を紹介しています。
このインサイト記事はFacebook側でRSS受信した記事を手動で公開している事になるので利便性は低いし、Facebook側に記事を渡すことになるのでユーザーとしては軽く見やすいと言う事になるけど、本来自分のサイトに来て記事を見てほしいといった目的とはずれてします。
大手メディアなどは、人をそこに避けるから、審査などを経て公開すると言った手間を惜しむことなく対応も出来るでしょうけど、なかなかに個人メディアでは出来ないかなと。
このあたりの勘所などをもう少し掘り下げてまとめて見たい。
さて、この記事では、あなたのワードプレスにFacebookのビデオを埋め込むための2つの方法を紹介します。
最初の方法は、簡単ですが、埋め込まれた動画の自動再生をすることはできません。２つ目の方法は、それを設定するために、あなたのテーマに簡単なコードを導入する必要があります。その後、あなたはすぐに動画を埋め込む事ができるし、それらを自動再生することができます。
WordPressの簡単な方法でFacebookビデオを埋め込む方法
YoutubeやTwitterなどは公式が対応しており埋め込みをするのは非常に簡単です。
それは単に投稿画面でビジュアルモードにして各サービスから取得したURLをペーストするだけでそれは自動的に取得され埋め込まれた投稿となります。
このビデオはYoutubeのURLをペースとしただけで表示されています。
また、
自分の強みを持っている人は成功する確率が上がると言う話 https://t.co/3gjpAhFbGP pic.twitter.com/Ki3LzIGFZM
— モッチー 実行中 (@hmomochi) November 7, 2016
このツイートも同じ。
Facebookのビデオ埋め込みも同じようにできれば良いのですが、まだ、公式もそこまでは対応していません。
ですから
https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FKickstarter%2Fvideos%2F10154763153019885%2F&show_text=0&width=560
このようにコードを取得して埋め込む必要があります。
ビジュアルモードからテキストモードにして取得したコードを表示すれば良いのです。
このように取得したFacebook動画は投稿内に埋め込む事は出来ます。
ただ、このやり方は前述した通り自動再生をすることは出来ません。
ワードプレスでFacebook自動再生のビデオを埋め込む方法
Facebookは動画を自動再生に完全に移動しました.
自動でその動画は再生されるのです。
自動再生動画を追加する二段階のプロセスが必要となります。
まず、あなたのテーマのheader.phpのにFacebookのJavaScript SDKを追加する必要があります。
次に、あなたが実際に動画を埋め込むために、あなたの投稿やページにコードスニペットを使用する必要があります。
以下では両方を行う方法を紹介します。
header.phpにFacebookのJavaScript SDKを追加する
Facebookの埋め込みビデオページでJavaScript SDKの最新バージョンを見つけることができます。
しかし、この記事の要点は自動再生されるビデオを埋め込むと言う目的なので以下のコードをあなたの子テーマのheader.phpのファイルで<body>タグの後に挿入する必要があります。
コードは、以下のとおりです。
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>ダッシュボード上で外観→エディタに行くことによって、このファイルを見つけることができます。あなたがテーマのheader.phpのファイルを選択します。（WordPressでテーマをカスタマイズするためにはメンテナンス性なども考慮して子テーマを使用することを推奨されています。子テーマを使用しましょう！）
次に、CTRL + Fで<bodyを検索すれば<body>を見つける事が容易になります。（Windowsユーザーの場合）。以下ののように<body>タグの後に上記のコードを追加します。
このコード挿入を保存すれば作業は完了です！
これだけの変更をする必要があります。自動再生ではないビデオを埋め込むiframeメソッドを使用するより簡単ではありませんか？
投稿に自動再生FACEBOOKのビデオを埋め込みます
ビデオを埋め込むには、以下のコードを使用します：
<div class="fb-video" data-href="facebook.com/video-url" data-width="500" data-allowfullscreen="true"></div>
以下の部分を任意のURLを適応してください。
data-href="facebook.com/video-url"
自動再生のコードにURLを入力する必要があります。
それを取得するにはFacebook上で実際の映像を右クリックして、任意のFacebookのビデオのURLを取得し、表示する動画のURLオプションを選択し追加することができます。
<div class="fb-video" data-href="https://www.facebook.com/Kickstarter/videos/10154763153019885/" data-width="500" data-allowfullscreen="true"></div>
取得したURLを適応するとこの様なコードになり、実際に表示させて見るとこのようになります。
動画のURLを挿入したら、ビデオの外観と機能をカスタマイズすることができます。
ビデオの幅を変更したい場合は、data-width=”500″で数値を変更することができ、
フルスクリーンを無効にするには、data-allowfullscreen=”true”をオプションは false にします。
自動再生を有効にするには、次のコードを追加する必要があります。data-autoplay=”true”
同様に、キャプションを追加するには、このコードを追加する必要があります。 data-show-captions=”true”
少し混乱するかもしれませんが、以下でこれらのオプションを適応したコードを提供します。
- ビデオ： https://www.facebook.com/Kickstarter/videos/10154763153019885/
- 幅： 700ピクセル
- フルスクリーン禁止
- 自動再生が有効
- キャプション有効
<div class="fb-video" data-href="https://www.facebook.com/Kickstarter/videos/10154763153019885/" data-width="700" data-allowfullscreen="false" data-autoplay="true" data-show-captions="true"></div>
このコードをテキストモードにして投稿内に記載して下さい。
自動再生されていますよね？
Facebookで生成された埋め込みコードでは、上記のようなオプションを追記してもオプションの内容が動作することはありません。
だから、この様にSDKを追記してあげる方法で対応するのが一番良いと思います。
さらに良いのは、WordPressの公式がURLを取得してビジュアルモードでペーストしてあげるだけで、このように自動再生されるビデオを埋め込める様に対応してくれる事です。
ワードプレスでFacebookのビデオを埋め込むのメリット
自動再生動画へのアクセスを取得するだけでなく、Facebookの新しいライブストリーミング機能を使用してライブストリームを埋め込むために、このメソッドを使用することができます。
それについてはすべてが同じように自動再生で機能します。
しかし、自身のサイト上の機能は利点のみではありません。このように動画を埋め込むことや別の効果的な方法提供して自分のFacebookのページを促進します。
自分のFacebookのページ上でネイティブのFacebookのビデオを投稿した後、インサイト記事を作成するしてあなたのサイトでそれらを埋め込むことができます。
ビデオの視聴者が簡単にあなたのページに移動できるように埋め込まれたFacebookのビデオは常に、ユーザーの目に届くようにページの最上部に設置することで、それらが掲載されたページを常に表示することでより効果的なプロモーションを行う事ができるでしょう。
