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"> </p>

mounted で window.twttr.widgets.load を実行すればOKです。 nuxt.config.js export default { mode: 'spa', head: { script: [{ src: 'https://platform.twitter.com/widgets.js' }] } } ウィジェットを埋め込んだコンポーネント <script lang="ts"> import { Component, Vue…

ツイッターの検索結果をウェブページに埋め込みたいとき、昔は公式のウィジェットがあったのですが、2018年に廃止されました。 でも、どうしても検索結果をウェブページに埋め込みたくて諸々調査した結果。Next.js + Vercel + Twitter API で割と簡単に埋め…

twitter.com最近毎日ツイッターに動画を投稿しているのですが、お世話になっているのは予約ツイートとMediaStudioです。 予約ツイートを使えば投稿し忘れを防ぐことができますし、MediaStudioをつかえば動画のサムネイルを変更したりできます。そんなことを…

ひょんなことから調べてみたのですが、ブラウザ版のツイッターでは背景透過の画像がTwitterカードに設定可能でした。（2020年7月7日現在） 裏に単色が敷かれることもなく、透過のまま表示されます。 つまりタイムラインの背景色と併せれば不可視にすることも…

Twitterカードとは ウェブサイトにTwitterカードの設定をしておくと、タイムラインに投稿された際に展開されます。上記の例では、画像やサイト名が展開されてますが、動画を展開したり、iframeを展開したりすることもできるので、なかなかいろんなことができ…