アルパカログ

📅  2021-03-29

Notion BlogにTwitterボタンを表示する


Notion Blog (Next.js) では、Tweetボタン(ウィジェット)のコードをそのままコピーしても、Tweetボタンをうまく表示できないことがあります。

しかし、react-share コンポーネントを使えば簡単にNotion BlogにTweetボタンを表示することができます。

このエントリでは、react-share コンポーネントを使ってTweetボタンを表示する方法を説明します。

react-share コンポーネントのインストール

react-share コンポーネントをインストールして依存関係に追加しましょう。

yarn add react-share

インストールが完了すると yarn.lock ファイルおよび package.json に下記のように react-share が追加されます。

Shareコンポーネントの作成

次に使い勝手のために Share コンポーネントを作成します。下記のような Share コンポーネントを src/components/share.tsx として作成します。

これで <Share url={someURL} title={someTitle} /> のようにしてTweetボタンを追加できるようになりました。

Tweetボタンの表示

最後に、表示したい場所で Share コンポーネントを呼び出します。

Share コンポーネントのインポートもお忘れなく。また、コンポーネントの相対パスは各自で調整してくださいね。

うまくいけばこの記事の下にあるような丸いTwitterのアイコンが表示されます。

以上です。このエントリでは、react-share コンポーネントを使ってTweetボタンを表示する方法を説明しました。