Broadcast Facebook Live on your Website  Step by Step Guide ▷ 2021

When you want carrying out a sustained marketing plan will require you to use all the tools that you have at your fingertips. One of them is to show and share Facebook videos on your website.

For this, it will be necessary for you to know the benefits of integrating your live broadcasts with your company page or personal brand on Facebook. This information can be found in the following paragraphs.

But this is not all, We will also explain the step by step you must do to show your Facebook Live transmissions with the Internet users of your website. Let’s get started.

What are the benefits of embedding your Facebook Live broadcasts on your website?

What are the benefits of embedding your Facebook Live broadcasts on your website?

If you want to increase your visits and organic growth opting to integrate Facebook Live on your site is a very good strategy. Imagine, your visitors will be able to see you face to face and live from the first moment. That empathy that you have achieved with your followers, you will surely have it with everyone who enters the site. That implies that your followers will be able to know more about you, your company or services and quickly.

They will not even have the need to enter FB to see the streams, cAny user who does not use the social network will have access to your content. Until they will be able to interact in real time with you and your audience. Not to mention the time and space that you will save if you decide on simultaneous transmissions. Of course, for this you must learn to link your Lives correctly.

In addition to learn about the needs of buyer personas of your marketing strategy (because FB Live is an ideal tool for branding) you will have the option to better choose the paths you want to follow to achieve your goals. This will help you save money and time in knowing where your break-even point is. Finally, if you meet some requirements imposed by the social network, you can monetize your living and in this way earn extra money as a true influencer.

Learn step by step how to show your Facebook Live transmissions with the Internet users of your website

Learn step by step how to show your Facebook Live transmissions with the Internet users of your website

Have you inserted videos from YouTube or another platform on your website before? Then you will know that Using the URL, or the address of the video, is the easiest way to show it to your visitors. For this you just have to start the transmission in FB and right click inside the player. After this, you copy the full link that you get automatically. Done this, paste the code in the HTML of the page of the site where you want to place it.

Once save the changes, publish and update it will be open so that anyone who wants to can see it without problems. Simple as this to display your FB Live broadcasts. If for some reason the transmission does not go as you expected do not worry!

We will show you other steps to solve the compatibility problem you have with your player. Namely, the size of the software you use to reproduce does not fit well on the page. The steps that you will see below will also help you for those occasions when you want to go a bit further, so that the people who visit your website can participate actively.

For all this, we will show you the step by step to make a more complete insertion on your own site, using Facebook Live:

The live begins

The first thing you have to do is start broadcasting live, to do this, follow this guide:

  • Head to FB and log in to your Facebook page or profile.
  • Then, start with live video as you normally do be it for your page or profile.
  • Once you press “Live” the native player of the application will open.
  • Click on “Connect”.
  • Go to the right side window, in the tab “Publication” and click on it.
  • In the corner you will find the option “Embed this video”So you will have to click on it.
  • A pop-up window will immediately open in which it will appear the code of the live video.

Get the code with the integrated video player

Get the code with the integrated video player

At this step you should pay close attention because you will have to make modifications if you want to further customize the options. This is in case you need the video to appear with buttons to give Likes, make comments and others. Of course this is the best way to show the video.

The steps you will do are:

  • Click on the option “Advanced configuration”.
  • From here the platform will direct you to another section called “Video Player Configurator”Within the site. This is a developer tool for adjust more characteristics of the direct url.
  • First modify the width of the video to your liking, this tool is right next to the link.
  • Then check the box “Include the entire publication.”
  • Once this is done you must open the window where it indicates “Get code.”

In case you want manually add codes, you can also do it.

The codes that you will have to use are:

<html>

<head>

<title>Your Website Title</title>

</head>

<body>

<!-- Load Facebook SDK for JavaScript -->

<div id="fb-root"></div>

<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

<!-- Your embedded video player code -->

<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-show-text="false">

<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>

</body>

</html>

Being data-href the URL of the video you want to embed.

Modify the code

After clicking “Get code” you will have two ways to insert the live stream, one of them is by selecting the tab “IFrame” with the code in question. This is simpler since it only try to copy all the code you see in the window. After this you go to your own website and in the section of HTML editor you insert it right where you want it. Save, publish, update the site and voila.

Now, there is another option a little more complex that is located in the other tab with the “JavaScript SDK”, at this point you will need a bit of programming knowledge. If you don’t have it, don’t worry because it is possible to do it on your own with what we will say. Is about paste some of the Facebook SDK code for JavaScript on the page after the tag <body> opening. Meanwhile the rest of the code should go where you want the FB Lives to appear.

In WordPress use the player plugin and then enter:

<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553"

data-width="500" data-allowfullscreen="true"></div>

But if you don’t want to use the Facebook SDK for JavaScript, you will have to write the code:

<script>window.fbAsyncInit = function() {

init({

xfbml : true,

version : 'v3.2'

});

}; (function(d, s, id){

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) {return;}

js = d.createElement(s); js.id = id;

src = "https://connect.facebook.net/en_US/sdk.js";

parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" data-width="500" data-allowfullscreen="true"></div>

Another way you have is to use the API Graph video insertion function, enter the following codes:

{

"data": [

{

"id": "1234567890", / Siendo el valor "id": "1234567890" "https://www.facebook.com/video.php?v={id}"

"created_time": "2015-02-25T23:22:06+0000",

"description": "My Video Caption",

"embed_html": "<iframe src="https://www.facebook.com/video/embed?video_id=1234567890" width="1280" height="720" frameborder="0"></iframe>",

"format": []

}

]

}

Next, design the size of the video on a computer screen. Write for it:

<!-- WRONG! -->

<style type="text/css">

.fb-video {

width: 500px;

}

</style>

<div class="fb-post" data-href="https://internetpasoapaso.com/videos-facebook-live-en-pagina-web/{your-video-post-url}"></div>

<!-- CORRECT -->

<div class="fb-video" data-href="https://internetpasoapaso.com/videos-facebook-live-en-pagina-web/{your-video-post-url}"

data-allowfullscreen="true" data-width="500"&gt;</div>

If you want the content to be seen on the entire screen write the code the property data-allowfullscreen="true". So that your video can be adjusted to the screen of a mobile you will not have to program anything additional, since the code automatically makes the necessary adjustments.

List of the best tools to broadcast live from Facebook Live on your website

We will show you below the best tools you can use to broadcast live from Facebook on your personal website:

Facebook Live Video Auto Embed for WordPress

In the top of plugins for WP that make life easier is Facebook Live Video Auto Embed for WordPress. This is because you only need to download it and keep it updated to speed up the task of linking the Lives to the site. It doesn’t matter if the streams come from your profile, from your Fan Page or from a group, you even have the facility to insert other pre-recorded Live videos without problem.

That is, with this tool there is no limit to the audiovisual content you want to insert. Facebook Live Video Auto Embed for WordPress is designed to detect automatically if you are broadcasting to insert streams, it also warns the site if you are active In the net.

For this only a discreet notification bar is configured at the top of the pages. With this, your followers will be connected and will be able to participate from any medium and, if you are not online, you have the possibility of leaving automatic messages to your visitors. It is a complement in tune with the responsive design for so many benefits it had to be at the top.

Download Facebook Live Video Auto Embed for WordPress

Facebook page widget

Facebook page widget

You can choose to use the Page Widget for Facebook. Usually, if you add this plugin, only the header and cover photo will appear, but this is not what we are looking for. Rather you must add several tabs, then through the IFrame code incorporates live broadcasts from Facebook. So live videos can be viewed using just one Widget.

Enter the plugins of the pages to the website:

<div class="fb-page"

data-href="https://www.facebook.com/facebook"

data-width="380"

data-hide-cover="false"

data-show-facepile="false"></div>

Then add multiple tabs:

<div class="fb-page"

data-tabs="timeline,events,messages"

data-href="https://www.facebook.com/YoloBookStore"

data-width="380"

data-hide-cover="false"></div>

WPLiveStream.com

On the other hand, you have the easy plugin to download WP Live Stream. Although it is a paid plugin, it is one of the most complete in terms of live streaming. It costs around € 59 per year if you use it on a single website. In addition, the advantage of this program in relation to the others is that it specializes only in live content.

You just have to copy and paste the short link of the videos and voila, this software will detect and insert the transmission shortly. It has free updates and the developer ensures that they will not spend more than 3 minutes in the detection of the emission. Even, If you are not happy with your purchase you can request a refund before the month.

Elementor Insert Block

Elementor Insert Block

Another plugin that can save you a lot of trouble in the future is Elementor. This plugin for creating pages is well known and used. But What does it have to do with the FB Lives? Well easy, This includes among its utilities a special insertion block for Facebook.

You just have to add the app ID of this social network to the settings, you will do this through the integration settings. The good thing about Elementor is that it is a very flexible plugin because it is possible to add extensions of blocks of any type, which will fit perfectly. Use the URL https://elementor.com/ to enter this program and buy any of its paid versions.

Free Livestream

The software Free Livestream – Live Video Streaming With Hapity is an ideal alternative plug-in that allows you to stream simultaneously to Facebook. In addition, it includes free video hosting so that these contents do not take up unnecessary space on your devices. Its developers promise that in less than 5 minutes you can configure everything quickly.

Download Free Livestream – Live Video Streaming With Hapity

If you have any questions, leave them in the comments, we will answer you as soon as possible, and it will also be of great help to more members of the community. Thanks! 😉

Felix Bathrobe

Author: Félix Albornoz

I have been working in the technology sector for more than 20 years helping companies and users to develop and train in this field. Always learning new things.

You may be interested:

Leave a Comment