Support

Account

Home Forums General Issues Twitter oembed is text only?

Solved

Twitter oembed is text only?

  • 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 Tweet Embed shows up like Text only.

    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>

  • 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"));
    
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.