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>
</>
);
}
Top comments (0)