• Fellowships
  • Reports
  • Lab
  • Storyboard
    • Nieman Foundation at Harvard
    HOME
    About
    Subscribe
    Archives
              
    Foundation
    Reports
    Storyboard
    LATEST STORY
    Two-thirds of news influencers are men — and most have never worked for a news organization
    Business Models Mobile & Apps Audience & Social Aggregation & Discovery Reporting & Production
    ABOUT                    SUBSCRIBE
    July 10, 2013, 3:16 p.m.
    Instagram embeds are here, but not quite perfect for publishers
    LINK: blog.instagram.com  ➚   |   Posted by: Joshua Benton   |   July 10, 2013

    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.

    Show tags
     
    What’s the best way to follow how the news is changing?
    Our daily email, with all the freshest future-of-journalism news.
    Prefer a once-a-week email? »
    The latest from Nieman Lab
    Two-thirds of news influencers are men — and most have never worked for a news organization
    Sarah Scire
    The Onion adds a new layer, buying Alex Jones’ Infowars and turning it into a parody of itself
    Joshua Benton
    The Guardian won’t post on X anymore — but isn’t deleting its accounts there, at least for now
    Laura Hazard Owen
    What should journalists do when the facts don’t matter?
    Michael J. Socolow
    I’m a journalist and I’m changing the way I read news. This is how.
    Laura Hazard Owen
    Join the 60,000 who get the freshest future-of-journalism news in our daily email.
    Two-thirds of news influencers are men — and most have never worked for a news organization
    A new Pew Research Center report also found nearly 40% of U.S. adults under 30 regularly get news from news influencers.
    The Onion adds a new layer, buying Alex Jones’ Infowars and turning it into a parody of itself
    One variety of “fake news” is taking possession of a far more insidious one.
    The Guardian won’t post on X anymore — but isn’t deleting its accounts there, at least for now
    Guardian reporters may still use X for newsgathering, the company said.
    Help advance the Nieman Foundation’s mission “to promote and elevate the standards of journalism” by making a donation.

    To promote and elevate the standards of journalism

    Covering thought leadership in journalism

    Pushing to the future of journalism

    Exploring the art and craft of story
    © 2024 by the President and Fellows of Harvard College  /  Some rights reserved
    Harvard Trademark Privacy Digital Accessibility
    Walter Lippmann House    One Francis Ave.    Cambridge, MA 02138    617 495 2237