I am in the process of creating an embed for instagram posts. However when using the script: https://www.instagram.com/embed.js
I get the following errors in the browser:
Localhost Environment:
Uncaught Invariant Violation: Minified invariant #4412; %s Params: %s
at a (https://www.instagram.com/embed.js:58:366)
at T (https://www.instagram.com/embed.js:62:3635)
Feature Branch Environment:
Uncaught SyntaxError: Identifier 'i' has already been declared
at embed.js:1:1
The post is loaded into an iframe
instead of a blockquote
as the blockquote
has issues with certain Safari browser versions.
Without the script the post still loads however the iframe
does not size correctly. With the script the iframe
sizes correctly on localhost despite the above error. However when pushed to a feature branch the script (whilst loaded) does not resize the post correctly/at all.
What would be the best way to workaround this?
I have tried to copy the script over into my repo and change the affected variable, but after that time consuming process the server would not load the file in its already minified state.
We are not using AMP
solutions as we are trying to actively move away from that structure.
Any help is greatly appreciated.
Resolved this by adding a class name to the iframe to identify it and using the below code to resize the iframe to proper dimensions. No need for embed script that causes this issue:
const instagramEmbed = () => {
const embeds = document.getElementsByClassName('instagram-media')
if (embeds.length > 0) {
window.addEventListener('message', (event) => {
if (event.origin !== 'https://www.instagram.com') return
const data = JSON.parse(event.data)
if (data?.type == 'MEASURE' && data?.details) {
const height = data.details.height
if (height) {
const instaFrames = document.querySelectorAll(
'.instagram-media iframe',
)
instaFrames.forEach((frame) => {
if (frame.contentWindow === event.source) {
frame.style.height = `${height}px`
}
})
}
}
})
}
}