Embedded Posts are a simple way to put public posts - by a Page or a person on Facebook - into the content of your web site or web page. Only public posts from Facebook Pages and profiles can be embedded.
Setting | Description | Default |
---|---|---|
| The absolute URL of the post. |
|
|
|
|
| The width of the post. Min. | fluid width |
| Applied to photo post. Set to |
|
You can get the embed code directly from the post itself. If the post is public, click on the icon that appears in the top right corner of the post on Facebook.
Choose Embed Post
from the drop down menu:
For photo posts select the Embed Post
button on the bottom right:
You will see a dialog appear with the code to embed your post in it. Copy and paste this code into your web page in the place where you want it to appear.
For technical details please refer to the section Add Code Manually
Besides the Code Generator, you can also embed the code manually.
First you need to get the URL of a post you wish to share. The post must be public, which is indicated by the gray world icon, right next the post's publishing time:
For testing you can use this example URL:
"https://www.facebook.com/20531316728/posts/10154009990506729/"
To use the Embedded Posts Plugin, or any other Social Plugin, you need to add the Facebook JavaScript SDK to your website. You need to load the SDK only once on a page, ideally right after the opening <body>
tag:
<div id="fb-root"></div> <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
You can find more help on implementing the JavaScript SDK in the JavaScript SDK - Quickstart.
Next place the Embedded Post tag at any place of your website. Replace {your-post-url}
with your posts' URL.
<div class="fb-post" data-href="{your-post-url}"></div>
Once you completed these steps you're able to test your Embedded Post. A completed integration will look like something like this:
<html> <title>My Website</title> <body> <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script> <div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div> </body> </html>
The result of our test example is shown in the screenshot below.
Follow the instructions further down this page to adjust size, language and other settings.
There may be scenarios in which your embed code is created by a CMS and you just need the raw post URL. There are two ways to get a post's URL:
Both methods are highlighted in red in the screenshot below.
If you wish to automatically integrate embedded posts into your website, you probably use the Graph API to aggregate posts. For example you may use the Page Feed API endpoint and the fields
parameter permalink_url
.
The response to your request to /{page-id}/feed?fields=permalink_url
will send you a response like this:
{ "data": [ { "id": "1234567890_3456789012", "permalink_url": "https://www.facebook.com/1234567890/posts/3456789012" } ] }
You can adjust the width of Embedded Posts on desktop via the data-width
attribute in the Embed Post tag as shown in the example below. Chose a value between 350
and 750
pixels.
Do not use CSS style tags to adjust the size of a plugin. It may result into display errors.
<!-- WRONG! --> <style type="text/css"> .fb-post { width: 500px; } </style> <div class="fb-post" data-href="{your-post-url}"> </div> <!-- CORRECT --> <div class="fb-post" data-width="500" data-href="{your-post-url}"> </div>
On mobile web, Embedded Posts automatically scale to the width of the container.
If you are already using the Facebook SDK for JavaScript in your WordPress site you can use the Embedded Posts plugin by simply adding the fb-post
tag to your WordPress post:
<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>
If you are not using the Facebook SDK for JavaScript and embed a Post via the copy&paste snippet, which you can get from each Facebook post, the Embedded Posts plugin will most likely not render as WordPress will convert all &
chars to #038;
and break the plugin.
Instead use the following code to add the plugin:
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v21.0
'
});
};
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
<div
class="fb-post"
data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
data-width="500"></div>
A new, easy WordPress integration will be released in the near future.
If you are using the HTML5 or XFBML versions, you should include the language code when you instantiate the library.
When you load the SDK, change the value of js.src
to use your locale. Replace en_US
with your locale, e.g., fr_FR
for French (France):
// Example 1: 'https://connect.facebook.net/fr_FR/sdk.js'; // Example 2: js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.6";
Supported locales are referenced in the Facebook Locales XML file.
You may need to adjust the width of a Social Plugin to accommodate different languages. Find more information on our Localization & Translation page.
The embedded post will show any media attached to it, as well as the number of likes, shares, and comments that the post has. Embedding posts will let people using your web site see the same rich information that is shown on Facebook.com, and they will enable people to follow or like content authors or Pages directly from the embed.
The following message will display in place of the embedded post: