やりたいこと
SNSシェアボタンの設置 Twitter,Facebook,Emailのシェアボタンを設置する
- SNSシェアボタンの設置 1(react-share) ← いまココ
- SNSシェアボタンの設置 2(react-share)
- SNSシェアボタンの設置3(はてブボタン)
やること
- react-shareの導入
- 画面に各SNSシェアのコンポーネントを配置
1. react-shareの導入
yarn add react-share
2. 画面に各SNSシェアのコンポーネントを配置
コンポーネントの配置
// 各ボタンと、対応するアイコンをimportする
import {
FacebookShareButton,
FacebookIcon,
TwitterShareButton,
TwitterIcon,
EmailShareButton,
EmailIcon,
} from 'react-share';
// 配置の仕方
<TwitterShareButton className={styles['post__footer-sns-twitter']} title={title + "\n"} via="kiotera_tech" url={url + slug}>
<TwitterIcon size={32} round />
</TwitterShareButton>
<FacebookShareButton className={styles['post__footer-sns-facebook']} url={url + slug} quote={title}>
<FacebookIcon size={32} round />
</FacebookShareButton>
<EmailShareButton className={styles['post__footer-sns-email']} subject={title} body={url + slug}>
<EmailIcon size={32} round />
</EmailShareButton>
コンポーネントを横並びにする
.post {
&__footer {
&-sns {
&-twitter,
&-facebook,
&-email {
display: inline-block; // 横並びになるよう指定
margin-right: 10px; // 右側余白を指定
}
}
}
追記
ビルド後に、本番環境で、SNSシェアボタンからツイートしてみると、
urlの表示が開発環境のときと異なっていた。
そのため、以下を修正して対応
config.js
url: 'https://kioteratech.netlify.com',
↓
url: 'https://kioteratech.netlify.com/',
関連リンク集
- SNSシェアボタンの設置 1(react-share) ← いまココ
- SNSシェアボタンの設置 2(react-share)
- SNSシェアボタンの設置3(はてブボタン)