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