Nieman Foundation at Harvard
HOME
          
LATEST STORY
Spain’s Eldiario.es has 18,000 paying members, and its eye on the next several million
ABOUT                    SUBSCRIBE
July 10, 2013, 3:16 p.m.
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 Show comments / Leave a comment
 
Join the 15,000 who get the freshest future-of-journalism news in our daily email.
Spain’s Eldiario.es has 18,000 paying members, and its eye on the next several million
“We have a potential of six million readers. You may not convince all six million people to be your socios, but if you learn more about their interests, you can get closer.”
Chasing subscriptions over scale, The Athletic wants to turn local sports fandom into a sustainable business — starting in Chicago
“It’s very easy today to be click-driven and produce articles that don’t have a lot of substance or depth and don’t cost that much to produce, but that dynamic is disappointing for fans who want higher-quality content.”
Hot Pod: We now have new, free rankings to show how podcasts stack up against each other
Plus: Parsing the RadioPublic announcement; premium podcast subscriptions; Bill Simmons oversimplifies things.
What to read next
0
tweets
The American Bystander is trying to revive the humor magazine with a reader-supported business model
“Our idea was that we were going to create one of these things in a classic format and see if there was enough interest to sustain it.”
0Algorithms, clickworkers, and the befuddled fury around Facebook Trends
“Trends are not the same as news, but Facebook kinda wants them to be.”
0With new columns and newsletters, ProPublica is trying to attract new readers and have more fun
“There’s a huge benefit to coming up with features that are more fun and more interesting. It appeals to a different audience and can create closer connections with readers — they can see a different side of us.”
These stories are our most popular on Twitter over the past 30 days.
See all our most recent pieces ➚
Fuego is our heat-seeking Twitter bot, tracking the links the future-of-journalism crowd is talking about most on Twitter.
Here are a few of the top links Fuego’s currently watching.   Get the full Fuego ➚
Encyclo is our encyclopedia of the future of news, chronicling the key players in journalism’s evolution.
Here are a few of the entries you’ll find in Encyclo.   Get the full Encyclo ➚
Davis Wiki
BBC News
Knight Foundation
West Seattle Blog
Tucson Citizen
The Awl
OpenFile
The New Republic
ReadWrite
Patch
Gawker Media
Newsmax