Contents
はじめに
この記事を読み終える頃にはご自身のサイトにこんな感じのシェアボタンが配置されていることでしょう．
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 コンポーネントはユーザーが定義できるプロパティを３つ持っています．
- text … シェアボタン内に表示する文字列
- url … シェアする url
- shareText … シェアする時に表示する文字列
text プロパティが未定義の場合は，シェアボタンに Twitter と表示されます．
筆者は Share? と定義しています．
url プロパティにはシェア対象の url を定義すれば良いです．
shareText にはシェアするときに書いてほしい言葉を事前に書いておくとユーザーにとって親切でしょう．
<Twitter
text="Share?"
url={siteUrl + post.slug}
shareText={post.title}
/>おわりに
以上がシェアボタンを配置する方法でした．
あっけないほどシンプルだな，という印象を持ったかもしれません．
筆者自身，実装したときは あっけねー と思いました．
でも，この呆気なさの裏側にはライブラリ開発者の努力があります．
開発者の @caspg に感謝します． ありがとうございます！
最後までお読みいただきありがとうございました．
愛用品
- Xiser Pro Trainer (ステッパー)
- HHKB Professional 墨 (キーボード)
- HHKB キートップセット 白 (キートップ)
- Apple Magic Mouse 2 (マウス)
- Apple MacMini (PC)
- iiyama Display 27inch FullHD (ディスプレイ)
- KINTO UNITEA 550ml (コップ)
