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

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