Search code examples
htmlcssinstagraminstagram-api

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.


Solution

  • 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>