How to Add Social Media Sharing in a Next.js Blog

Adding social media sharing options to your blog can significantly enhance its reach and engagement. In this blog post, we’ll walk through creating a Next.js component that allows users to share blog posts via popular social media platforms like Twitter (X), Facebook, LinkedIn, and also provides a “Copy Link” option.

Prerequisites

• Basic knowledge of Next.js and React.js.

• A Next.js project set up.

Step 1: Install Required Dependencies

Next.js provides built-in support for modern React features, so no additional libraries are required for this implementation. However, for icons, we’ll use Lucide React, a popular icon library:

npm install lucide-react

Step 2: Creating the BlogEngagementDetails Component

Let’s create a new file inside your components directory, e.g., components/BlogEngagementDetails.js, and add the following code:

"use client";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  Share2,
  Eye,
  Link as LinkIcon,
  Twitter,
  Facebook,
  Linkedin,
  Check,
} from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
export default function BlogEngagementDetails({ blog }) {
  const [copied, setCopied] = useState(false);
  const shareUrl = `https://yourblogsite.com/blog/${blog.slug}`;
const handleCopyLink = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (error) {
      console.error("Failed to copy link:", error);
    }
  };
return (
    <div className="w-full border-t border-b p-4 flex items-center justify-between">
      <div className="flex items-center gap-4">
        <div className="flex items-center gap-2">
          <Eye className="w-5 h-5" />
          <span className="text-sm font-medium">{blog.reads}</span>
        </div>
      </div>
      <div className="flex items-center gap-2">
        <DropdownMenu>
          <DropdownMenuTrigger>
            <Button variant="ghost" size="icon" aria-label="Share">
              <Share2 className="w-5 h-5" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuItem onClick={handleCopyLink}>
              <Button variant="ghost" size="icon" aria-label="Copy link">
                {copied ? <Check className="text-green-500" /> : <LinkIcon />}
              </Button>
              {copied ? "Link Copied!" : "Copy Link"}
            </DropdownMenuItem>
            <DropdownMenuItem asChild>
              <a
                href={`https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}&text=${encodeURIComponent(blog.title)}`}
                target="_blank"
                rel="noopener noreferrer"
              >
                <Button variant="ghost" size="icon" aria-label="Share on Twitter">
                  <Twitter />
                </Button>
                Share on X
              </a>
            </DropdownMenuItem>
            <DropdownMenuItem asChild>
              <a
                href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`}
                target="_blank"
                rel="noopener noreferrer"
              >
                <Button variant="ghost" size="icon" aria-label="Share on Facebook">
                  <Facebook />
                </Button>
                Share on Facebook
              </a>
            </DropdownMenuItem>
            <DropdownMenuItem asChild>
              <a
                href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl)}`}
                target="_blank"
                rel="noopener noreferrer"
              >
                <Button variant="ghost" size="icon" aria-label="Share on LinkedIn">
                  <Linkedin />
                </Button>
                Share on LinkedIn
              </a>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  );
}

Explanation

1. Clipboard Copy Functionality:

• Uses navigator.clipboard.writeText() to copy the blog URL.

• A confirmation message “Link Copied!” appears temporarily.

2. Dropdown Menu for Sharing:

• Social media share buttons link to Facebook, Twitter, and LinkedIn.

• encodeURIComponent() ensures the URLs are properly formatted.

3. Accessibility Enhancements:

• aria-label attributes improve usability for screen readers.

Step 3: Using the Component

You can now use the BlogEngagementDetails component inside your blog page:

import BlogEngagementDetails from "@/components/BlogEngagementDetails";
export default function BlogPost({ blog }) {
  return (
    <div>
      <h1>{blog.title}</h1>
      <p>{blog.content}</p>
      <BlogEngagementDetails blog={blog} />
    </div>
  );
}

Conclusion

In this tutorial, we’ve built a simple yet powerful social sharing feature in a Next.js blog. This feature allows users to share blog posts across popular social platforms and copy links for easy sharing. Enhancing user experience with such features can boost traffic and engagement on your blog.

🔥 Found this blog post helpful? 🔥

If you enjoyed this article and found it valuable, please show your support by clapping 👏 and subscribing to my blog for more in-depth insights on web development and Next.js!

Subscribe here: click me

Your encouragement helps me continue creating high-quality content that can assist you on your development journey. 🚀