読者です 読者をやめる 読者になる 読者になる

困ったー

困ったことを調べたブログ

【フェイスブック】埋め込み方法のまとめ 埋め込むには?表示されない場合は?


フェイスブックでは、料理やおもしろ動画などが大量に流れてきています。すると、自分のブログでも紹介したいようなときもあり、埋め込みしたい場合があります。

ここでは埋め込み機能を利用する場合の方法などについてまとめていきます。

 

投稿の埋め込み方は?

Construction

フェイスブック内のビデオへのリンクを取得するには?

まずタイムラインで動画を見ます。

面白いのがあれば、右クリック。

すると「Show video URL」とあるので、選択するとビデオへのURLを取得することができます。

f:id:apicode:20151025104427p:plain

 

 

自分のウェブサイトに貼るには?

右上の「>」アイコンでメニューを出します。

「埋め込む」というのがあるので、選ぶとHTMLのコードを取得できます。

それをコピペで自分のサイトへ貼りましょう。

f:id:apicode:20170306094212p:plain

 
 

oEmbed APIの利用法するには?

oEmbedは、サイトの情報やメディアをもっと簡単にウェブへ埋め込めるようにしたオープンなフォーマットです。

今回フェイスブックも対応APIを発表しました。

これによって、今後はフェイスブックのコンテンツを自分のサイトへ簡単に埋め込めるようになります。

使い方も簡単です。

投稿記事は以下のようになります。

https://www.facebook.com/plugins/post/oembed.json/?url={content-url}

 

ヴィデオは以下ののようになります。

https://www.facebook.com/plugins/video/oembed.json/?url={content-url}

 

するとjsonフォーマットがかえってきます。

サ ンプルとして「https://www.facebook.com/plugins/video/oembed.json/?url=https%3A %2F%2Fwww.facebook.com%2Ffacebook%2Fvideos%2F10153231379946729%2F」へアクセスし た場合のJSONの例です。

 

{
  "author_name": "Facebook",
  "author_url": "https://www.facebook.com/facebook/",
  "provider_url": "https://www.facebook.com",
  "provider_name": "Facebook",
  "success": true,
  "height": null,
  "html": "<div id=\"fb-root\"></div>\n<script>(function(d, s, id) {\n  var js, fjs = d.getElementsByTagName(s)[0];\n  if (d.getElementById(id)) return;\n  js = d.createElement(s); js.id = id;\n  js.src = \"//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.3\";\n  fjs.parentNode.insertBefore(js, fjs);\n}(document, 'script', 'facebook-jssdk'));</script><div class=\"fb-video\" data-href=\"https://www.facebook.com/facebook/videos/10153231379946729/\"><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>",
  "type": "video",
  "version": "1.0",
  "url": "https://www.facebook.com/facebook/videos/10153231379946729/",
  "width": "100%"
}

 

この情報の中で、HTMLのところを自分のサイトのところで表示すればOKです。

 

参考:

https://developers.facebook.com/docs/plugins/oembed-endpoints

 

 

埋め込んだビデオが表示されない場合は?

人気ブログのテッククランチで、たくさんフォロワーがいるインスタグラマーさんのスマホで、プッシュ通知がオンになると....という楽しい記事が紹介されています。

jp.techcrunch.com

 

ところがアクセスすると肝心のビデオはみあたりません。

f:id:apicode:20160113152322p:plain

 

もしやと思い、エッジでアクセスしなおすとちゃんとビデオが表示されました。ビデオはユーチューブなどの埋め込みではなく、フェイスブックからの埋め込みでした。

 

最近フェイスブックはビデオ埋め込みを簡単にできるように改善されています。

 

さて、ファイアフォックスでフェイスブックの埋め込みビデオは見にはどうすればいいのでしょうか。

 

まずファイアフォックスでメニューバーを表示します。

次に「ヘルプ」から「アドオンを無効にして再起動」を選びます。

 

するとファイアフォックスは再起動がかかります。起動時に選択肢がでたら「セーフモード」を選びましょう。

 

するとファイアフォックスでもフェイスブックの埋め込みビデオが無事見れました。

f:id:apicode:20160113152258p:plain

参考:

facebook videos not playing in firefox. IE plays them fine, also no problem with youtube videos in firefox. | Firefox サポートフォーラム | Mozilla サポート

 

このブログは、ネットや書籍上の情報、個人の体験や感想を中心にまとめたものです。 正確性を期していはいますが、間違い・誤訳等あるかもしれません。 また、当サイトの情報によって生じたいかなる損失について一切の責任を負いません。 あらかじめご了承ください。