GatsbyJSにはてなブックマークとPocketのシェアボタンを設置した

11680 ワード
React pocket hatenabookmark JavaScript gatsby JavaScript テキストリンク

最近流行りの静的サイトGeneratorといえばGatsbyJSです。
Reactで実装されデフォルトでSPAとなっているため、ページ表示が爆速などの利点があります。
今回ははてなブックマークと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

はてブについて

はてブのボタンは「Font Awesome などアイコンフォントにないはてなブックマークを自力で追加する簡単な方法」を利用させていただきました。

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と比べてもあまり違和感はないですね。