javascriptcsstwitterfouc

Twitter follow button on my website - Flash of Unstyled Content

So I want to display simply follow button on a page. Very easy.

In my JS file I have:

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);
    };

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

Then in HTML I have:

<a href="https://twitter.com/mattkomarnicki?ref_src=twsrc%5Etfw"
    class="twitter-follow-button"
    data-size="large"
    data-lang="en"
    data-show-count="true">Follow @mattkomarnicki</a>

Everything works but because the button is on top of the page (always within the initial viewport area). As soon as I refresh the page (or load it for the first time). I can see FOUC. Is there any thing like event that's being emitted so that I can initially do display none and when the button "is ready" I can make it visible?

enter image description here

Any hints?

Solution

  • You can try using the rendered event from the Twitter JS API:

    twttr.events.bind(
  'rendered',
  function (event) {
    console.log("Created widget", event.target.id);
  }
);

    Source: Twitter docs