React (create-react-app) and using twitter tweet button widget?

React (create-react-app) and using twitter tweet button widget?
0.0 0

#1

Hi FCC,

I am currently working on a project using react/node/mongo. I want to use the twitter widget to include an easy way for users to tweet out from my site.

I am trying to load the widget using the script tag as outlined on twitter’s site:

<script>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"));</script>

This tag is placed in my <head> section of my index.html file (which is the main entry point for the app (I used create-react-app to generate the project skeleton).

What’s curious is when the page with the twitter button renders, the “Tweet” text appears without any styling on the button itself. (it isn’t blue, there is no height/width). What’s even more strange is RARELY it will appear styled correctly (blue background, twitter bird icon on the button, etc). This leads me to think there is some kind of race condition that I am not accommodating for?

Does anyone have any experience using React (specifically create-react-app) and Twitter’s tweet button?

Any help is appreciated.

Thanks!


#2

It’s hard to tell without the live code to debug, but the Twitter Widget code loads asynchronously, so it helps to monitor the loaded event to know when to run any code that depends on the widget.

For example:

twttr.ready(twttr => {
  twttr.events.bind("loaded", () => {
    console.log("Twitter Widget Code Finished Loading");
    // call functions that depend on the widget or manipulate relevant HTML
  });
});

Here is some more info on the events that fire: https://dev.twitter.com/web/javascript/events

To successfully create the button, you’ll need to wait for the loaded event to fire, and then use the createShareButton Factory Function, documented here: https://dev.twitter.com/web/tweet-button/javascript-create.

For example:

twttr.widgets.createShareButton("/", document.getElementById("my-tweet-button"), {
  size: "large",
  text: "my tweet text"
});

document.getElementById("my-tweet-button") can be a <span>, a <div>, or any element that can contain an iFrame. Also, the above code is thenable, so you can chain additional functions with .then() to run more code after the button is created.

You may already have all of this in place, in which case, it’s likely a completely different issue, but anyway, hopefully this helps!


#3

Hi SkyC,

An issue I am running into is that twttr is undefined in my component. Do you know of any way I can pass the twttr instance into the component I need to use it in?


#4

I’m still a big React.js noob unfortunately. According to this: https://dev.twitter.com/web/javascript/initialization

It seems you should be able to do:

componentDidMount: function() {
  twttr.widgets.load( // re-scans the DOM to initialize widgets
    document.getElementById("my-tweet-button");  
  );
}

(I may be embarrassing myself with that code though)


#5

Yeah I’ve tried accessing in in componentDidMount() but it did not work.

Not sure :confounded:!


#6

Think i fixed it by accessing through window obj.

ie window.twttr.widgets.load()

if anyone is curious / has this issue in the future