図入りfacebookの投稿や動画をブログへ埋め込む方法、サイズの変更方法。

多くの人が活用するようになったfacebook。

facebookには数多くの機能がありますが今回は投稿の埋め込み方法、動画の埋め込み方法について図入りで解説しました。

注:ディスクトップコンピューター向けにかいていますのでスマートフォンやタブレットは正常に表示されない可能性があります

投稿の埋め込み

・まずは投稿された記事の埋め込みです。
facebookでブログに貼り付けたい投稿のところまでいきます。

それから投稿右上の赤い丸で囲まれたところをクリックします。下図1参照。

【図1】記事の投稿の仕方。
【図1】記事の投稿の仕方。

 それから表示された「埋め込み」をクリックします。上図1では赤く囲まれているところです。

 

【図2】表示されたコードをコピーする。
【図2】表示されたコードをコピーする。

表示されたコードをすべて選択し、コピーします。上図2で赤く囲まれているところです。

このコードをブログ中の表示させたいところにペースト(貼り付け)します。

 初期設定では幅500pixで表示されます。コードの中のdata-width=”500″の値を変更することにより350-750pixの間で表示の大きさが変更可能。初期設定のdata-width=”500″では以下のように表示されます。

Ever dream about packing up and leaving it all behind? Now what if you only had $2 in your pocket? Ten years ago that’s…

National Geographicさんの投稿 2011年9月13日

data-width=”350″では以下のように表示されます。

E voi l’avevate mai visto un prestigiatore giapponese fare l’onda energetica di Dragon Ball con 10 euro? #IGT

Italia's Got Talent Officialさんの投稿 2016年3月30日

data-width=”700″では以下のように表示されます。350の丁度倍の大きさになります。

E voi l’avevate mai visto un prestigiatore giapponese fare l’onda energetica di Dragon Ball con 10 euro? #IGT

Italia's Got Talent Officialさんの投稿 2016年3月30日



動画を埋め込む

・次は動画の埋め込み。

基本的には投稿の埋め込みと一緒です。ブログなどに埋め込みたい動画の投稿に行きます。そして下の図3の赤い丸の部分をクリック。

【図3】動画の埋め込みも投稿と同じ。
【図3】動画の埋め込みも投稿と同じ。

 次に動画場合は埋め込みEmbedを選択。

【図4】動画も埋め込み、embedを選択。
【図4】動画も埋め込み、embedを選択。

投稿と同様、表示されたコードをコピー。

【図5】赤い部分のコードをコピーする。
【図5】赤い部分のコードをコピーする。

これは画面の幅に合わせて動画がフレキシブルに大きさ変化をするようです。

Italia's Got Talent | Keiichi |

Se lo stipendio non vi è ancora arrivato, ma avete bisogno di contanti fate come il mago Keiichi! #IGT vi aspetta stasera per un'altra incredibile puntata!

TV8 – Canale 8さんの投稿 2016年4月6日

動画のサイズを指定する

 Enbed埋め込みで表示されたコードをそのままコピー、ペーストすると上記のように画面に合わせて大きさが変わる動画ですが、動画の大きさを固定したい場合は詳細をクリックした先にある。ここからにある「Embedded Video Player Configurator」に動画のアドレスと希望の大きさの数値を入れて得られたコードを貼り付ければ指定した大きさにできます。

【図6】動画のサイズを変えるにはアドレスと数値をいれてコードを表示。
【図6】動画のサイズを変えるにはアドレスと数値をいれてコードを表示。

・facebookiに投稿された動画のアドレスを知るには

 一度タイムラインからEmbedを選択し、表示されるコードの中に投稿された動画のアドレスが記載されています。

 図5で得たコードをノートパッドなどにペーストします。すると表記の中に

<blockquote cite="https://www.facebook.com/TV8it/videos/215076475528321/">

という表記があります。この”  ” で囲まれた部分https://www.facebook.com/TV8it/videos/215076475528321/がアドレスになります。この部分だけをコピーして図6の動画アドレスボックスにペースト(貼り付け)してください。

 またはこちらのリンクからfacebookに投稿された動画のURLアドレスを知る方法。

 下方にあるGet Codeボタンを押すと、一度目はプレビューが表示されます。

 表示されたサイズでよいならばもう一度Get Codeボタンを押します。するとコードが表示されます。

【図8】get Codeボタンを押すとコードが得られる。
【図8】get Codeボタンを押すとコードが得られる。

コードが二段ありますが両方ともページにコピーペーストすれば、希望のサイズで表示されます。

【図9】表示されたコードを両方表示したいページに貼り付ける。
【図9】表示されたコードを両方表示したいページに貼り付ける。

Width=”400″で表示例

Italia's Got Talent | Keiichi |

Se lo stipendio non vi è ancora arrivato, ma avete bisogno di contanti fate come il mago Keiichi! #IGT vi aspetta stasera per un'altra incredibile puntata!

TV8 – Canale 8さんの投稿 2016年4月6日

動画にいいね!の数やコメント、シェアの数を表示するには

【図9】シェアやいいね!を表示するにはInclude full postチェックボックスにチェックを入れる。
【図9】シェアやいいね!を表示するにはInclude full postチェックボックスにチェックを入れる。

上記の【図8】でGet Codeを一度押した状態で表示される、Include full postにチェックを入れてから、再度Get Codeを押せば、シェア数、いいね!数、コメント数の表示された動画が表示されます。

Italia's Got Talent | Keiichi |

Se lo stipendio non vi è ancora arrivato, ma avete bisogno di contanti fate come il mago Keiichi! #IGT vi aspetta stasera per un'altra incredibile puntata!

TV8 – Canale 8さんの投稿 2016年4月6日

今回は以上です。