やりいたいこと
SNSシェアボタンに「はてブに追加」ボタンを配置する。
react-shareには、内蔵されていないため、はてブ公式のシェアリンクと画像を自作した「ShareButtons.js」のコンポーネントに追加する。
はてブの公式シェアボタンのページ
https://b.hatena.ne.jp/guide/bbutton
takumon Blog さんの以下のページを参考
https://takumon.com/2018/09/16/#はてブ追加ボタン
- SNSシェアボタンの設置 1(react-share)
- SNSシェアボタンの設置 2(react-share)
- SNSシェアボタンの設置 3(はてブボタン)← いまココ
やること
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>
);
関連リンク集
- SNSシェアボタンの設置 1(react-share)
- SNSシェアボタンの設置 2(react-share)
- SNSシェアボタンの設置 3(はてブボタン)← いまココ