Using AddThis tools on your blog requires only a few steps to implement.

In this post, I’ll break down how to use the AddThis Gatsby Theme to add AddThis tools to your Gatsby blog.

1. Blog Setup

If you already have a blog, you can skip this first step. To start with a new blog, you can create one by running the command gatsby new my-themed-blog https://github.com/gatsbyjs/gatsby-starter-blog-theme.

Note: You need the Gatbsy-Cli installed to run gatsby new my-themed-blog in your terminal. If you don't have it, you can install it with npm install -g gatsby-cli.

Go into the newly created project cd my-themed-blog and add the theme and dotenv as dependencies to your blog by running yarn add @awolf81/gatsby-theme-addthis dotenv or npm i @awolf81/gatsby-theme-addthis dotenv.

Configure the AddThis Theme

Next add the following configuration to your gatsby-config.js:

require('dotenv').config()
 
module.exports = {
  plugins: [
    //... other plugins ...
    { 
      resolve: `@awolf81/gatsby-theme-addthis`, 
      options: {
        publicId: process.env.ADDTHIS_PUBLIC_ID
      } 
    }
  ],
}

The first line in the configuration require('dotenv').config() is loading your .env file that we'll create next. Dotenv will load the environment keys so you can access it with process.env.ADDTHIS_PUBLIC_ID.

In the plugins array, we're resolving the Theme with the only required option. To obtain the publicId, go to your AddThis dashboard and after clicking Get The Code, look for the script tag that's required to load AddThis. The script tag is not required with the Theme as it's loading the script for you.

So the URL will look like //s7.addthis.com/js/300/addthis_widget.js#pubid=ra-1234abc and ra-1234abc is the public id that you have to add to the Theme option.

Now create an .env file in your project root with the following content:

# .env content 
ADDTHIS_PUBLIC_ID=ra-1234abc

Why use an .env file?

You could hard-code the value directly into the plugin option, but having it in a separate file is always a good idea so you have all your keys in one place. That way, it’s more maintainable than having to search where you added the keys.

It would be also possible to store the id into a js file and export it. Here’s an example:

export default {
  publicId: 'ra-1234abc',
  googleAnalytics: '...',
  // ...
};

// or as a named export
export const publicId = 'ra-1234abc'

And use it in gatsby-config.js:

import keys from './public-keys';
import { publicId } from './public-keys';

console.log(keys.publicId, publicId);

If you're using an .env file, don't forget to add it to your .gitignore file and copy the file to an .env.example file with dummy keys. That way, the next time your repository is cloned it's obvious that the key is required.

As an optional step, it would be beneficial to have an assertion in your gatsby-config.js file to display an error if the key is missing and the code for this would be:

const assert = require('assert')
require('dotenv').config()

assert(process.env.ADDTHIS_PUBLIC_ID, "Please add ADDTHIS_PUBLIC_ID to .env file so AddThis Share will work");

This is using NodeJs' assertion library and checks if ADDTHIS_PUBLIC_ID is defined. If it's not, it will stop the Gatsby build and display the error message from the assert function call.

2. Test the share buttons

Finally, everything is in place and we can test our blog and run yarn develop. Once the build is ready, navigate to localhost:8000 and the share buttons should be displayed, similar to in the following screenshot (the exact look depends on your AddThis configuration):

If you don't see the buttons, please check that your public id is correctly added to the theme option.

Advanced configuration of AddThis

In your layout component, you can load the AddThisOptions component with import AddThisOptions from '@awolf81/gatsby-theme-addthis/components/AddThisOptions'.

Add <AddThisOptions options={exampleOptions} /> to your rendered JSX.

With exampleOptions you can add options to the addthis_config Variable to configure the AddThis buttons.

For example, it's possible to customize the share text or add your Twitter handle with via @ with the passthrough option. More details to the tweaking of Twitter can be found in the post Controlling the Text, and "via @" user on Twitter

Conclusion

This theme is an alpha version with features being improved regularly. If you need a feature, or if you notice something to improve, please create a Github issue at github/addthis-theme.

If you don't want to use a theme you could manually implement AddThis, as explained in the post How to add a share button to Gatsby blog. This way is more work, but you can control everything as needed.

The source code from this post can be found in the addthis-theme-example-blog repository.