PHPMatters Help You Better Hosting Your PHP-based Sites
How to Create Facebook Embedded Posts for Your Website or Pages

How to Create Facebook Embedded Posts for Your Website or Pages

Integrating an embedded post from some social platforms with your posts can enrich your content greatly. Particularly, if the post is published from your own social account, this practice can also help you increase your social followers with ease. Previously, we have introduced how to embed tweets to your blog site, and this time is for Facebook.

Honestly speaking, as this social network has become an integral part for many people around the world, the Facebook embedded posts have been widely used for webmasters. Some of them attach the hot posts from Facebook to give readers more interesting information with the better reading, and others simply embed their own Facebook posts to build up a perfect network between their sites and Facebook. No matter what your purpose is, this tutorial can help you do this with ease.

Get the Coding Stuff

To create a Facebook embedded post, you firstly need to login to this Facebook plugin page using your account. After logging in, you can find the Embedded Posts option in the left column of this page. Simply click it.

In the new webpage, you are allowed to get the code of the special post by entering the post URL and deciding the width of the post. The post URL needed to be 100% accurate; otherwise you may get a wrong code and embed a wrong post to your website. In terms of the width, you can enter the exact pixel between 350 and 750. Note that you need to do this based on your webpage design, meaning that you can set the width for no more than 700 if the width of your webpage is 700.

In terms of the post height, there is no need to worry about it. If this post is too long, it can be cut automatically with a “See More” option.

create Facebook embedded post

After entering these two parts, you can preview your post in the real time. From it, you can figure out whether the post is the exact one that you want to embed and whether it is too large or not. Note that the post can provide the information of original publisher, posting date, a brief summary, and the counts for like, comment, and sharing.

Now, you can click the Get Code button below the preview section. Note that you can only choose the coding stuff of HTML 5 and XFBML, for the embed post does not support the IFRAME and URL for attaching.

Here, we high recommend the HTML code, for you only need to add the JavaScript SDK to your webpage after the opening “body” tag. Then, you can paste the related coding at anywhere you want it to be displayed on your post.

Surely, you can choose to add the XFBML code, but this option requires two preparations – include the JavaScript SDK and include an XML namespace. Note that all the lines of code needed are already showed by Facebook. You only need to copy and paste them into the right places.

plugin code

Create Embedded Post from Facebook

In the case that you have found an interesting post from Facebook and you want to share it in your blog post, there is need for you to go to the Facebook plugin page. Instead, you can get the embedded coding stuff from the post directly. Simply click the icon from the top-right corner, and find the Embed Post option in the dropdown menu.

embed from Facebook

Now, you can get the required coding stuff and simply paste it into your webpage. Note that you can decide the post width directly from this pop-up window.

embed post