Embed Facebook Post or Video In Website
1.
Find the Facebook post you'd like to embed.
Similar
to the steps to embed a tweet (listed above), embedding a Facebook post onto
your blog or website starts on Facebook. Navigate to the post you want to embed
from Facebook, on the Facebook user's profile page or your newsfeed. For this
example, we'll embed a Facebook post from the Recruitment Circular, as shown in the screenshots below.
2.
Click the ellipsis ("...") icon on the top-right of the post.
On
the top-right of the Facebook post you want to embed, you'll see three small
dots. Click this icon, as shown below.
3.
Click "Embed."
Clicking
the icon shown below will reveal a dropdown menu of options, including one
labeled "Embed." If the post you want to embed is a video, a similar
option labeled "</> Embed" will appear further down on this
menu. Click either option.
If
you don't see an option to embed the post, then the post is not public and is
not embeddable.
Step 1: Include the JavaScript
SDK on your page once, ideally right after the opening body tag.
<div id="fb-root"></div><script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v13.0" nonce="Zfx7Paod"></script> {codeBox}
Step 2: Place this code wherever you want the plugin to appear
on your page.
<div class="fb-post" data-href="https://www.facebook.com/106816677865187/posts/404883878058464" data-width="500" data-show-text="true"><blockquote cite="https://www.facebook.com/RecruitmentCircular/posts/404883878058464" class="fb-xfbml-parse-ignore"><p>Introduction: E-Business Here We Make PowerPoint Presentation Read Here: https://learningmaterils.blogspot.com/2022/02/introduction-e-business.html</p>Posted by <a href="https://www.facebook.com/RecruitmentCircular/">Recruitment Circular - নিয়োগ বিজ্ঞপ্তি</a> on <a href="https://www.facebook.com/RecruitmentCircular/posts/404883878058464">Friday, 11 February 2022</a></blockquote></div> {codeBox}
4.
Copy the code that appears and paste it into your website's HTML editor.
Clicking
the "Embed" option shown above will open the box shown below. At the
top of this box, just above the "Hide Preview" and "Advanced
Settings" buttons, you'll see a line of coded text. Highlight and copy
this code onto your computer's clipboard.
With
this embed code copied to your clipboard, return to the website where you want
to embed this Facebook post. Open the source code of this website (some content
management systems have a "</>" icon where you can access this
source code). Here, you'll paste the Facebook post's embed code into your HTML
precisely where you want the post to appear.
5.
Add <center> and </center> tags around the entire HTML snippet to
center-align your post.
Once
you pasted this code into your HTML, however, you'll want to center-align the
post so it doesn't automatically appear pushed up against the left or right
side of your webpage. To correct this, wrap the code with '<center>' and
'</center>' tags so the Facebook post displays in the center of your
article or webpage.
Here's
what the final code should look like:
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2F106816677865187%2Fposts%2F404883878058464&width=500&show_text=true&height=532&appId" width="500" height="532" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe> {codeBox}
Conclusion: what it'll look like when you're done:
Embed Facebook Post or Video In Website
1. Find the Facebook post you'd like to embed.
Similar to the steps to embed a tweet (listed above), embedding a Facebook post onto your blog or website starts on Facebook. Navigate to the post you want to embed from Facebook, on the Facebook user's profile page or your newsfeed. For this example, we'll embed a Facebook post from the Recruitment Circular, as shown in the screenshots below.
2. Click the ellipsis ("...") icon on the top-right of the post.
On the top-right of the Facebook post you want to embed, you'll see three small dots. Click this icon, as shown below.
3. Click "Embed."
Clicking the icon shown below will reveal a dropdown menu of options, including one labeled "Embed." If the post you want to embed is a video, a similar option labeled "</> Embed" will appear further down on this menu. Click either option.
If you don't see an option to embed the post, then the post is not public and is not embeddable.
Step 1: Include the JavaScript SDK on your page once, ideally right after the opening
body tag.<div id="fb-root"></div><script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v13.0" nonce="Zfx7Paod"></script> {codeBox}
<div class="fb-post" data-href="https://www.facebook.com/106816677865187/posts/404883878058464" data-width="500" data-show-text="true"><blockquote cite="https://www.facebook.com/RecruitmentCircular/posts/404883878058464" class="fb-xfbml-parse-ignore"><p>Introduction: E-Business Here We Make PowerPoint Presentation Read Here: https://learningmaterils.blogspot.com/2022/02/introduction-e-business.html</p>Posted by <a href="https://www.facebook.com/RecruitmentCircular/">Recruitment Circular - নিয়োগ বিজ্ঞপ্তি</a> on <a href="https://www.facebook.com/RecruitmentCircular/posts/404883878058464">Friday, 11 February 2022</a></blockquote></div> {codeBox}
Clicking the "Embed" option shown above will open the box shown below. At the top of this box, just above the "Hide Preview" and "Advanced Settings" buttons, you'll see a line of coded text. Highlight and copy this code onto your computer's clipboard.
With this embed code copied to your clipboard, return to the website where you want to embed this Facebook post. Open the source code of this website (some content management systems have a "</>" icon where you can access this source code). Here, you'll paste the Facebook post's embed code into your HTML precisely where you want the post to appear.
5. Add <center> and </center> tags around the entire HTML snippet to center-align your post.
Once you pasted this code into your HTML, however, you'll want to center-align the post so it doesn't automatically appear pushed up against the left or right side of your webpage. To correct this, wrap the code with '<center>' and '</center>' tags so the Facebook post displays in the center of your article or webpage.
Here's what the final code should look like:
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2F106816677865187%2Fposts%2F404883878058464&width=500&show_text=true&height=532&appId" width="500" height="532" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe> {codeBox}
Conclusion: what it'll look like when you're done:
Tags:
Technology