Gatsby で SNS 対応

September 22, 2019

SNS対応やることリスト

SNSシェアボタンの追加する
自分のSNSリンクを追加する
OGPタグの確認

手順

1. シェアボタンを追加する

react-share を使います。SNS 各社の公式のものではないので Facebook や Twitter の API に大きな変更があると使えなくなってしまう可能性はありますが、差し当たりサクッと実装できるのがいいですね！

インストールします。

yarn add react-share
eslint に「型用のライブラリありません？yarn add @types/react-share を試しては？」と提案されたので実行しました。

(開発環境でしか必要ないので -D フラグを付けています。)

yarn add -D @types/react-share

Share というコンポーネントを新規で作成し、現状のページやタイトルを探して追記しました。

src/templates/blog-post.js

<Share articleUrl={this.props.location.href} articleTitle={post.frontmatter.title} />

Share コンポーネントの中身はこんな感じになりました。

src/components/share.js

<FacebookShareButton url={articleUrl}>
  <FacebookIcon size={32} round />
</FacebookShareButton>
<TwitterShareButton title={articleTitle} url={articleUrl} via='wisetlaloc'>
  <TwitterIcon size={32} round />
</TwitterShareButton>

Github, Twitter, Qiita を載せることにしました。 Github と Twitter は FontAwesome を使います。Qiita は svg 形式を好んで FontAwesome の虫メガネのアイコン fa-search を使ってそれっぽい配色にされている方も見かけましたが、Qiita 公式が配布しているものを利用しましょう。(Qiita を表すために偽のロゴを勝手に作っているような状態なので、よくないと思います。) ブランドガイドライン - Qiita:Supportはこちらです。png だけど仕方ありません。

Github, Twitter のリンクを追加する

react-fontawesome を使います。

インストール

基本的に react で FontAwesome を使いたいときは

@fortawesome/fontawesome-svg-core
@fortawesome/free-solid-svg-icons
@fortawesome/free-brands-svg-icons

以上、3つが必要のようです。今回の場合はさらに追加でブランドロゴ用のフォントパッケージ @fortawesome/free-brands-svg-icons も追加しましょう。

↓コピペ用ワンライナー

yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome @fortawesome/free-brands-svg-icons

自己紹介用コンポーネント (bio.js) に追加する。

src/components/bio.js

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faGithubSquare, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
... 中略 ...

<a href={`https://github.com/${social.github}`} style={{ boxShadow: `none` }} >
  <FontAwesomeIcon
    icon={faGithubSquare}
    style={{
      color: `var(--github-square)`,
      width: `32px`,
      height: `32px`,
      marginRight: `4px`,
    }}
  />
</a>
<a href={`https://twitter.com/${social.twitter}`} style={{ boxShadow: `none` }} >
  <FontAwesomeIcon
    color="#3eaded"
    icon={faTwitterSquare}
    style={{
      width: `32px`,
      height: `32px`,
      marginRight: `4px`,
    }}
  />
</a>

Qiita のリンクを追加する

Qiita に関しては全く記事をあげたことがないので、載せる意味もあんまりないですが、一応追加しました。ブランドガイドライン - Qiita:Support からダウンロードしたロゴをブログの著者近影と同じディレクトリに入れて、GraphQL のクエリをいじって、著者近影と同様に呼び出しました。

src/components/bio.js

<a href={`https://qiita.com/${social.qiita}`} style={{ boxShadow: `none` }} >
  <Image
    fixed={data.qiita.childImageSharp.fixed}
    alt='qiita'
    style={{
      borderRadius: `4px`,
      padding: `2px`,
      marginBottom: 0,
    }}
  />
</a>