Last active
March 1, 2018 11:33
-
-
Save khromov/3f0c20e076019b5b11f979caae2b35f5 to your computer and use it in GitHub Desktop.
Fix broken / overlapping Instagram embed for WordPress
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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); |
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?
figured it out! Yay
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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!