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

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

Twitter

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

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>

SPAモードのNuxt.jsにツイッターのウィジェットを埋め込み、ページ遷移の度に初期化する 🐦

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…

Next.js + Vercel + Twitter APIでツイートの検索結果をウェブページに表示する 🦜

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

Twitter Media Studioでメディアを管理する 📽

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

Twitterカードに背景透過画像を設定する 🦜

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

Twitterカードは投稿後に差し替え可能 🦜

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