SNS シェアボタンを追加しました！
こんにちは、junwatanabe72 です。
せっかくブログを書いたなら SNS でシェアしてほしいですよね。
Stackbit ブログのデフォルトにはない機能なので、今回も自分で実装してみました。
要件
- 各記事ページのタイトル下に SNS ボタンを設置する。
- 各ボタンを padding で間隔を空けて横並びで表示させる。
- ボタンを押下すると、各 SNS ページに遷移し、記事のタイトルと URL が表示される。
実装
1.ライブラリのインストール
SNS シェアボタンを簡単に追加できる「react-share」をインストールします。
npm install react-share
2.ファイルの編集及び新規作成
編集するファイル：「src/layouts/post.js」
新規作成ファイル：「ShareButtons.js」「_posts-page.scss」
2.1 post.js の編集
ShareButtons に渡す props を抽出します。
必要な props は「title」(記事のタイトル)と「__metadata.urlPath」(記事の URL)です
2.2 ShareButtons.js の新規作成
渡された props を使い各 SNS ボタンを生成し、リスト化します。
2.3 _posts-page.scss の新規作成
シェアボタンを横並びとするために flex を設定します。
また、Stackbit デフォルトの css を調整します。
具体的には、button の box-shadow と list のリストマークの無効化です。
3.実装の要点
- post.js 内で必要なデータ、「title」,「URL」を抽出し ShareButtons に渡す。
- 必要な SNS ボタンとアイコンを「react-share」から import する。
- Stackbit のデフォルト css が邪魔なので、適宜、上書きする。
- JSX で list を作成する時は map を使用して記述量を抑える。
完成品
まとめ
便利なライブラリreact-share」を使用することで容易に SNS シェアボタンを導入できました。車輪の再発明は極力控えて、いろんなライブラリを探してブログをバージョンアップしていきたいですね！
