SNS シェアボタンを最適な位置に再配置しました！
こんにちは、junwatanabe72 です。
以前ブログに設置した SNS シェアボタンですが、設置箇所が良くないみたい。。。
他の方のブログを拝見して気づいたのですが、10/10 の確率（100%）で記事最下段に配置されていました。
そりゃそうですよね。記事を読んでからシェアするかどうか判断するわけで。
というわけで適正な位置と思われる「記事の最下段」に SNS シェアボタンを移動させます。
加えて、行動提起テキストも追記します。
要件
- SNS シェアボタンを記事の最下段（日付の下、関連動画の上）に設置する。
- 行動提起テキストを SNS ボタンの上部に追記する。
- 行動提起テキストは「{title}を読んでいただきありがとうございます！記事が参考になったらシェアしてね！」とする。
実装
1.ファイルの編集及び新規作成
編集するファイル：「src/layouts/post.js」,「src/components/atoms/ShareButtons.js」,「sass/imports/_share-buttons.scss」
1.1 post.js の編集
header 下に配置していた「ShareButtons」を footer 下に移動させます。
props に「commentElement」(行動提起テキスト)を追加します。
こうすれば、SNS シェアボタンだけを表示させたい場合も props の有無で切分け可能です。
import React from 'react';
import _ from 'lodash';
import moment from 'moment-strftime';
import { Layout } from '../components/index';
import RelationContent from '../components/atoms/RelationContent';
import ShareButtons from '../components/atoms/ShareButtons';
import { withPrefix, markdownify } from '../utils';
export default class Post extends React.Component {
render() {
const data = _.get(this.props, 'data');
const config = _.get(data, 'config');
const page = _.get(this.props, 'page');
const title = _.get(page, 'title');
const subtitle = _.get(page, 'subtitle');
const image = _.get(page, 'content_img_path');
const imageAlt = _.get(page, 'content_img_alt', '');
const date = _.get(page, 'date');
const dateTimeAttr = moment(date).strftime('%Y-%m-%d %H:%M');
const formattedDate = moment(date).strftime('%A, %B %e, %Y');
const markdownContent = _.get(page, 'markdown_content');
const posts = _.orderBy(_.get(this.props, 'posts', []), 'date', 'desc');
const { __metadata } = page;
const URL = `${HOST}${__metadata.urlPath}`;
// 追加
const commentElement = (
<h6 className="share-text">
<p>{title}</p>
<div>を読んでいただきありがとうございます！</div>
<div>
記事が参考になったら<span className="share-span">シェア</span>してね！
</div>
</h6>
);
// 追加
return (
<Layout page={page} config={config}>
<article className="post post-full">
<header className="post-header inner-sm">
<h1 className="post-title underline">{title}</h1>
</header>
// もともとの位置
{image && (
<div className="post-image">
<img src={withPrefix(image)} alt={imageAlt} />
</div>
)}
{markdownContent && <div className="post-content inner-sm">{markdownify(markdownContent)}</div>}
<footer className="post-meta inner-sm">
<time className="published" dateTime={dateTimeAttr}>
{formattedDate}
</time>
</footer>
// 移動
<div className="inner-sm">
<ShareButtons url={URL} text={title} commentElement={commentElement} />
</div>
// 移動
<RelationContent articles={relationArticles} keyword={subtitle[0]} />
</article>
</Layout>
);
}
}
1.2 ShareButtons.js の編集
props 「commentElement」を追加しました。
import React from 'react';
import {
HatenaShareButton,
HatenaIcon,
FacebookMessengerIcon,
FacebookMessengerShareButton,
LineShareButton,
LineIcon,
EmailShareButton,
EmailIcon,
FacebookIcon,
FacebookShareButton,
TwitterIcon,
TwitterShareButton
} from 'react-share';
const ShareButtons = ({ text, url, commentElement }) => {
const buttons = [
<TwitterShareButton url={url} title={text} className="disable-box-shadow">
<TwitterIcon size={32} round={true} />
</TwitterShareButton>,
<FacebookShareButton url={url} title={text} className="disable-box-shadow">
<FacebookIcon size={32} round={true} />
</FacebookShareButton>,
<FacebookMessengerShareButton url={url} title={text} className="disable-box-shadow">
<FacebookMessengerIcon size={32} round={true} />
</FacebookMessengerShareButton>,
<LineShareButton url={url} title={text} className="disable-box-shadow">
<LineIcon size={32} round={true} />
</LineShareButton>,
<EmailShareButton url={url} title={text} className="disable-box-shadow">
<EmailIcon size={32} round={true} />
</EmailShareButton>,
<HatenaShareButton url={url} title={text} className="disable-box-shadow">
<HatenaIcon size={32} round={true} />
</HatenaShareButton>
];
return (
<>
// 追加
{commentElement}
// 追加
<ul className="share-layout">
{buttons.map((button, num) => (
<li key={num} className="share-button-padding">
{button}
</li>
))}
</ul>
</>
);
};
export default ShareButtons;
1.3 _share-buttons.scss の編集
レイアウトの都合で share-layout を flex-end に修正し、右寄せにしました。
また、各ボタンにホバー要素を追加しました。
/**
* share-buttons
*/
.share-layout {
display: flex;
justify-content: flex-end;
align-items: center;
list-style-type: none;
padding: 0px !important;
}
.share-text {
text-align: end;
}
.share-span {
color: red;
}
.disable-box-shadow {
box-shadow: none !important;
&:hover {
opacity: 0.5;
transition: 0.5s;
}
}
.share-button-padding {
padding-right: 15px;
}
完成品
まとめ
react の場合、一旦コンポーネントを作成してしまえば、配置の変更は比較的簡単にできます。
まあ、そうならないように先人たちの作品をたくさん勉強しないと。ですね！
