2023年11月08日更新

ツイート埋め込み

Daichi Ninomiya

@d151005

·Follow

NFTプロフィールに変更してみた。 🎨 Midjourney で作成 💸 ミント代2,000円ガイド twitter.com/d151005/status…

Daichi Ninomiya

@d151005

Twitter をNFTアイコンにするステップ（要Twitter Blue） 1. MetaMask でウォレットAとBを作成 2. OpenSeaでAに画像アップ 3. OpenSeaでA→Bへ画像譲渡を試み、必要ETHを把握 4.必要ETHをBitflyer的なので購入し、Aに送付&譲渡 5. BのNFTをTwitterに登録

Watch on Twitter

Read more on Twitter

インストール

pnpm add react-tweet

インストール

pnpm add react-tweet

import { Tweet } from 'react-tweet';

export default function TweetPreview() {
  return <Tweet id="1663725517143703552" />;
}

import { Tweet } from 'react-tweet';

export default function TweetPreview() {
  return <Tweet id="1663725517143703552" />;
}

ツイートのスタイルは CSS 変数で調整可能。使用できる変数一覧。

以下おすすめの設定

globals.css

body .react-tweet-theme {
  --tweet-container-margin: 0;

  --tweet-header-font-size: 1em;
  --tweet-body-font-size: 1em;
  --tweet-info-font-size: 1em;
  --tweet-actions-font-size: 1em;
  --tweet-replies-font-size: 1em;
}

globals.css

body .react-tweet-theme {
  --tweet-container-margin: 0;

  --tweet-header-font-size: 1em;
  --tweet-body-font-size: 1em;
  --tweet-info-font-size: 1em;
  --tweet-actions-font-size: 1em;
  --tweet-replies-font-size: 1em;
}

参考リンク

react-tweet

ツイート埋め込み

参考リンク

関連ツイート