Twitter  How Mashable went from being a tech blog to putting a former New York Times editor in charge of its news desk nie.mn/1nxFQLN  
Nieman Journalism Lab
Pushing to the future of journalism — A project of the Nieman Foundation at Harvard

No more need for hacky workarounds or third-party solutions to put an Instagram photo or video on your website, we’re told:

Now, when you visit an Instagram photo or video page on your desktop web browser, you’ll see a new share button on the right side of your photo (just under the comments button). Click the button to see the embed code. Copy the block of text it gives you and paste it into your blog, website or article. When you hit publish, the photo or video will appear.

There’s one way, though, in which it’s not particularly publisher friendly. Unlike, say, a YouTube embed, there’s no option on the embed code to set the width of your content well — it just defaults to 612 pixels wide. (Instagram’s web interface uses that size.)

But 612 pixels is too wide for lots of publishers’ sites. For instance, the well on this Nieman Lab post is 570 pixels, so this pic from New Orleans Saints free safety Malcolm Jenkins extends into the right sidebar by 42 pixels:

Not a great crime, but annoying. (Would be more than annoying if we had, say, a 400-pixel well.)

Compare that to, say, a Twitter embed, which will automatically constrict its size (and reflow its content) at smaller widths — as in the second tweet embed below, which I’ve artificially confined to a 300-pixel box:

You can work around this by manually changing the width attribute on an Instagram embed’s iframe. That works okay at larger widths — here’s 570px, 400px, and 312px:

But you’ll end up with awkward whitespace underneath the embed unless you also manually change the iframe’s height, which I’ve done here. The formula is height = width + 98px. So a 400px wide embed should be 498px tall.

But trial and error indicates that sort of manipulation still only works down to 312px in width. Below that, the iframe warps and won’t maintain the famous square aspect ratio of an Instagram photo. Here’s 200px × 298px:

So I guess we’ll still need hacky solutions after all. (If you’re desperate, you can always just use the actual raw photo, although Instagram would probably rather you not.)

In the meantime, just add easy Creative Commons licensing options to photos, Instagram, and all will be forgiven.

UPDATE: Friend-of-the-Lab Jeff Hobbs reminds me of the biggest problem with Instagram’s embeds: They won’t cooperate with responsive layouts. If you’re using media queries to fit a site into (say) the iPhone’s 320px width, a 612px Instagram embed will screw up your layout. (The same is true for YouTube embeds, but you can get around that by using FitVids.js or something similar.)

But he has a solution! Create a custom Instagram embed at his site Embed Responsively. (Here’s an example of what it produces; narrow your browser width to see the responsiveness in action.) Jeff’s site will also make responsive-friendly custom embeds for YouTube, Vimeo, Google Maps, and more — check it out.

— Joshua Benton
                                   
What to read next
Mashable_GrumpyCat-cc
Joseph Lichterman    July 22, 2014
The site known for social media and tech coverage has hired nearly 30 more editorial staffers since October and, like BuzzFeed before it, is expanding into more general interest news.
  • http://twitter.com/andrewphelps Andrew Phelps

    Yo dawg I heard you like pixels

  • http://www.niemanlab.org/ Joshua Benton
  • aquaken

    Any suggestions for how to embed photos full Instagram size on Facebook?

  • http://www.niemanlab.org/ Joshua Benton

    I don’t think any of these embed codes (iframes) would work on Facebook. Probably best pasting in the Instagram URL and letting FB do the work.

  • http://twitter.com/andrewphelps Andrew Phelps

    lolol

    (Sorry don’t check Disqus comments very often)

  • Hernán Restrepo

    But what if you replace the with value with “100%”? It should automatically adapt to any frame size… #HackySolutions

  • http://www.niemanlab.org/ Joshua Benton

    But that leaves the height — you’ll either have random excess whitespace on bottom or cut off a piece of the embed. You can’t do width=100% and height=auto with iframes the way you can with images because images have a native aspect ratio and iframes don’t.

  • http://www.shootitlive.com Martin Levy

    We’re one of those 3rd party tools focusing on publishers that want to crowdsource photos and videos from Instagram.

    I just want to say that i totally love the http://embedresponsively.com/ site with Instagrams. It looks very beautiful and behaves awesome.

    (shameless plug)
    At shootitlive we’re solving another demand for publishers, where they want to source alot of Instagrams and quickly publish them on their site (as they appear on Instagram) and they need to be able to choose what to publish.

    If you like to try it out, it’s free to use (and ad-free) http://shootitlive.com/instagram-for-publishers/

  • Scott M

    except your Instagram embed leaves a whole load of whitespace at the bottom of the pic, even on your website. So good but not great.

  • shootitlive

    Hey Scott, see here how the instagrams fill out every pixel w/o whitespace http://shared.shootitlive.com/instagram.html