Social Sharing with Nextjs 14

Integrating social share buttons on your blog post can significantly increase reach and visibility by making it easy for readers to share, boosting traffic, improving SEO, providing social proof, and enhancing brand engagement.

These buttons make it easy for readers to share your content on their social media profiles, potentially attracting a wider audience. The more your content is shared, the higher its chances of going viral, driving more traffic to your site. Social share buttons also improve your blog’s SEO by generating more backlinks and increasing your content’s engagement metrics. Additionally, they provide social proof, showing new visitors that your content is popular and worth reading. Finally, these buttons can enhance your brand’s presence on social media, fostering community engagement and loyalty.

Not a Member? Read for FREE here.

Here, you can find the link to the corresponding GitHub repository and the example page, where you can spoil this story’s final result with the new Social Sharing Feature

Two popular NPM Packages are available

React-Share-Kit (Great and easy solution if you need to use share count)React-Share-Lite (Lightweight solution, higher performance, no share count, just sharing)npm install react-share-kit

or

npm install react-share-lite

Available Share Buttons

Let’s start with React-Share-Kit

I create a new Component for each React-Share Package.

Under src/components/sharing/ I create the file socialsharing.component.tsx for React-Share-Kit. You can see that I am using “Twitter, Facebook, Linkedin and Whatsapp”. For Facebook, we can use the count feature as well, but in this case, we need the “appId” and the “appSecret” from Facebook.

“use client”;
// Social Sharing
import { TwitterShare } from “react-share-kit”;
import { FacebookShare, FacebookCount } from “react-share-kit”;
import { LinkedinShare } from “react-share-kit”;
import { WhatsappShare } from “react-share-kit”;

interface ShareProps {
title: string;
slug: string;
hashtags?: string;
locale: string;
}

export default function SocialSharing({
title,
slug,
hashtags,
locale,
}: ShareProps) {
return (
<div className=”flex justify-center”>
<TwitterShare url={locale + “/” + slug || “”} title={title || “”} />
<FacebookShare
url={locale + “/” + slug || “”}
quote={title || “”}
hashtag={“#react-share-kit”}
/>
<FacebookCount url={locale + “/” + slug || “”} appId=”” appSecret=”” />
<LinkedinShare url={locale + “/” + slug || “”} />
<WhatsappShare
url={locale + “/” + slug || “”}
title={title || “”}
separator=”:: “
/>
</div>
);
}

Import new Component into Blog Page

Now, I will import the new component into the Blog page under src/app/[locale]/[slug]/page.tsx

// Social Sharing
import SocialSharing from “@/components/sharing/socialsharing.component”;

I integrate the component under the Tag Cloud Component. Attributes like title and slug are fetched from Contentful, while I get the locale from the params.

<SocialSharing
slug={params.locale.toString() + “/” + blogPost.slug || “”}
title={blogPost.title || “”}
locale={params.locale.toString()}
/>

The second Component built on React-share-lite

The second component is more or less the same but without the “Count” feature; therefore, the package is lighter and more performant.

“use client”;
// Social Sharing
import { TwitterShare } from “react-share-lite”;
import { FacebookShare } from “react-share-lite”;
import { LinkedinShare } from “react-share-lite”;
import { WhatsappShare } from “react-share-lite”;

interface ShareProps {
title: string;
slug: string;
hashtags?: string;
locale: string;
}

export default function SocialSharingLite({
title,
slug,
hashtags,
locale,
}: ShareProps) {
return (
<div className=”flex justify-center”>
<TwitterShare url={locale + “/” + slug || “”} title={title || “”} />
<FacebookShare
url={locale + “/” + slug || “”}
quote={title || “”}
hashtag={“#react-share-kit”}
/>
<LinkedinShare url={locale + “/” + slug || “”} />
<WhatsappShare
url={locale + “/” + slug || “”}
title={title || “”}
separator=”:: “
/>
</div>
);
}

That’s it. It’s pretty easy, and you can integrate as many Share Buttons as you want to facilitate sharing your content.

Final result

Button Size 64 px

With the size prop you can change the size of the buttons. Defaultsize is 64 px

Change default share button size to 44 px

<div className=”flex justify-center”>
<TwitterShare
url={locale + “/” + slug || “”}
title={title || “”}
size={44}
/>
<FacebookShare
url={locale + “/” + slug || “”}
quote={title || “”}
hashtag={“#react-share-kit”}
size={44}
/>
<FacebookCount url={locale + “/” + slug || “”} appId=”” appSecret=”” />
<LinkedinShare url={locale + “/” + slug || “”} size={44} />
<WhatsappShare
url={locale + “/” + slug || “”}
title={title || “”}
separator=”:: “
size={44}
/>
</div>Size reduce to 44 px

Cloudapp-dev

Thank you for reading until the end. Before you go:

Please support me by clapping and/or following me! 👏Visit cloudapp.dev to learn how we support the dev community worldwide.Or follow us on twitter -> Cloudapp.dev

Boost Blog Traffic: Reasons to Add Social Share Buttons Now was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

​ Level Up Coding – Medium

about Infinite Loop Digital

We support businesses by identifying requirements and helping clients integrate AI seamlessly into their operations.

Gartner
Gartner Digital Workplace Summit Generative Al

GenAI sessions:

  • 4 Use Cases for Generative AI and ChatGPT in the Digital Workplace
  • How the Power of Generative AI Will Transform Knowledge Management
  • The Perils and Promises of Microsoft 365 Copilot
  • How to Be the Generative AI Champion Your CIO and Organization Need
  • How to Shift Organizational Culture Today to Embrace Generative AI Tomorrow
  • Mitigate the Risks of Generative AI by Enhancing Your Information Governance
  • Cultivate Essential Skills for Collaborating With Artificial Intelligence
  • Ask the Expert: Microsoft 365 Copilot
  • Generative AI Across Digital Workplace Markets
10 – 11 June 2024

London, U.K.