0

gatsby.jsで製作中のサイトにTwitterのツイートを埋め込もうとしています。

htmlの<head>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
を読み込んでいてるのですが、どうすればこれの読み込み完了をjavascriptで検知できるでしょうか?

const [tweetId, setTweetId] = useState()

useEffect(() => {
  const container = document.getElementById("container")
  window.twttr.widgets.createTweet(tweetId, container)
}, [tweetId])

setTweetId(12345)

上記のようなコードで、ページにツイートを埋め込んでいるのですが、「window.twttrが存在しません」みたいなエラーになります。

window.twttrというのはwidgets.jsがロード完了すると使えるようになる何かです。
(DOMなのか何なのか理解していません。誰か知っていたら教えてください。)

  1. トップページ(ツイートを埋め込んでいない)にアクセスして、widgets.jsを読み込ませる。
  2. サブページ(ツイートを埋め込んでいる)に移動。
    のような手順ならエラーになりません。ツイートが画面に表示されます。

widgets.jsさえ読み込めればツイートを表示できているので、window.twttr.widgets.createTweet()の部分のコード自体が間違っている訳ではないです。

いまのところ、setIntervalで1秒ごとにwindow.twttrの存在確認をしているのですが、効率が悪いと感じています。

addEventListenerなどでwindow.twttrが利用可能になるまで待ち、window.twttr.widgets.createTweet()を実行させるにはどうすればいいでしょうか?

8

2 件の回答 2

2

Twitter Developer Platformでは、「最も信頼できる方法」としてwidgets.jsロード用のサンプルコードが紹介されています。
https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/guides/set-up-twitter-for-websites

<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>

このようにwidgets.jsをロードした後、twttr.ready関数の引数にロード完了後実行したいコールバック関数またはアロー関数を投入すればツイートが表示されます。

    twttr.ready( () => twttr.widgets.createTweet("20",document.querySelector('div.container'))) ;

ここまでがリンク先のドキュメントに記載されいてる内容です。

質問のようなコードの場面で使用するのであれば、twttr.ready関数の引数にsetTweetIdを実行するコールバック関数を設定すれば表示できるのではないかと思います。

1
  • 1
    紹介いただいたサンプルコードに t.ready(() => { console.log("widgets.jsロード完了") }) を追加し、widget.jsの読み込み完了時にログが記録されることを確認。 createTweetの実行タイミングをtwttr.readyで調整すれば当初の目的を達成できそうです。 ご回答ありがとうございました。
    – すめす
    Commented 2021年6月23日 21:47
0

ごく素直に、対象のscript要素のloadイベントで検知できるはずです。

2
  • metropolisさんが作ってくれたサンプルで動いてますし、私も動作することを確認しました。
    – int32_t
    Commented 2021年6月23日 23:24
  • 1
    metropolisさんのjsfiddleのサンプルをそのまま書けば、gatsby.js上でも動作しました! 前回の失敗の原因は、react-helmetでheadに<script id='xxx' async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>を追加していたせいでした。 const script = document.getElementById('xxx'); script.addEventListener()の時点ではscriptタグ自体がまだ生成されていなかったみたい。 document.createElement('script')からadEventListenerまでの流れを1か所でまとめて設定すればちゃんと動きました。
    – すめす
    Commented 2021年6月24日 1:12

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。