How to Make The New Facebook Post Embed Feature Responsive

How to make the new facebook post embed feature responsive?

If you mean "responsive" as in "responsive design", you can't. Facebook uses a cross-domain iframe for JS/CSS isolation and session security, and it generates the iframe dimensions dynamically based on contents using privileged cross-domain communication, so you can't just play around with CSS to get things how you want them. See this section on official page for the social plugin:

Can I customize how the post is displayed on my web page?

Currently, you cannot customize how Embedded Posts are displayed on your page. The size of the post is fixed to the same dimensions as it's shown on Facebook.

If you mean that the plugin is not displaying properly, you should follow the instructions with the Get Code button on the official page for the social plugin.

Details:

Your markup is missing an app ID. Where did you find this markup? You need to specify an app ID. If you load the JS SDK manually, that means adding it to the parameters of FB.init as seen here. In your case, you are using the shortened URL-based init, where the SDK URL has parameters in its fragment: #xfbml=1 in your example. You will need to change it so it is more like #xfbml=1&appId=1234567890.

Update: You should use the console in your browser's built-in developer tools (or Firebug, etc.) to see info about errors with the JS SDK. When I tried your code on an https:// site, I got this error:

[blocked] The page at https:// ran insecure content from http://connect.facebook.net/en_US/all.js.

so I changed the URL from http://connect.facebook.net/... to a protocol-relative URL: //connect.facebook.net/...

Another option would have been to just try on an http:// site only. At that point, I got the following errors:

Invalid App Id: Must be a number or numeric string representing the application id.
FB.getLoginStatus() called before calling FB.init().

This confirms my suspicion -- you need an app ID. I added an app ID and it works.

Embedding facebook post on responsive website

you have to style the container of iframe try this :

.post-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}

you also need to style iframe like :

position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;

you can customize padding for your post.

Responsive facebook embed video

Now Facebook supports responsive video embed

<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
<div class="fb-video"
    data-href="https://www.facebook.com/watch/?v=10155278547321729"
    data-width="auto"
    data-show-captions="false">
</div>

Responsive width Facebook Page Plugin

Facebook's new "Page Plugin" width ranges from 180px to 500px as per the documentation.

• If configured below 180px it would enforce a minimum width of 180px
• If configured above 500px it would enforce a maximum width of 500px

With Adaptive Width checked, ex:

Unlike like-box, this plugin enforces its limits by sticking to the boundary values if mis-configured.

For small screens / Responsive behaviors

• When rendering on smaller screens, enforce desiered width on the plugin container and plugin would try to fit in.

• The plugin renders at a smaller width (to fit in smaller screens) automatically, if the container is of slimmer than the configured width.

• You can scale down the container on mobile and the plugin will fit in as long as it gets the minimum of 180px to fit in.

Without Adaptive Width

• The plugin will render at the width specified, irrespective of the container width

---

Related Topics