How to Embed Facebook Video on Websites Pages for Video Marketing
Social Media Marketing
Social media marketing is on boom nowadays due to the millions of users available on social site. Video Marketing is one part of social media. Social media marketing can be count as the best source for generating visitor to a website. Posting videos and articles on social media can make the website or blog famous in a very short time.
We often use youtube videos in our website so that visitors should like our articles more due to the video presentation. In the same way, we can also embedded Facebook videos in our website.
[ResponsiveRect]
Embed Facebook Video
Embedding Facebook videos are not that famous like youtube videos on the website. But we can use that online stream also on our website or blog. Something different is always better to work with the latest technology. Before it was difficult to embed facebook videos to website because it require coding knowledge to work with facebook codes, but now facebook has made the embed process easy for developers and designers.
Only public share facebook videos can be embed into your website or blog. Private videos are not authorised to embedded to the website. For playing facebook videos, the user will require to install Shockwave Flash plugin to his browser.
We can Embed Facebook Video in 3 ways.
- Simply by using video URL
- Using embedded video option in videos
- By using JavaScript SDK and Plugin Code
1. Simply by using video URL – WordPress users
For WordPress users, they can embed facebook video by just putting video URL link to the specified position, where they want their video to appear. If they have Facebook javascript SDK loaded into their WordPress then they can also use Embedded Video Player plugin by simply adding the fb-video tag to your post
URL Example:
2. Using Embedded Video Option in Videos – For Custom Website Users
- Open Your facebook profile
- Open your facebook videos and Click Options > Choose Embed Video in drop down list
- Your will get a Video plugin code for using it on your website.
The given code can be used in the web page to display facebook video. The code contains facebook javascript SDk and Plugin code for the video. Simply copy and paste the code into your website.
I have shown an example, where I have added my facebook video code in my HTML file. The code should be placed within <Body> tag.
3. Using JavaScript SDK and Plugin Code
1. Load your Javascript SDK in your web page. Add given JavaScript Code in your Web pages within <Body> tag. This is the javascript function to load your video display into your web pages.
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
2. Add your plugin code in place, where you want to display your video post. Replace the line “your-video-post-URL” with the actual facebook video URL.
<div class="fb-video" data-href="your-video-post-URL" data-allowfullscreen="true" data-width="500"></div>
| Setting | Description | Default |
| data-href | The absolute URL of the video. | n/a |
| data-allowfullscreen | Allow the video to be played in fullscreen mode. Can be false or true. | false |
| data-autoplay | Automatically start playing the video when the page loads. The video will be played without sound (muted). People can turn on sound via the video player controls. This setting does not apply to mobile devices. Can be false or true. | false |
| data-width | The width of the video container. Min. 220px. | auto |
3. Upload your web page and test the given code
<html>
<title>My Website</title>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<h1>My Video Player</h1>
<div class="fb-video"
data-href="https://www.facebook.com/OfficialFunniestCrazyVideo/videos/vb.174446452713479/354821324675990"
data-width="500"
data-allowfullscreen="true"></div>
</body>
</html>
I hope now you will be able to upload your Facebook video on your web pages.
Check the Result page Click Here
Read: How to Add Facebook Comment Box to HTML Website
Read: Add Facebook Like and Share Button Code For Website
Pingback: How To Create a Facebook Page For Business Website