Blog A.Wolf

Blog Posts

No results for 'undefined'Powered by Algolia

How to add share button to Gatsby blog?

April 26th, 2019 - 4 min read

Note 17.01.2020: There is a new post "Using AddThis Gatsby Theme to Add Share Buttons to Your Gatsby Blog" about a Gatsby Theme that I've created.

That's probably a better option to implement AddThis. It's pretty straight forward: Install theme dep. & add your publicId to the theme config and you're ready. In the below post it's slightly more work but you're getting the same result.

There are at least two ways how we can add a social share button to our blog. One is to use React-share component but this requires some work to setup and it is pretty limited in the available services. This was the first version I have used which is OK and should be used if you need more freedom in the styling - I think the flexibility is higher than the next solution.

Another option is to use the free AddThis service so we can add a customizable share menu. During setup you can configure the look and feel of the button e.g. change the location, make it collapsible etc. You can also modify this with the AddThis web app later - so it's OK to go with the defaults.

The great thing with this is that the user can pick from a lot of services with a show more button and you can customize the directly visible share buttons as you like e.g. I moved Twitter on top & arranged the others by my personal priority.

Adding to Gatsby

We're adding the AddThis script tag to the body by copying html.js from ./cache/html.js to ./src/html.js as mentioned here.

Next we're adding the script tag that we got from AddThis html integration to html.js like this:

// ...
  <body>
    { /* ... other stuff here that we don't need to modify */ }
    {props.postBodyComponents}
    {/* <!-- Go to www.addthis.com/dashboard to customize your tools --> */}
    <script
      type="text/javascript" 
      src="//s7.addthis.com/js/300/addthis_widget.js#pubid=<your-public-id>"
    />
  </body>
// ...

Now it should render the share buttons similar to the following screenshot (depends on your configuration)

Screenshot share buttons

Configuring AddThis in Gatsby

By adding a global variable addthis_share = {} inside our Layout.js file we can customize the share link that's created. The variable can be added in a script tag inside React-hemlet like this:

<script type="text/javascript">
{`
    var addthis_share = {
        url: "${data.site.siteMetadata.siteUrl}${slug}",
        title: "${title.split('|')[0].trim()}",
        passthrough : {
            twitter: {
                via: "awolf81",
                // hashtags: "javascript,react"
            }
        },
        media: "${twitterCardImage}"
    }
`}
</script>

The splitting in title is needed in my case as I'm passing the title like Post title | Blog Alexander Wolf to the Layout component and splitting by | and getting the first element is only using the first part of the string.

Media is optional and I have to check where it is used. The passthrough key is for customizing twitter - e.g. adding via @awolf81 and hashtags if you like.

For more details to addthis_share variable please have a look in the docs and for controlling twitter content please have a look in the academy post here.

Conclusion

I really like the service and I'll do more tests with it. But I think it's working as expected - not tested all services but the one I care about.

One thing I've noticed is that if I'm using the AddThis option Hide on homepage the menu is not showing on each blog post and it required a reload of the page to show it. That's why I disabled the option. Maybe I check this later - for now it's OK to have the share buttons on every page.

If you like to have a look at the source code you can find it on Github awolf81/my-blog.

©2024 Alexander Wolf