Instagram embedding features and layout

Contribute Feature

AI-generated summary

The discussion revolves around embedding Instagram posts in Discourse forums. Layout Issues: Canapin points out issues with video embedding, including stretched image previews and tall white spaces at the bottom. They also mention that gallery embedding does not utilize the available width.

Customization: Canapin asks about the extent to which Discourse can customize Instagram embeds, wondering if the content style is generated by Instagram or can be modified.

Onebox vs. Iframe: Canapin recalls a time when Instagram posts were embedded as oneboxes with locally uploaded images, preventing content disappearance if the original Instagram post was removed. However, this feature is no longer available, and iframe embedding has been implemented instead.

Facebook Embeds: Canapin inquires about the possibility of embedding Facebook public links, which currently doesn’t work.

Historical Context: Canapin shares an example of a 2021 post with properly embedded Facebook and Instagram posts, which is no longer possible due to broken features.

Recent Changes: Canapin notes that Instagram embeds have become close to square-shaped, cropping the content.

Related Topic: piffy mentions the cumbersome process of registering a Meta app for oEmbeds and the potential issue with infinite scroll and variable heights.

1

Hi!

I have a few questions and suggestions about Instagram posts embedding.

Here’s a post where I put three links: 1 video, 1 photo, and 1 gallery:

Video embedding

  1. The image preview is stretched. Is it possible to prevent this?

    Preview in the forum post:

    image
    image652×812 52.3 KB

    Actual Instagram post:

    image
    image684×612 147 KB

  2. There’s a tall white space on the bottom of the embed. The iframe’s height seems wrong. Is there a way to fix it?

    image
    image717×1300 68.6 KB

    image
    image729×1360 92 KB

Gallery embedding

The gallery embedding doesn’t use all the available width, but it does for a single image post. Can this be fixed as well?

image
image666×1683 159 KB

In a more general way, what can Discourse customize in these embeds? Can it be customized, or is all the content style generated and provided by Instagram itself?

Also, I remember a time when Instagram posts had oneboxes where pictures were uploaded locally, like regular uploads, which prevented the onebox content to disappear if the related Instagram posts was removed. I suppose this is not the case anymore?

How to avoid potential issues when rebaking all posts?
2

I just went through the (frankly) cumbersome task of registering a Meta app that will allow oEmbeds earlier today. I don’t know why they made the process so difficult, especially the part where they want to verify your app works in order to approve the permissions but the functionality of the app depends on the permission existing (!!??). Waiting to hear back soon

I can’t address any of the questions here myself, mostly posting to follow this topic. I did read somewhere on this meta forum that the non-onebox version of Instagram embeds do not play well with infinite scroll, specially due to the variable height. Is that what’s happening here? I’ll also mention that just a quick search for “instagram” on the discourse github repo does a good job at finding the relevant bits of code

3

I’d like to add an emphasis on this.

I also wonder if it’s possible at all to embed Facebook public links. I couldn’t find a way to do so. It also doesn’t work on Discord, by the way. All it does is show a log-in invitation written in a language not always well-chosen, since based on the server on which Discourse is hosted, and despite several users asking about this, I don’t remember seeing any solution or workaround.

Does someone know the status of Discourse/meta regarding Instagram/Facebook embeds?

Here’s an example of a 2021 post from my forum, with properly embedded Facebook and Instagram posts with excerpts and downloaded remote images: Desert MUNI Race Ridgercrest, Ca - #23 by jmadrigal - General - Unicyclist.com

It was perfect then, but now, the feature is broken (Facebook) and half-broken (Instagram). :pensive:

4

I’ve found out that Discourse wasn’t able to retrieve Instagram’s image anymore, hence the iframe method that was implemented 2 years ago:
https://github.com/discourse/discourse/pull/14789/commits/d68859f6d8898679202193302bb40d075ba50e27

Some layout issues I mention in this topic have been fixed since, but now Instagram embeds seem close to square-shaped, which crops the content:

Instagram embed square-ish cropped contents
Instagram embed square-ish cropped contents1023×1860 124 KB

Original IG links:

https://www.instagram.com/p/Cl0v1o5S-S0/

https://www.instagram.com/p/ClyKnj8yW4B/

1 Like