Create a Fully Functional Next.js Digital Garden - Part 8 - Adding Social Sharing Buttons
Bannon Tanner - Mon May 22 2023
This post will guide you through the process of integrating social share buttons into a Next.js blog. The purpose of adding these buttons is to make it easier for readers to share blog posts on their social media platforms, thereby increasing the visibility of the blog.
Installing the Required Package
The first step involves installing the react-share package. This package provides a series of components to facilitate the implementation of sharing social media links. It can be installed via npm as follows:
npm i react-share
Creating a Social Share Component
After installing the react-share package, the next step is to create a new component called SocialShare. This component will contain different buttons for sharing the blog post on Facebook, Twitter, LinkedIn, and Reddit.
// @/components/SocialShare.tsx
"use client";
import {
FacebookShareButton,
TwitterShareButton,
LinkedinShareButton,
RedditShareButton,
} from "react-share";
import {
FacebookIcon,
TwitterIcon,
LinkedinIcon,
RedditIcon,
} from "react-share";
import { FacebookShareCount, RedditShareCount } from "react-share";
import styles from "./socialshare.module.css";
export function SocialShare({ url, title }: { url: string; title: string }) {
return (
<div className={styles.socialShare}>
<div className={styles.network}>
<FacebookShareButton
url={url}
quote={title}
className={styles.networkShareButton}
>
<FacebookIcon size={32} round />
</FacebookShareButton>
<div>
<FacebookShareCount url={url} />
</div>
</div>
<div className={styles.network}>
<TwitterShareButton
url={url}
title={title}
className={styles.networkShareButton}
>
<TwitterIcon size={32} round />
</TwitterShareButton>
</div>
<div className={styles.network}>
<LinkedinShareButton
url={url}
title={title}
className={styles.networkShareButton}
>
<LinkedinIcon size={32} round />
</LinkedinShareButton>
</div>
<div className={styles.network}>
<RedditShareButton
url={url}
title={title}
className={styles.networkShareButton}
>
<RedditIcon size={32} round />
</RedditShareButton>
<div>
<RedditShareCount url={url} className={styles.networkShareCount} />
</div>
</div>
</div>
);
}
Adding CSS for the Social Share Component
Once the SocialShare component is ready, it is important to style it to make it visually appealing and consistent with the rest of the blog's design. CSS can be used to achieve this. In the example below, the CSS is targeting the network share buttons and their count displays.
.network {
vertical-align: top;
display: inline-block;
margin-right: 10px;
text-align: center;
}
.networkShareButton {
cursor: pointer;
}
.networkShareButton:hover:not(:active) {
opacity: 0.75;
}
.networkShareCount {
display: inline-flex;
justify-content: center;
white-space: nowrap;
overflow: visible;
width: 0;
margin-top: 3px;
font-size: 12px;
}
Incorporating the Social Share Component into the Posts Page
The final step is to add the SocialShare component to the dynamic posts page. This way, each individual post will have the social share buttons, allowing readers to share the post on their preferred social media platform.
// @/pages/blog/[id]/page.tsx
import { notFound } from "next/navigation";
import { getSortedPostsData, PostData } from "@/lib/posts";
import { SocialShare } from "@/components/SocialShare";
export default async function Post({ params }: { params: { id: string } }) {
const { id } = params;
console.log({ id })
const posts: PostData[] = await getSortedPostsData();
const post = posts.find(
(post) => post.id === id
) as PostData;
if (!posts) return <div>Loading...</div>;
if (!post) { notFound() }
const { title, author, date, content } = post;
return (
<div key={id} className="main">
<h1>{title}</h1>
<h3>
{author} - {date}
</h3>
<div
className="simple-container"
dangerouslySetInnerHTML={{ __html: content }}
></div>
<SocialShare url={`${process.env.SITE_URL}/blog/${id}`} title={title} />
</div>
);
}
// generate route segments
export async function generateStaticParams() {
const posts: PostData[] = await getSortedPostsData();
return posts.map((post) => ({
id: post.id,
}));
}
Conclusion
Adding social share buttons to a Next.js blog post can significantly increase the reach of the content by making it easier for readers to share the post with their networks. This guide provided a step-by-step process on how to achieve this using the react-share package, creating a new SocialShare component, and incorporating it into the dynamic posts page.
Explore the current state of the project and the repository.