CODEWITHSUNDEEP
htmlcssinstagraminstagram-api
Devin
Devin

Reputation: 1017

Display single SPECIFIC Instagram photo - possible?

Emphasis on specific photo here.

I'm aware of all the Instagram plugins out there, and the Instagram API, however I'm trying to figure out a way to display a single specific photo from Instagram. Not by tag, or by username, but preferably from the Instagram URL, or even with a photo ID.

I want something similar to this: (where the Instagram photo covers the background of the div)

<div class="instagram-photo" 
     style="background-image:URL(*instagram_photo_url_here*);
            background-size:cover">
</div>

I'm happy to link to the photo for photo credit and all that.

Is this possible? I've searched for hours and nothing comes up, I've got to be overlooking something.

Upvotes: 0

Views: 282

Answers (1)

Adam Azad
Adam Azad

Reputation: 11297

Took me some time to come up with an answer, Instagram provides an easy to get the media directly using Media redirect, by adding /media/?size={size} to end of any photo permalink

Desired size of the resulting media. Supported values are t (thumbnail), m (medium), l (large). Defaults to m.

Examples;

And if you're lasy or want bulk changing at once, I wrote a jQuery snippet for this; Demo

Here's your final HTML for your attempt

body {
  padding:10px;
}
.instagram-photo {
  display:block;
  margin-bottom:15px;
  background:#ffffff;
  height:500px;
  border:2px solid #ddd;
}
   <div class="instagram-photo" style="background-image: url(https://instagram.com/p/-FP1PjBQRd/media/?size=l); background-size: cover;"></div>
  <div class="instagram-photo" style="background-image: url(https://instagram.com/p/8l2vIrhQQ_/media/?size=l); background-size: cover;"></div>
  <div class="instagram-photo" style="background-image: url(https://instagram.com/p/-XNiICnxXO/media/?size=l); background-size: cover;"></div>
  <div class="instagram-photo" style="background-image: url(https://instagram.com/p/cn5KZWmJp1/media/?size=l); background-size: cover;"></div>
  <div class="instagram-photo" style="background-image: url(https://instagram.com/p/7TDiYJBQdf/media/?size=l); background-size: cover;"></div>

Upvotes: 1

Related Questions