All Articles

SNSシェアボタンの設置 1(react-share)

2019/08/11

やりたいこと

SNSシェアボタンの設置 Twitter,Facebook,Emailのシェアボタンを設置する

やること

  1. react-shareの導入
  2. 画面に各SNSシェアのコンポーネントを配置

1. react-shareの導入

yarn add react-share

2. 画面に各SNSシェアのコンポーネントを配置

コンポーネントの配置

2019 08 11 17 32 07

// 各ボタンと、対応するアイコンを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>

コンポーネントを横並びにする

2019 08 11 17 31 39

  .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/',

関連リンク集