Gatsby Blog Social Share Buttons

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