# 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:** 4

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2018年八月29日 02:35 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/68 "2018-08-29T02:35:21Z")

</div>

> [@codinghorror](#):
>
> Instagram, being a part of Facebook, is likely a bunch of jerks

Looks like my original theory was correct

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [2018年八月29日 02:47 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/69 "2018-08-29T02:47:31Z")

</div>

> [@Mittineague](#):
>
> I’m thinking that until the reason is known, a better course would be for Discourse to stop oneboxing Instagram links and display them as only links instead.

I will make it so that instagram image and video url are treated as same and will show video preview image instead of mp4 video. Since we download onebox images locally the image will keep working. For example, the preview image for instagram video link @codinghorror posted above will be:

 ![](https://global.discourse-cdn.com/meta/original/3X/b/5/b5450ded309a9d74a0985de659ed45afba15e7ff.jpeg)

---

<div class="post-metadata">

### Author: ![Richie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/richie/32/115110_2.png) [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [2018年八月29日 08:34 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/70 "2018-08-29T08:34:04Z")

</div>

> [@techAPJ](#):
>
> I will make it so that instagram image and video url are treated as same and will show video preview image instead of mp4 video

Excellent workaround!!

So I’m guessing people then click on the preview image and it takes them off to the video/link over on Instagram?

Sounds ideal 👍

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [2018年八月29日 13:01 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/71 "2018-08-29T13:01:40Z")

</div>

> [@Richie](#):
>
> So I’m guessing people then click on the preview image and it takes them off to the video/link over on Instagram?

Yep. See it in action here:

[https://www.instagram.com/p/BnCSF2LDXX3/?taken-by=natgeo](https://www.instagram.com/p/BnCSF2LDXX3/?taken-by=natgeo)

---

<div class="post-metadata">

### Author: ![rizka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rizka/32/79717_2.png) [@rizka](https://meta.discourse.org/u/rizka)
#### Post date: [2018年八月29日 13:08 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/72 "2018-08-29T13:08:14Z")

</div>

Thank you for taking the action to fix this.

Question: any ideas to make it look like a video? It might not always be so evident.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [2018年八月29日 13:17 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/73 "2018-08-29T13:17:59Z")

</div>

@techAPJ this makes the scrolling jump around for me - I think we need to add a fixed height when embedding the image.

---

<div class="post-metadata">

### Author: ![Richie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/richie/32/115110_2.png) [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [2018年八月29日 13:22 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/74 "2018-08-29T13:22:39Z")

</div>

> [@techAPJ](#):
>
> Yep. See it in action here:

Amazing 😃

> [@rizka](#):
>
> Question: any ideas to make it look like a video? It might not always be so evident.

Some kind of font awesome `fa-play` graphic over the top of the image perhaps?

---

<div class="post-metadata">

### Author: ![Richie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/richie/32/115110_2.png) [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [2018年八月29日 13:24 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/75 "2018-08-29T13:24:19Z")

</div>

> [@techAPJ](#):
>
> Yep. See it in action here:

@techAPJ has that code change been committed?

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [2018年八月29日 14:09 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/76 "2018-08-29T14:09:21Z")

</div>

> [@rizka](#):
>
> any ideas to make it look like a video?

Not sure.. maybe the title can indicate that the linked post is a video, like:

> [Video] National Geographic on Instagram

> [@david](#):
>
> this makes the scrolling jump around for me - I think we need to add a fixed height when embedding the image.

This should not be happening. The image have fixed width/height and there are other (generic) safeguards in place. I’ll check.

> [@Richie](#):
>
> has that code change been committed?

Yes, the changes have been committed.

---

<div class="post-metadata">

### Author: ![Richie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/richie/32/115110_2.png) [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [2018年八月29日 15:48 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/77 "2018-08-29T15:48:27Z")

</div>

> [@techAPJ](#):
>
> Yes, the changes have been committed.

Thanks for the super-fast response to this one guys!

I’ve just installed the latest `v2.1.0.beta5 +111` 👍

---

<div class="post-metadata">

### Author: ![Richie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/richie/32/115110_2.png) [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [2018年八月29日 15:50 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/78 "2018-08-29T15:50:38Z")

</div>

Hmmm 🤔

Do I need to do something to implement this on all existing affected posts?

Rebake existing posts perhaps?

> ![image](https://global.discourse-cdn.com/meta/original/3X/a/5/a5a9f8119204c77c97ebadd4fc0d53a70a5bc7c9.jpeg)

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [2018年八月29日 15:55 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/79 "2018-08-29T15:55:49Z")

</div>

> [@Richie](#):
>
> Rebake existing posts perhaps?

Yes, if it’s just a few posts, click the 🔧 on the post and then “rebuild HTML”.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2018年八月29日 22:17 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/80 "2018-08-29T22:17:59Z")

</div>

> [@techAPJ](#):
>
> [Video] National Geographic on Instagram

Just superimpose a play button at the lower right, @awesomerobot recently made a change for this on images that are click to expand, please check with him if you need guidance.

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [2018年八月31日 03:40 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/81 "2018-08-31T03:40:40Z")

</div>

Excellent idea! Done.

Demo:

[https://www.instagram.com/p/BnBx8pbDxWc/?taken-by=natgeo](https://www.instagram.com/p/BnBx8pbDxWc/?taken-by=natgeo)

EDIT: ~~Just noticed that play icon is not clickable, making it so now~~ Done.

---

<div class="post-metadata">

### Author: ![Richie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/richie/32/115110_2.png) [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [2018年八月31日 10:29 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/82 "2018-08-31T10:29:06Z")

</div>

What a fantastic set of solutions!

People can see now it’s a video at a glance too.

Great work everyone, thanks for the amazingly quick response to this issue too 👏

---

<div class="post-metadata">

### Author: ![gingerbeardman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gingerbeardman/32/540824_2.png) [@gingerbeardman](https://meta.discourse.org/u/gingerbeardman)
#### Post date: [2018年十月24日 12:16 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/83 "2018-10-24T12:16:35Z")

</div>

Awesome work on this.

My only request is if there is a way to make the onebox mention my Instagram account name a little less?

For me the most important part is the image so I’d appreciate a way to somehow hide at least the “Account Name on Instagram” heading (the [instagram.com](http://instagram.com) link leads to the linked page) and perhaps even the caption?

[https://www.instagram.com/p/BpHJPsICmCH/](https://www.instagram.com/p/BpHJPsICmCH/)

> **[RGB Pick Up Thread Of Swag!](https://www.retrogameboards.com/t/rgb-pick-up-thread-of-swag/224/1744?u=matt)**
>
> One of the things I enjoy most about our community is the pick ups and the swag! 
> I want to see it all. Let’s see the Snatcher you overpayed for on EBay or the GCN component cables you claimed to find at a thrift store f…

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2018年十月24日 23:58 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/84 "2018-10-24T23:58:51Z")

</div>

This is probably easiest accomplished via a local CSS customization, under Admin, Customize. You could hide or de-size the element through standard CSS.

 ![image](https://global.discourse-cdn.com/meta/original/3X/6/b/6bc4e0d89e980a0d83082b8e1fbd54c6ad9178b0.jpeg)

I do agree that the “on Instagram” part is redundant though @techapj.. we’re saying it twice, and everyone knows how I feel about needless repeated text 😉

---

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [2018年十月25日 07:52 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/85 "2018-10-25T07:52:07Z")

</div>

Fixed in

[https://github.com/discourse/onebox/commit/aaa579a9b29cd9479dc94f374799782b18614fc2](https://github.com/discourse/onebox/commit/aaa579a9b29cd9479dc94f374799782b18614fc2)

---

<div class="post-metadata">

### Author: ![gingerbeardman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gingerbeardman/32/540824_2.png) [@gingerbeardman](https://meta.discourse.org/u/gingerbeardman)
#### Post date: [2018年十月25日 10:38 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/86 "2018-10-25T10:38:44Z")

</div>

How about the top _[instagram.com](http://instagram.com)_ becomes _[instagram.com/username](http://instagram.com/username)_? So much neater.

Also “Matt Sephton (@mattsephton) on Instagram” at the start of the caption also feels needlessly repetitive.

As for local CSS, is that per user or globally for a board? Because I’m not admin of any boards.

---

<div class="post-metadata">

### Author: ![rizka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rizka/32/79717_2.png) [@rizka](https://meta.discourse.org/u/rizka)
#### Post date: [2019年三月13日 14:25 UTC](https://meta.discourse.org/t/instagram-oneboxing/69099/87 "2019-03-13T14:25:16Z")

</div>

I noticed something about URL parsing. Oneboxing fails and produces just the image if the URL contains the Instagram username.

This won’t work as intended: `https://www.instagram.com/bennyblood24/p/Brc6FNRn9vu/`

[https://www.instagram.com/bennyblood24/p/Brc6FNRn9vu/](https://www.instagram.com/bennyblood24/p/Brc6FNRn9vu/)

This works: `https://www.instagram.com/p/Brc6FNRn9vu/`

[https://www.instagram.com/p/Brc6FNRn9vu/](https://www.instagram.com/p/Brc6FNRn9vu/)

[上一頁](https://meta.discourse.org/t/instagram-oneboxing/69099.md?page=3)

[下一頁](https://meta.discourse.org/t/instagram-oneboxing/69099.md?page=5)
