Instagram oneboxing


(Matt Sephton) #23

The same treatment as imgur would be a good improvement. Album title and link back to the post.

Thanks all


(Arpit Jalan) #26

I looked into this today and investigated into Instagram embed support. Instagram does provide oEmbed API endpoint but requires us to inject custom JavaScript to support their native HTML embedding, and does not provide iframe embeds.

So I relied on their OpenGraph support and came up with this oneboxes:

Image:

Video:

The images look beautiful along with onebox borders and the description at the bottom provides context for the image/video (along with likes and comments count). The favicon indicates that it’s an Instagram link, and the title reads author name.

I looked into this as well, and unfortunately, there is no way to tell if a link is an album or a standalone image by looking into og tags or oEmbed response. The link format is exactly same as well.

Also, when I visited the link you posted, I couldn’t tell that it was an album until I hovered on the image. So it’s super confusing on Instagram site as well.

@codinghorror / @sam if the screenshots I posted looks good, I’ll polish my code and will cut a new onebox release with dedicated Instagram onebox.

Any feedback here is appreciated.


(rizka) #27

Perfect, thank you! :heart_eyes:


(ljpp) #28

A simple like is not enough. Major UX improvement as users mix and mash content from all social media channels.


(Matt Sephton) #29

Awesome work! It sounds like you’ve done a good job so I’ll be happy with whatever you release.


(Arpit Jalan) #30

Okay, I figured out a way to check if an Instagram link is an album. :allthethings:

This feature is now live. Demo:

Image:

Album:

Video:


(Sam Saffron) #31

There is a bunch of height and width auto going on here, meaning pages are going to jiggle here if they have these oneboxes. We got to follow the same pattern we do for other images.

cc @awesomerobot


(Jeff Atwood) #32

Oh yes auto height and width are disastrous @techapj, we must address that.


(Arpit Jalan) #33

Hmm… I took the CSS inspiration from Twitter onebox, so we’ll need to make the same changes there as well.

I see fixed height and width attributes on img tag:

<img class="instagram-image" src="https://meta-s3-cdn.freetls.fastly.net/original/3X/e/2/e2b18575ce273ef87e433b8b0993aac94f8ff2f9.jpg" width="690" height="459">

So we should somehow inject the same in CSS as well?


(Sam Saffron) #34

not really, we have 2 options here:

  1. If aspect ratio is fixed it is easy, cause we can apply height in CSS using magic wrapping.

  2. If aspect ratio is dynamic we need to follow the exact same pattern we do for uploaded images. Try uploading an image, look at the HTML we generate, look at the CSS that styles it.


(Arpit Jalan) #35

Aspect ratio is not fixed, so I’ll go with option 2.


(Arpit Jalan) #39

Okay, here is my attempt to wrap full-size Instagram images in aspect ratio:

Screenshots:

Landscape image:

Square image:

Portrait image:

If the above looks good, I’ll apply the same on Twitter full-size images.

Can you please have a look @sam?


(Sam Saffron) #40

visually it looks good to me, let me know when its deployed so I can dig into the html


(Arpit Jalan) #41

PR merged and deployed here on meta.

I rebuild the HTML for this post, which now has Instagram onebox images wrapped in aspect ratio div.


(Jeff Atwood) #42

Let’s see


(Sam Saffron) #43

Looks great to me, we should apply the same fix to twitter if it is missing.


(Arpit Jalan) #44

Okay, applied same styling for full-size Twitter onebox images as well.

Example:


(Sam Saffron) #45

Can the indentation be removed from the image?


(Jeff Atwood) #46

I think the indentation is OK in this case, it looks fine to me.


(Brendan Schlagel) #47

Nice! One question, looking at the square lion pic — is there a particular reason it needs to be exactly 500px wide? I think looks a lot better full width, i.e. equal spacing w/ grey border, w/o the large white gap on the right. Ideally should look more like the square video also posted above!