Embedded Facebook Posts Not Responsive - iPhone Problems
by Jo Shaer, on March 18, 2014
What's that sticking out? My lovely designer was looking at a post I had put onto our blog.
He was viewing it on his iPhone and, about half way down, there was a piece of content that was not aligned with the rest of the blog post.
It was a post from Facebook which I had embedded into my blog.
How do you embed Facebook posts? Find out here
It looked fine on my PC but not on his iPhone.
Embedded Facebook posts not responsive on iPhone
You can play around with the width setting within the generated code so that the embedded post has a minimum fixed width of 350px, but the problem is that it then does not fill the whole width of the enclosing website column on larger-screen desktop computers - leaving a wasteful and unsightly gap to the side.
On most modern mobiles, which usually have minimum browser widths of around 400-480px, things work in a more elegant and responsive manner. The embedded post overrides the width set above, and instead automatically resizes itself to fill its container with a small amount of margin either side. Everything's looking pretty again!
The exception is the usual problem child - the iPhone. On that, it does not automatically resize to a small enough width. It sticks out over the edge and looks ugly. Still readable, but ugly. The iPhone has a maximum browser / screen width of 320px, so after allowing for typical amounts of page margin or column padding, this often leaves less than 300 pixels to fit web site content within. Obviously, the embedded post's 350px minimum just isn't going to fit.
And it was the same on the mini iPad. The post slid under the sidebar and ruined the look of our sleek new site.
This is exactly the same situation he had come across when embedding the Facebook like widget in the side bar. It's a common complaint on the web, with no real way to fix it until Facebook get their act together.
[Tweet "Facebook Embedded Posts are not responsive"]
Here's what Facebook say about it in their official documentation :
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.
And here's a page with someone else moaning about making the embed feature responsive.
There is some code listed in here which allows you to add a scroll bar to wide content so you can slide across the width of the image but it didn't seem to help much on the iPhone.
LinkedIn embedding issues
Having said that, Facebook is not the only culprit! When we tried to add the LinkedIn Follow widget to our website sidebar to encourage people to follow Lollipop Local's Company page, we came across similar issues. In the end we had to forego the nice feature which showed the faces of our LinkedIn followers because it just would not resize nicely for mobiles. We are stuck with a very bland and tiny LinkedIn logo and the word Following with a number. We even had to put a call to action into the widget title so people would know what it was.
Google Plus Embedded Posts
And what about Google Plus who also offer an embedded post feature?
Well, there is no way of altering the code to change the width of these - they are a standard 440px wide. Not a problem for the larger mobile smart phones as they naturally resize this content to fit their screens. However, on the mini iPad, it behaved as it would on a PC and stayed within the confines of the website.
Switch to the iPhone and it's a whole different story. Google+ embedded posts look even worse than their Facebook cousins because they start off being wider.
What about Twitter embedded posts?
Twitter seems to have got its act together. It's embedded posts are totally responsive down to really quite small screen sizes. It look great on both iPhone and mini iPad.
It's pathetic that in this day and age Facebook and Google can't give you proper mobile-friendly responsive code to embed their posts on 3rd party web sites.
It might be possible to use a plugin or write a Facebook app to do this, but I've not seen those mentioned anywhere yet.
In the meantime you're stuck with code that looks a bit pants on iPhones I'm afraid :(
Welcome To Facebook!