Add-This social sharing icons in Hugo Sites

Add-This is one of the most famous service if it comes to social sharing icons. There are tons of features including displaying social counters and picking tons of social media platforms without pain. There are paid plans, but the basic version is free, probably a good reason for it's pupularity. In this article you find a partial you can copy-paste to make the integration of an Add-This-Widget a piece of cake.

For add-this you will need two parts to make it work, a partial for placing the icons and another one for importing the JavaScript - recommended to put this just above the closing body-tag to avoid any render-blocking.

partials/addthis.html

<div class="addthis_inline_share_toolbox"></div>

partials/addthis-script.html

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid={{- .Site.Params.addThis -}}" async></script>

./config.toml

Lets update your config.toml-file and add the parameter addThis with your pubid given from add-this.

[params]
    addThis = "ra-123456789ABCDEF"

Usage Example

layouts/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>just a test</title>
</head>
<body>

{{ partial "addthis" . }}

<!-- some content !-->

{{ partial "addthis-script" . }}
</body>
</html>

Read more about partials in the official documentation.