Boost Blog Traffic: Reasons to Add Social Share Buttons Now

Table of Contents

Two popular NPM Packages are available
Available Share Buttons
Let’s start with React-Share-Kit
Import new Component into Blog Page
The second Component built on React-share-lite
Final Result
Change default share button size to 44 px
Cloudapp-dev, and before you leave us

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.

Here is the GitHub repo with the full code, where you can see the two new components.

Example page hosted on Vercel -> https://nextjs14-azureb2c-prisma.vercel.app/

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

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 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

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

<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>