Added option to share the blog on any social media | @dsabyte.com

Today i have added an option to share the blog on the social media directly. To make this happen i have generated the actual url of the blog and added this url to each social media shareing url.

Teach stack

• reactjs
• nextjs
• nodejs
• expressjs
• chakra-ui
• react-icons

Share

To use this feature, go to this blog and scroll to the bottom.

Then click on the share icon

How i built this?

Workflow

• show share icon
• if user clicked on the share icon then show modal
• then user can click on the social media icons to share the blog

import {
  IconButton,
  Icon,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalCloseButton,
  useDisclosure,
  HStack,
} from "@chakra-ui/react";

import { FiShare2 } from "react-icons/fi";
import { FaLinkedin, FaTwitter, FaFacebook } from "react-icons/fa";
import { RiWhatsappFill } from "react-icons/ri";

const SocialIconLink = ({ url, as, color }) => (
  <a target="_blank" href={url}>
    <Icon color={color} w="30px" h="30px" as={as} />
  </a>
);

export default function SocialShare({ url }) {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <>
      <IconButton
        onClick={onOpen}
        aria-label="Search database"
        icon={<Icon as={FiShare2} />}
        variant="ghost"
      />

      <Modal isOpen={isOpen} onClose={onClose} pb="50px">
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Share on social media</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <HStack justifyContent="center">
              <SocialIconLink
                as={FaFacebook}
                url={`https://www.facebook.com/sharer/sharer.php?u=${url}`}
                color="#1244a1"
              />
              <SocialIconLink
                as={FaLinkedin}
                url={`https://www.linkedin.com/sharing/share-offsite/?url=${url}`}
                color="#002569"
              />
              <SocialIconLink
                as={FaTwitter}
                url={`https://twitter.com/intent/tweet?url=${url}`}
                color="#328dc2"
              />
              <SocialIconLink
                as={RiWhatsappFill}
                url={`https://api.whatsapp.com/send?text=${url}`}
                color="#42ba2d"
              />
            </HStack>
          </ModalBody>
        </ModalContent>
      </Modal>
    </>
  );
}