ryokatsu.dev

SNSアイコンを表示してみた

とりあえずTwitterとはてぶアイコンを作ってみた。

Twitter

react-shareをインストールする。

 yarn add react-share

react-shareは以下のソーシャルアカウントを、簡単に表示してくれる。

SNSアイコン

今回は、Twitterだけ表示するので以下のようにimportする。

blog-post.tsx

import {
  TwitterShareButton,
  TwitterIcon
} from 'react-share';

...

<TwitterShareButton title={post.frontmatter.title} url={url} className="mr-2">
  <TwitterIcon size={40} round />
</TwitterShareButton>

TwitterShareButtonのtitleは、h1属性で使われているpost.frontmatter.titleの情報をそのまま使う。

const post = this.props.data.markdownRemark
const siteTitle = this.props.data.site.siteMetadata.title
const { previous, next } = this.props.pageContext

値自体はGraphQLの中に入っているぽい。

はてぶアイコン

はてぶアイコンは以下をそのままコピペした。

<Helmet>
<script type="text/javascript" src="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async" />
</Helmet>
<a
  href="http://b.hatena.ne.jp/entry/"
  className="hatena-bookmark-button"
  data-hatena-bookmark-layout="vertical-normal"
  data-hatena-bookmark-lang="ja"
  title="このエントリーをはてなブックマークに追加"
  >
  <img
    src="//b.st-hatena.com/images/entry-button/button-only@2x.png"
    alt="このエントリーをはてなブックマークに追加"
    width="20"
    height="20"
    style={{border: 'none'}}
  />
</a>

まずreact-helmetではてぶのアイコンで使うJSを読み込ませてアイコン部分のHTMLをベタ書きする。

※いずれコンポーネント化して整理したい。。

これだけで後はogp系を管理するseo.tsxを使ってogp対応は完了する。

現在のパスを取得する

Gatsbyで現在のURL取得するときはどうやってやるんだろうと思い、以下の記事にであった。

How to Get the Current Page URL in Gatsby

これの対応1の方法で現在のURLを取得できた。

const url = typeof window !== 'undefined' ? window.location.href : '';

TODO

  • SNSアイコンの別コンポーネント化
  • facebookアイコン？ （自分がやっていないのでどうしようか。）
  • 全く関係ないがcssをリファクタリングしなきゃ