{"id":24648,"date":"2020-09-21T22:48:12","date_gmt":"2020-09-21T17:03:12","guid":{"rendered":"https:\/\/hashthemes.com\/?p=24648"},"modified":"2021-10-28T16:34:00","modified_gmt":"2021-10-28T10:49:00","slug":"how-to-embed-facebook-video-in-wordpress-website","status":"publish","type":"post","link":"https:\/\/hashthemes.com\/how-to-embed-facebook-video-in-wordpress-website\/","title":{"rendered":"How to Embed Facebook Video in WordPress Website?"},"content":{"rendered":"\n<p>Are you looking to embed Facebook video in WordPress website? Facebook videos have certainly been very popular attention grabbers on the news feed. So, embedding them on your website can boost user engagement as well as keep your visitors for a longer period of time.<\/p>\n\n\n\n<p>In this article, we will discuss different ways to embed the Facebook video on the WordPress website. There are mainly 4 different ways. They are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Directly Inserting Video via Gutenberg Block<\/li><li>Embedding Video Using iFrames<\/li><li>Embedding Video from Facebook Video Embed API<\/li><\/ul>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_73 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/hashthemes.com\/how-to-embed-facebook-video-in-wordpress-website\/#Directly-Inserting-the-Video-via-Gutenberg-Block\" title=\"Directly Inserting the Video via Gutenberg Block\">Directly Inserting the Video via Gutenberg Block<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/hashthemes.com\/how-to-embed-facebook-video-in-wordpress-website\/#Embedding-Video-Using-iFrame-Code\" title=\"Embedding Video Using iFrame Code\">Embedding Video Using iFrame Code<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/hashthemes.com\/how-to-embed-facebook-video-in-wordpress-website\/#Embedding-Video-from-Facebook-Video-Embed-API\" title=\"Embedding Video from Facebook Video Embed API\">Embedding Video from Facebook Video Embed API<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Directly-Inserting-the-Video-via-Gutenberg-Block\"><\/span>Directly Inserting the Video via Gutenberg Block<strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>This is the easiest way to embed a Facebook video on your website as you can directly place the video on the visual editor while creating\/editing posts.<\/p>\n\n\n\n<p>For this, just copy the URL of a Facebook video.&nbsp;<\/p>\n\n\n\n<p>Now paste the URL that you had copied.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"590\" height=\"260\" src=\"https:\/\/hashthemes.com\/wp-content\/uploads\/2020\/08\/paste-facebook-link.png\" alt=\"Embed Facebook Video in WordPress\" class=\"wp-image-24653\"\/><\/figure>\n\n\n\n<p>After that, preview your video on the frontend. If everything is fine, click on <strong>Publish\/Update<\/strong> to save changes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Embedding-Video-Using-iFrame-Code\"><\/span>Embedding Video Using iFrame Code<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Facebook also provides you the option to embed video using the iFrame code.&nbsp;<\/p>\n\n\n\n<p>To receive the iFrame code, click on the more options button after selecting the video.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"720\" height=\"247\" src=\"https:\/\/hashthemes.com\/wp-content\/uploads\/2020\/08\/embed-facebook-video-iframe-code.png\" alt=\"\" class=\"wp-image-24652\"\/><\/figure>\n\n\n\n<p>Then, click on the <strong>Embed<\/strong> option. You will be directed to the Facebook developer page.&nbsp;<\/p>\n\n\n\n<p>From there, go to the iFrame tab and copy the code.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"603\" height=\"230\" src=\"https:\/\/hashthemes.com\/wp-content\/uploads\/2020\/08\/add-iframe-code-in-html-block.png\" alt=\"Embed Facebook Video in WordPress\" class=\"wp-image-24649\"\/><\/figure>\n\n\n\n<p>Then, go to the post editor and add a <strong>custom HTML block<\/strong>. Now, paste the copied code and click on the <strong>Publish\/Update<\/strong> button and check out the frontend preview of your post.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Embedding-Video-from-Facebook-Video-Embed-API\"><\/span>Embedding Video from Facebook Video Embed API<strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>An extremely useful feature for Facebook is that it has its own API to embed video players. This will allow you to easily insert the videos on various locations of your website. It means you can place your Facebook video outside posts including sidebars, widgets, and widgets as well.<\/p>\n\n\n\n<p>Firstly go to the Facebook Developer website and paste the video that you want to embed on your website.<\/p>\n\n\n\n<p>Now click on the \u201c<strong>Get code<\/strong>\u201d button.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"475\" src=\"https:\/\/hashthemes.com\/wp-content\/uploads\/2020\/08\/add-javascript-sdk.png\" alt=\"\" class=\"wp-image-24650\"\/><\/figure>\n\n\n\n<p>Then, copy the code below step 1, and paste it on the header.php of your WordPress theme.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1180\" height=\"620\" src=\"https:\/\/hashthemes.com\/wp-content\/uploads\/2020\/08\/add-code-in-theme-header.png\" alt=\"Embed Facebook Video in WordPress\" class=\"wp-image-24654\"\/><\/figure>\n\n\n\n<p>This method will embed the Facebook Video in your WordPress website. However, it is not good to directly edit the code of your website.<\/p>\n\n\n\n<p>So, we recommend you create a child theme or install <a href=\"https:\/\/wordpress.org\/plugins\/insert-headers-and-footers\/\" target=\"_blank\" rel=\"noreferrer noopener\">Insert Headers and Footers plugin<\/a> on your WordPress website.<\/p>\n\n\n\n<p>Now paste the code on the header stripe. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"870\" height=\"320\" src=\"https:\/\/hashthemes.com\/wp-content\/uploads\/2020\/08\/insert-header-and-footer-plugin.png\" alt=\"\" class=\"wp-image-24806\"\/><\/figure>\n\n\n\n<p>Then, copy the code below step 2 and paste it on any location where you want to embed the Facebook video.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/hashthemes.com\/wp-content\/uploads\/2020\/08\/embed-facebookapi.png\" alt=\"\" class=\"wp-image-24651\" width=\"580\" height=\"300\"\/><\/figure>\n\n\n\n<p>Once done, click on <strong>Publish\/Update<\/strong> button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion:<\/h3>\n\n\n\n<p>This way, you can embed Facebook Video in WordPress website. It will help you to improve the engagement rate of your WordPress website.<\/p>\n\n\n\n<p>If you are looking to embed TikTok video on your WordPress website, you can check out the article: <a href=\"https:\/\/hashthemes.com\/embed-tiktok-video-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Embed TikTok Video in WordPress Website?<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you looking to embed Facebook video in WordPress website? Facebook videos have certainly been very popular attention grabbers on the news feed. So, embedding them on your website can boost user engagement as well as keep your visitors for a longer period of time. In this article, we will discuss different ways to embed [&hellip;]<\/p>\n","protected":false},"author":772,"featured_media":25550,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[36,9],"tags":[],"class_list":["post-24648","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-beginners-guide","category-tips-and-tutorials"],"_links":{"self":[{"href":"https:\/\/hashthemes.com\/wp-json\/wp\/v2\/posts\/24648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hashthemes.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hashthemes.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hashthemes.com\/wp-json\/wp\/v2\/users\/772"}],"replies":[{"embeddable":true,"href":"https:\/\/hashthemes.com\/wp-json\/wp\/v2\/comments?post=24648"}],"version-history":[{"count":0,"href":"https:\/\/hashthemes.com\/wp-json\/wp\/v2\/posts\/24648\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hashthemes.com\/wp-json\/wp\/v2\/media\/25550"}],"wp:attachment":[{"href":"https:\/\/hashthemes.com\/wp-json\/wp\/v2\/media?parent=24648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hashthemes.com\/wp-json\/wp\/v2\/categories?post=24648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hashthemes.com\/wp-json\/wp\/v2\/tags?post=24648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}