Facebook Live is a great way to engage with your audience, It is possible you may want to embed 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.
This blog post we are going to talk through step by step way to embed 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.
What is Facebook Live Video
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
Embed a Facebook live video on the website –
Follow the below steps to embed the video to your website
Step 1 – Get Video Post URL
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.
For testing you can use this example URL:
"https://www.facebook.com/FacebookDevelopers/videos/10152454700553553/"Step 2. Load JavaScript SDK
To use the Embedded Video Player Plugin, or any other Social Plugin, you need to add the Facebook JavaScript SDK to your website. You need to load the SDK only once on a page, ideally right after the opening <body> tag:
<div id="fb-root"></div> <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
Step 3. Place Embedded Video Player Tag
Next place the Embedded Video Player tag at any place of your website. Replace {your-video-post-url} with your posts’ URL.
<div class="fb-video" data-href="{your-video-post-url}" data-allowfullscreen="true" data-width="500"></div>
4. Testing
Once you completed these steps you’re able to test your Embedded Video Player. A completed integration will look like something like this:
<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>
Any questions, please do let us know through comments! If you like the post make sure to share it using the share button below.