Fix broken / overlapping Instagram embed for WordPress

At some point recently (February 2018), Instagram broke their oEmbed implementation which causes JavaScript errors and embeds that overlap each other. Use the snippet below to mitigate this issue and hopefully Instagram will fix it in the future. The snippet makes sure only one

 * 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="//"></script>
}, 999);

Leave a Reply

Your email address will not be published. Required fields are marked *

Markdown is allowed in comments.