# Instagram oneboxing
**URL:** https://meta.discourse.org/t/instagram-oneboxing/69099
**Category:** Feature
**Created:** [2017年八月30日 21:06 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099 "2017-08-30T21:06:12Z")
**Posts on this page:** 20
**Page:** 2
### Author:  [@gingerbeardman](https://meta.discourse.org/u/gingerbeardman)
#### Post date: [2018年一月11日 20:16 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/23 "2018-01-11T20:16:14Z")
The same treatment as imgur would be a good improvement. Album title and link back to the post.
Thanks all
---
### Author:  [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [2018年三月18日 17:30 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/26 "2018-03-18T17:30:57Z")
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.
> [@gingerbeardman](#):
>
> only the first image is shown when you add a link to an instagram post containing multiple images.
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](https://www.instagram.com/p/Bdzo9OVF8E4/?taken-by=mattsephton) 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.
---
### Author:  [@rizka](https://meta.discourse.org/u/rizka)
#### Post date: [2018年三月18日 19:27 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/27 "2018-03-18T19:27:30Z")
Perfect, thank you! 😍
---
### Author:  [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [2018年三月18日 20:34 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/28 "2018-03-18T20:34:15Z")
A simple like is not enough. Major UX improvement as users mix and mash content from all social media channels.
---
### Author:  [@gingerbeardman](https://meta.discourse.org/u/gingerbeardman)
#### Post date: [2018年三月18日 22:33 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/29 "2018-03-18T22:33:32Z")
Awesome work! It sounds like you’ve done a good job so I’ll be happy with whatever you release.
---
### Author:  [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [2018年三月19日 08:42 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/30 "2018-03-19T08:42:01Z")
Okay, I figured out a way to check if an Instagram link is an album. :allthethings:
This feature is now live. Demo:
Image:
[https://www.instagram.com/p/BgSPalMjddb?1](https://www.instagram.com/p/BgSPalMjddb?1)
Album:
[https://www.instagram.com/p/Bf58DXdDqJ6?1](https://www.instagram.com/p/Bf58DXdDqJ6?1)
Video:
[https://www.instagram.com/p/BgRbv6yDMzm/?taken-by=natgeo](https://www.instagram.com/p/BgRbv6yDMzm/?taken-by=natgeo)
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2018年三月20日 00:22 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/31 "2018-03-20T00:22:09Z")
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
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2018年三月20日 00:25 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/32 "2018-03-20T00:25:33Z")
Oh yes auto height and width are disastrous @techapj, we must address that.
---
### Author:  [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [2018年三月20日 03:08 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/33 "2018-03-20T03:08:46Z")
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:
```css
```
So we should somehow inject the same in CSS as well?
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2018年三月20日 04:05 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/34 "2018-03-20T04:05:40Z")
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.
---
### Author:  [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [2018年三月20日 06:25 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/35 "2018-03-20T06:25:52Z")
Aspect ratio is not fixed, so I’ll go with option 2.
---
### Author:  [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [2018年三月22日 17:49 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/39 "2018-03-22T17:49:15Z")
Okay, here is my attempt to wrap full-size Instagram images in aspect ratio:
[https://github.com/discourse/discourse/pull/5696](https://github.com/discourse/discourse/pull/5696)
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?
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2018年三月22日 22:26 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/40 "2018-03-22T22:26:27Z")
visually it looks good to me, let me know when its deployed so I can dig into the html
---
### Author:  [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [2018年三月22日 23:28 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/41 "2018-03-22T23:28:01Z")
PR merged and deployed here on meta.
I rebuild the HTML for [this post](https://meta.discourse.org/t/instagram-oneboxing/69099/30), which now has Instagram onebox images wrapped in aspect ratio div.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2018年三月22日 23:31 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/42 "2018-03-22T23:31:41Z")
Let’s see
[https://www.instagram.com/p/Bf58DXdDqJ6/](https://www.instagram.com/p/Bf58DXdDqJ6/)
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2018年三月22日 23:39 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/43 "2018-03-22T23:39:43Z")
Looks great to me, we should apply the same fix to twitter if it is missing.
---
### Author:  [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [2018年三月23日 13:35 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/44 "2018-03-23T13:35:16Z")
Okay, applied same styling for full-size Twitter onebox images as well.
Example:
>
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2018年三月23日 22:09 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/45 "2018-03-23T22:09:45Z")
Can the indentation be removed from the image?
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2018年三月23日 23:28 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/46 "2018-03-23T23:28:49Z")
I think the indentation is OK in this case, it looks fine to me.
---
### Author:  [@bts](https://meta.discourse.org/u/bts)
#### Post date: [2018年三月24日 01:25 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/47 "2018-03-24T01:25:48Z")
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!
[上一頁](https://meta.discourse.org/t/instagram-oneboxing/69099.md?page=1)
[下一頁](https://meta.discourse.org/t/instagram-oneboxing/69099.md?page=3)