{"id":997,"date":"2020-08-04T06:46:04","date_gmt":"2020-08-04T06:46:04","guid":{"rendered":"\/blog\/?p=997"},"modified":"2020-08-04T06:47:24","modified_gmt":"2020-08-04T06:47:24","slug":"how-to-embed-a-facebook-live-video-on-website","status":"publish","type":"post","link":"https:\/\/randomtools.io\/blog\/how-to-embed-a-facebook-live-video-on-website\/","title":{"rendered":"how to embed a Facebook live video on website"},"content":{"rendered":"

Facebook Live is a great way to engage with your audience, It is possible you may want to\u00a0embed the live video to your website or blog. so your website visitor or subscribers who don’t use Facebook can also view the live video and engage with it.<\/p>\n

This blog post we are going to talk through step by step way to\u00a0embed your Facebook live video to your blog or website. If you own a Facebook page and would like to go live for all the page subscribers, you can go live and use the below steps to publish this live video to the website as well at the same time.<\/p>\n

What is Facebook Live Video<\/h2>\n

Facebook Live Video is a real-time broadcasting feature from Facebook allowing content creators to broadcast their video or real-time moments to their fans or subscribers. It is highly engaging. A camera or webcam can be used to stream the live videos through Facebook<\/p>\n

\"Facebook<\/p>\n

Embed a Facebook live video on the website –<\/h2>\n

Follow the below steps to embed the video to your website<\/p>\n

Step 1 – Get Video Post URL<\/h3>\n

First of all, you need to find the video URL of the video you want to embed, The video needs to be public, hence if you are using a closed group this won’t work.<\/p>\n

For testing you can use this\u00a0example URL<\/strong>:<\/p>\n

\"https:\/\/www.facebook.com\/FacebookDevelopers\/videos\/10152454700553553\/\"<\/span><\/pre>\n
Step 2. Load JavaScript SDK<\/h3>\n
To use the Embedded Video Player Plugin, or any other Social Plugin, you need to add the\u00a0Facebook JavaScript SDK<\/a>\u00a0to your website. You need to load the SDK only once on a page, ideally right after the opening\u00a0<body><\/code>\u00a0tag:<\/p>\n
<div<\/span> id<\/span>=<\/span>\"fb-root\"<\/span>><\/div><\/span>\r\n<script<\/span> async<\/span> defer<\/span> src<\/span>=<\/span>\"https:\/\/connect.facebook.net\/en_US\/sdk.js#xfbml=1&version=v3.2\"<\/span>><\/script>\r\n<\/span><\/pre>\n
Step 3. Place Embedded Video Player Tag<\/h3>\n
Next place the Embedded Video Player tag at any place of your website. Replace\u00a0{your-video-post-url}<\/code>\u00a0with your posts’ URL.<\/p>\n
<div<\/span> class<\/span>=<\/span>\"fb-video\"<\/span> data-href<\/span>=<\/span>\"{your-video-post-url}\"<\/span>  \r\n  data-allowfullscreen<\/span>=<\/span>\"true\"<\/span> data-width<\/span>=<\/span>\"500\"<\/span>><\/div>\r\n<\/span><\/pre>\n
4. Testing<\/h3>\n
Once you completed these steps you’re able to test your Embedded Video Player. A completed integration will look like something like this:<\/p>\n
 <\/p>\n
<html><\/span>\r\n  <title><\/span>My Website<\/span><\/title><\/span>\r\n<body><\/span>\r\n  <div<\/span> id<\/span>=<\/span>\"fb-root\"<\/span>><\/div><\/span>\r\n  <script<\/span> async<\/span> defer<\/span> src<\/span>=<\/span>\"https:\/\/connect.facebook.net\/en_US\/sdk.js#xfbml=1&version=v3.2\"<\/span>><\/script><\/span>\r\n  <h1><\/span>My Video Player<\/span><\/h1><\/span>\r\n  <div<\/span> class<\/span>=<\/span>\"fb-video\"<\/span>\r\n    data-href<\/span>=<\/span>\"https:\/\/www.facebook.com\/FacebookDevelopers\/posts\/10151471074398553\"<\/span>\r\n    data-width<\/span>=<\/span>\"500\"<\/span>\r\n    data-allowfullscreen<\/span>=<\/span>\"true\"<\/span>><\/div><\/span>\r\n<\/body><\/span>\r\n<\/html>\r\n\r\n<\/span><\/pre>\n
<\/p>\n
Any questions, please do let us know through comments! If you like the post make sure to share it using the share button below.<\/p>\n
 <\/p>\n
<\/span><\/div>","protected":false},"excerpt":{"rendered":"
Facebook Live is a great way to engage with your audience, It is possible you may want to\u00a0embed the live video to your website or<\/p>\n
<\/span><\/div>","protected":false},"author":1,"featured_media":945,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[95,94,96],"_links":{"self":[{"href":"https:\/\/randomtools.io\/blog\/wp-json\/wp\/v2\/posts\/997"}],"collection":[{"href":"https:\/\/randomtools.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomtools.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomtools.io\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/randomtools.io\/blog\/wp-json\/wp\/v2\/comments?post=997"}],"version-history":[{"count":3,"href":"https:\/\/randomtools.io\/blog\/wp-json\/wp\/v2\/posts\/997\/revisions"}],"predecessor-version":[{"id":1000,"href":"https:\/\/randomtools.io\/blog\/wp-json\/wp\/v2\/posts\/997\/revisions\/1000"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomtools.io\/blog\/wp-json\/wp\/v2\/media\/945"}],"wp:attachment":[{"href":"https:\/\/randomtools.io\/blog\/wp-json\/wp\/v2\/media?parent=997"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomtools.io\/blog\/wp-json\/wp\/v2\/categories?post=997"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomtools.io\/blog\/wp-json\/wp\/v2\/tags?post=997"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}