Twitter oembed is text only?

• waffl

• September 27, 2021 at 11:52 am

I’m using an ACF embed field to embed various things and noticed that tweets preview/render correctly in the editor, but the stored HTML is textonly?

For example shows up like .

The HTML returned for the field is:

<blockquote class="twitter-tweet" data-width="550" data-dnt="true"><p lang="en" dir="ltr">We’ve just hit a rather large milestone. ACF is being used on over 2 million sites 🎉 Thank you to all our users! <a href="https://t.co/J0Kne1vkMP">pic.twitter.com/J0Kne1vkMP</a></p>&mdash; Advanced Custom Fields (@wp_acf) <a href="https://twitter.com/wp_acf/status/1438157860475654150?ref_src=twsrc%5Etfw">September 15, 2021</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

• waffl

• October 11, 2021 at 12:17 pm

So the issue was that this was being displayed in a vue app which, for some reason, caused the twitter widgets.js rendering to fail probably due to timing of sorts.

I solved this by loading the script in my template according to https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/guides/set-up-twitter-for-websites and triggering the widget load on $nextTick in the callback.

window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);

    this.nextTick(() => twttr.widgets.load())   
  };

  return t;
}(document, "script", "twitter-wjs"));