Instagram oneboxing

Looks like my original theory was correct

13 Likes

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:

11 Likes

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 :+1:

3 Likes

Yep. See it in action here:

https://www.instagram.com/p/BnCSF2LDXX3/?taken-by=natgeo

5 Likes

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.

2 Likes

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

2 Likes

Amazing :smiley:

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

2 Likes

@techAPJ has that code change been committed?

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

[Video] National Geographic on Instagram

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

Yes, the changes have been committed.

4 Likes

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

Iā€™ve just installed the latest v2.1.0.beta5 +111 :+1:

1 Like

Hmmm :thinking:

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

Rebake existing posts perhaps?

Yes, if itā€™s just a few posts, click the :wrench: on the post and then ā€œrebuild HTMLā€.

2 Likes

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.

7 Likes

Excellent idea! Done.

Demo:

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

16 Likes

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 :clap:

11 Likes

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 link leads to the linked page) and perhaps even the caption?

https://www.retrogameboards.com/t/rgb-pick-up-thread-of-swag/224/1744?u=matt

1 Like

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

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 :wink:

4 Likes

Fixed in

https://github.com/discourse/onebox/commit/aaa579a9b29cd9479dc94f374799782b18614fc2

7 Likes

How about the top instagram.com becomes 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.

1 Like

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/

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

5 Likes