How to Embed Instagram Photos Into WordPress or Drupal Responsively

Yes, Instagram now lets you embed Instagram photos right into your blog, but as Joshua Benton noted over at Nieman Labs, these embeds don’t play nicely with responsive designs.

Luckily, as Benton points out, there’s an easy workaround, thanks to Jeff Hobbs and his site Embed Responsibly.

Here’s two versions of the same photo from the TSA’s Instagram account, which features pictures of weapons that people tried to bring on board airplanes.

Here’s the responsive version:

If you are on machine with a largish display, try resizing your browser window to see what happens with the display.

Notice with the Instagram version you get inches of white space on smaller screens, which is going to be jarring on mobile devices.

But the responsive Instagram embed keeps everything very tight on small screens. The tradeoff is that you can get some more white space under the embed on wider displays when using the responsive version – but it’s not too bad and you can trim it down if you look for errant “&nbsp” tags in your HTML editor.

While trying out these responsive embeds, you might have also noticed that Contextly has a responsive content recommendation widget that looks good on wide screens and mobile devices.

If you are looking to build your readership and look good doing it, you can install our WordPress related links plugin directly, get our Drupal module, or just ask us for more info.

Comments are closed.