アルパカログ

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

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

• https://www.npmjs.com/package/react-share

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

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

yarn add react-share

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

• Add react-share - otoyo/notion-blog

次に使い勝手のために Share コンポーネントを作成します。

下記のような Share コンポーネントを src/components/share.tsx として作成します。

// components/Share.tsx
import React from 'react'
import { TwitterIcon, TwitterShareButton } from 'react-share'

export default ({ text = '', url = '' }) => {
  return (
    <TwitterShareButton url={url} title={text}>
      <TwitterIcon size={32} round={true} />
    </TwitterShareButton>
  )
}

• Add Share component - otoyo/notion-blog

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

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

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

import Share from '../../components/share'

// ...

<Share
  text={post.Page}
  url={'https://alpacat.com' + getBlogLink(post.Slug)}
/>

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

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