Description: Simple and Advanced way to Embed your Facebook Videos, Photos and Status Updates to Blogger/Blogs.
Facebook is now allowing you to embed public videos, photos and status updates onto your blogs. You can embed the Facebook posts onto any blogs where you can write in HTML source, so obvious you can use it on Blogger and WordPress. We have already talked about to embed Twitter tweets onto your Blogs. We often use Facebook to connect with our valuable friends, and we found many interesting videos, photos and status updates shared by our friends which we want to share on our blogs. Facebook now offers you the official embed code to show off Facebook status updates on your blogs. In this post, we will also tell you the advantages to embed the Facebook posts, what types of post can be embed and who can embed your post in the following ways. Therefore, here is how to embed Facebook videos, photos and status updates.
Related Posts:
If you have embed the code associated with your Facebook profile, the readers can directly follow you from your blog (if you have allowed followers).
P.S: If the readers want to comment or click on a hashtag on your embedded post, once they click on the comment or hashtag, they will be redirect to the original post.
 |
| Embed Facebook Posts on Blogger |
Which Facebook posts & Who can shared it?
The posts you have shared publicly can be seen by everyone, even outside from Facebook. Most of your public posts can be embed by anyone to any blog. You would not get notification if someone embeds your public post to any website. If you don't wish to allow embed code for one of your status update, simply do not share it publicly.Related Posts:
- Browse Facebook using only Keyboard
- How to Change Blogger Static Page URL
- Embed the Official Google+ widget to Blogger
Advantage to use Embedded Facebook Posts on your Blogs
Let you have a Facebook page associated with your blog, and you have shared any interesting thing with your fans. Now, you want to share it with your blog readers then simply you can show this Facebook post of your page onto your website by the given embed code. Once you embed the code to your website, it will show up with a like button of your Facebook page that will lead to adding fans for page, and also the readers can like and share the post directly from your blog.If you have embed the code associated with your Facebook profile, the readers can directly follow you from your blog (if you have allowed followers).
P.S: If the readers want to comment or click on a hashtag on your embedded post, once they click on the comment or hashtag, they will be redirect to the original post.
Embed Facebook Photos, Videos & Status Updates on Blogs
- Go to Facebook newsfeed or timeline, select the post you want to embed. Click on
icon in the top right side and select Embed Post.
- Once you clicked, in a windows popup you can select the proper width and copy the code.
*You can also get the embed code from the theater view of any videos or photos. If you are in the theater view, click on Embed Post under Options. - Now paste this code to your blog. The Facebook post will show up in your blog. If your blog is hosted on Blogger, paste the code to your new post or any existing post by going to post editor >> click on HTML, paste the code.
You can also show up the embed code into your sidebar,
Go to Blogger Dashboard --> Layout(Under more options) --> Add a Gadget(choose from sidebars) --> HTML/JavaScript (Choose under pop up window) and paste your code and click on Save. (Make sure, if you are embed the code to sidebar, match the width of sidebar with the Facebook post, see in step 2)
Embedded Facebook Posts for Advance Users
Let see an example, the Facebook embed code for one of my status update is,<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/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-post" data-href="https://www.facebook.com/shadab.mohammad/posts/10202215683705979" data-width="466"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/shadab.mohammad/posts/10202215683705979">Post</a> by <a href="https://www.facebook.com/shadab.mohammad">Mohammad Shadab</a>.</div></div>
Facebook has divided the embed code into three parts. JavaScript, HTML5 and simple clickbale link (In case, HTML does not show correctly)It may be happen that you have already installed the JavaScript before. To confirm it, go to your template HTML code, search with some peace of code mention above (mostly this code is placed below the <body tag). If you do not find any code, then you need to add the JavaScript code once in your HTML template. After that, you don't need to add JavaScript each times you paste any code of Facebook embed code, like button or Facebook comments.
Now, go to your HTML template editor, search with "<body" without quote, and just below <body> tag paste the following code,
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{your-app-id}',
xfbml : true,
version : 'v2.0'
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Now,change {your-app-id} with your Facebook page app ID. You can get your app ID by going to Facebook Developers page. That is it!Now, you have installed the JavaScript. You can now only choose the HTML5 part of the Facebook embed code. i.e.,
<div class="fb-post" data-href="https://www.facebook.com/shadab.mohammad/posts/10202215683705979" data-width="466"></div>You can also use XFBML code instead of HTML5. i.e.,
<fb:post href="https://www.facebook.com/shadab.mohammad/posts/10202215683705979" width="468px"></fb:post>Just you have to change the URL of your posts. You can get the URL of any posts by clicking on the date or time around the share visibility option.
