みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Next.jsに公式ツイートボタンを埋め込み、ページ遷移の度に初期化する 🐦

f:id:kimizuka:20210103011013j:plain

useEffect で window.twttr.widgets.load を実行すればOKです。

declare global {
  interface Window {
    twttr: any
  }
}

export default function BtnTweet() {
  useEffect(() => {
    window!.twttr!.widgets!.load();
  }, []);

  return (
    <p className="btn-tweet">
      <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" className="twitter-share-button" data-show-count="false" data-lang="ja">Tweet</a><script src="https://platform.twitter.com/widgets.js" />
    </p>
  );
}
</script>

TypeScriptで書いていますが、イメージはこんな感じです。



Nuxt.jsバージョンはこちら

blog.kimizuka.org