All Articles

SNSシェアボタンの設置 3(はてブボタン)

2019/08/11

やりいたいこと

2019 08 11 23 14 25

SNSシェアボタンに「はてブに追加」ボタンを配置する。
react-shareには、内蔵されていないため、はてブ公式のシェアリンクと画像を自作した「ShareButtons.js」のコンポーネントに追加する。

はてブの公式シェアボタンのページ
https://b.hatena.ne.jp/guide/bbutton

takumon Blog さんの以下のページを参考
https://takumon.com/2018/09/16/#はてブ追加ボタン

やること

ShareButtons.js

import Helmet from 'react-helmet'; // こいつを追加

<div className={styles['sharebuttons']}>

    <TwitterShareButton  className={styles['sharebuttons__twitter']} title={shareTitle + "\n"} via="kiotera_tech" url={shareUrl}>
        <TwitterIcon size={40} round />
    </TwitterShareButton>
// 省略,,,
// --- 以下を追加する ---

    <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="touch"
    data-hatena-bookmark-lang="ja"
    title="このエントリーをはてなブックマークに追加"
    >
    <img
        width="40"
        height="40"
        src="https://b.st-hatena.com/images/v4/public/entry-button/button-only@2x.png"
        alt="このエントリーをはてなブックマークに追加"
        style={{border: 'none'}}
        />
    </a>

// --- ここまで ---
    
    </div>

);

関連リンク集