Gatsby Blog Social Share Buttons
Add social media share buttons to each of you're blog posts in Gatsby.js
October 07, 2019 - 2 min read
Here’s what the end result will look like

Let’s Get Started
Installing Dependencies
First off we’ll need to npm package react-share
yarn add react-share
or
npm install --save react-share
Project Structure
Create a new file in your src/components/
directory called ShareButtons.js
Creating the component
import React from 'react'
import {
FacebookShareButton,
FacebookIcon,
LinkedinShareButton,
LinkedinIcon,
TwitterShareButton,
TwitterIcon,
WhatsappShareButton,
WhatsappIcon,
RedditShareButton,
RedditIcon
} from 'react-share'
export const ShareButtons = ({ twitterHandle, url, title, tags }) => (
<div>
<FacebookShareButton url={url}>
<FacebookIcon />
</FacebookShareButton>
<TwitterShareButton url={url} title={title} via={twitterHandle} hashtags={tags}>
<TwitterIcon />
</TwitterShareButton>
<LinkedinShareButton url={url}>
<LinkedinIcon />
</LinkedinShareButton>
<RedditShareButton url={url} title={title}>
<RedditIcon />
</RedditShareButton>
<WhatsappShareButton url={url} title={title}>
<WhatsappIcon />
</WhatsappShareButton>
</div>
)
export default ShareButtons
Adding the component to our blog template
This will depend on how exactly you’re doing you gatsby blog
Creating the graphql query
Add the following to your gatsby-config.js
file.
// gatsby-config.js
module.exports = {
siteMetadata: {
// ....
siteUrl: `https://glweems.com`
}
// ....
}
now we can query for the domain through graphql
Add this to your query your are currently using to create your pages
query {
# ....
site {
siteMetadata {
domain: siteUrl
}
}
}