typememo.jp

gatsby-theme-blog 製ブログに Twitter のシェアボタンを置きました

2020.11.24

#tech#gatsby#twitter#npm
Takeru Yamada

Contents


はじめに

この記事を読み終える頃にはご自身のサイトにこんな感じのシェアボタンが配置されていることでしょう.


Figure-example-of-share-button


react-sharingbuttons という React ライブラリを使ってシェアボタンを配置する方法について, 基本的なところから細かめに紹介します.

gatsby-theme-blog とかの gatsby JS 製のサイトにシェアボタンを配置したいんだけど, 手軽な方法はないかなー,と探している人に是非読んでもらいたい記事です.

想定読者は React JS 関連の知識を使ってシェアボタンを配置したい人です.

もしも心当たりのある方は読み進めていただければ楽しいと思います.

それでは参りましょう!

参考:


実装方法

react-sharingbuttons (version 1.0.0) をインストールするところから実装するまでの全てをお見せします.

最終的には Twitter アイコンと Share? というテキストが横並びのボタンが出来上がります.

順番通りに作業すれば同じボタンが出来上がるはずです. 手順通りに作業してエラーが発生した場合は,筆者の Github のイシューに不具合報告あげてくださいまし.


ライブラリをインストールする

ライブラリをインストールします. npm コマンドを使いますので,npm をインストールしていない方は asdf node.js / npm のバージョン管理方法 を読んで npm をインストールしてからこの先を読み進めてください.

$ npm install --save react-sharingbuttons

ライブラリをインポートする

ライブラリのインストールが完了したのでシェアボタンを配置したい JavaScript ファイルに react-sharingbuttons から特定の SNS のコンポーネントをインポートします.

今回は Twitter コンポーネントをインポートしました.

react-sharingbuttons がデフォルトで持っている良い感じのスタイルシートもインポートしました.

import { Twitter } from 'react-sharingbuttons'
import 'react-sharingbuttons/dist/main.css'

Twitter コンポーネントを配置する

さて,Twitter コンポーネントをインポートしたので好きな場所に配置しましょう.

Twitter コンポーネントはユーザーが定義できるプロパティを3つ持っています.

  1. text … シェアボタン内に表示する文字列
  2. url … シェアする url
  3. shareText … シェアする時に表示する文字列

text プロパティが未定義の場合は,シェアボタンに Twitter と表示されます. 筆者は Share? と定義しています.

url プロパティにはシェア対象の url を定義すれば良いです.

shareText にはシェアするときに書いてほしい言葉を事前に書いておくとユーザーにとって親切でしょう.

<Twitter
text="Share?"
url={siteUrl + post.slug}
shareText={post.title}
/>

おわりに

以上がシェアボタンを配置する方法でした.

あっけないほどシンプルだな,という印象を持ったかもしれません.

筆者自身,実装したときは あっけねー と思いました.

でも,この呆気なさの裏側にはライブラリ開発者の努力があります.

開発者の @caspg に感謝します. ありがとうございます!

最後までお読みいただきありがとうございました.

応援していただけるととても嬉しいです!


愛用品


関連記事