Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fix broken / overlapping Instagram embed for WordPress
<?php
/**
* Plugin Name: Fix broken Instagram oEmbed
* Description: Fixes an issue with Instagram posts being broken when multiple posts are oEmbedded.
* Version: 1.0
* Author: khromov
*/
/**
* Remove Instagram embed.js script on each embed
*/
add_filter('embed_oembed_html', function($html, $url, $attr, $post_id) {
$regex = '/<script.*instagram\.com\/embed.js.*\s?script>/U';
$regex_2 = '/<script.*platform\.instagram\.com\/.*\/embeds\.js.*script>/U';
if(preg_match($regex, $html) || preg_match($regex_2, $html)) {
add_filter('kh_has_instagram_embed', '__return_true');
$html = preg_replace($regex, '', $html);
$html = preg_replace($regex_2, '', $html);
return $html;
}
return $html;
}, 100, 4);
/**
* Enqueue the embed.js script once at the bottom of the page, if at least one Instagram embed is enqueued
*/
add_filter('wp_footer', function() {
if(apply_filters('kh_has_instagram_embed', false)) :
?>
<script async defer src="//www.instagram.com/embed.js"></script>
<?php
endif;
}, 999);
@haroldparis

This comment has been minimized.

Copy link

@haroldparis haroldparis commented Feb 21, 2018

Damn. You rock.

@brittantley

This comment has been minimized.

Copy link

@brittantley brittantley commented Feb 22, 2018

I'm trying to use this, but placing this file in my top-level directory did not solve the overlapping issue. Do I need to invoke this file somewhere else within my site? Thanks for your help!

@Pastelpastel

This comment has been minimized.

Copy link

@Pastelpastel Pastelpastel commented Feb 26, 2018

Hi all, I'm a novice at all of this and I have no idea where to place this code. I actually tried to plug in an "untested" plug in called Fix Broken Instagram and that didn't work either. I appreciate everyone's help. Thank you.

@khromov

This comment has been minimized.

Copy link
Owner Author

@khromov khromov commented Feb 26, 2018

@brittantley @Pastelpastel

The snippet is a self-contained plugin, so you can save it as a file with any name in your wp-content/plugins directory, for example /wp-content/plugins/fix-instagram-oembed.php and then activate it through your admin control panel.

@Atkbritt

This comment has been minimized.

Copy link

@Atkbritt Atkbritt commented Feb 28, 2018

This was super helpful! I'm a novice at this as well. Originally I'd installed custom CSS (below)

iframe.instagram-media {
position: static !important;
}

It worked for a while, but the imaged reverted after a while. Your snippet seems to have resolved the problem.
Thank you!

@AoifeS

This comment has been minimized.

Copy link

@AoifeS AoifeS commented Mar 1, 2018

Hello, Im new to this also and dont understand how to install it. I have tried downloading the zip and then moving it into my wordpress folder on my computer and the importing the file it into my wordpress.org via the wordpress importer but it is not showing up in my admin side bar or in my plug ins ( I saved it under plug ins) Can you help me?

@AoifeS

This comment has been minimized.

Copy link

@AoifeS AoifeS commented Mar 1, 2018

figured it out! Yay

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.