GatsbyJS에 Hatena 북마크와 Pocket 공유 버튼을 설치했습니다.

최근 유행의 정적 사이트 Generator라고 하면 GatsbyJS 입니다.
React로 구현되어 기본적으로 SPA가 되어 있으므로 페이지 표시가 폭속 등의 이점이 있습니다.
이번에는 Hatena 북마크와 Pocket 공유 버튼을 설치했습니다.

구현한 jsx

React라는 것으로 jsx의 컴포넌트 형태로 구현합니다.

PostShare.jsx

    import React from "react";
    import { FaGetPocket } from 'react-icons/fa';
    import "./PostShare.css";
    ...

    const formatSiteUrl = (siteUrl, pathPrefix, path) =>
      siteUrl + (pathPrefix === "/" ? "" : pathPrefix) + path;

    class PostShare extends React.Component {
      render() {
        const { postNode, postPath, config } = this.props;
        const post = postNode.frontmatter;
        const url = formatSiteUrl(config.siteUrl, config.pathPrefix, postPath);
        ...
        return (
          <section className="share">
            <h4>Share this post</h4>
            <div style={{ display: "flex" }}>
            ...
              <div>
                <a className="HatenaShareButton" href={"http://b.hatena.ne.jp/add?mode=confirm&url="+url+"&title="+post.title} target="_blank" rel="nofollow">
                </a>
              </div>
              <div>
                <a className="PocketShareButton" href={"http://getpocket.com/edit?url="+url+"&title="+post.title} rel="nofollow" rel="nofollow" target="_blank">
                  <FaGetPocket />
                </a>
              </div>
            </div>
          </section>
        );
      }
    }

    export default PostShare;

덧붙여 이번은 Pocket과 은행 북마크 버튼을 실장했습니다. (해외의 레이아웃을 사용하면 디폴트로 들어가지 않았다… Twitter나 Facebook은 있었는데)
내용은 간단하고 a 태그로 소셜 링크를 붙이고 있을 뿐입니다.
이 파일을 templates 폴더에서 import합시다.

post.jsx

...
import PostShare from "../components/PostShare/PostShare";
...
          <PostFooter>
            <AuthorImage author={authorData} />
            <AuthorInfo prefix="/author" author={authorData} />
            <PostShare
              postNode={postNode}
              postPath={location.pathname}
              config={config}
            />
...

CSS

Pocket 정보

Pocket은 스타일이 Font Awesome에 들어 있습니다. 그래서 그것을 그대로 사용했습니다. GatsbyJS는 React제이므로 react-icons를 사용할 수 있습니다. 그러므로 아래의 커맨드로 인스톨한 후, import 하면 됩니다.

    npm install react-icons --save

Hatebu 정보

하테부의 버튼은 「 Font Awesome과 같은 아이콘 글꼴에없는 Hatena 북마크를 자체적으로 추가하는 쉬운 방법 」를 이용하였습니다.

PostShare.css

    ...
    .HatenaShareButton:before {
       content: "B!";
       font-family: Verdana;
       font-weight: bold;
        font-size: 0.9em;
        border: solid 3px #6091d3;
        border-radius: 4px;
        color: white;
        background: #6091d3;
        position: relative;
        top: -1px;
    }
    ...

구현 결과

Share this post의 B! 및 Pocket 버튼이 구현 예입니다. 원래부터 있던 Twitter나 Facebook과 비교해도 그다지 위화감은 없네요.