Teru Komaki's Blog (Temporary)

AddThisを使ってHugoに共有ボタン(Share Button)を追加する

Hugoに共有ボタンを追加したいなと思い、調べて追加したのでメモ。

色々な方法があるとおもいますが、AddThisを使うことで簡単に追加できると思います。

ググる

ググってみると、すぐに見つかりました。

Hugoのコミュニティのページです。

Share buttons for blog posts

このページに、実際の対応方法が書かれています。

Add-This social sharing icons in Hugo Sites

おおまかな流れ

AddThisにサインアップ

なにはともあれ、AddThisにサインアップします。

AddThis

AddThisの共有ボタンのデザインを設定する

共有ボタンのデザインを設定します。

addthis

addthis

AddThisのidを取得する

Profile Settingsのページにra-から始まるidがありますので、コピっておきます。

addthis

htmlを追加する

partials/addthis.html

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

partials/addthis-script.html

Hugoのサイトでは、以下のようになっています。

以下のコードを設置したあとに、Twitterで共有してみると、トラック目的のハッシュタグが入りました。

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

partials/addthis.html(トラッキングコードをfalseにする)

不要なコードを入れたくないので、コードをfalseにするためのスクリプトを追加します。

AddThisのサイトを参照してください。

Removing Hashtags, Anchors, and Tracking Codes from Your URLs

1<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid={{- .Site.Params.addThis -}}" async></script>
2​<script type="text/javascript">
3    var addthis_config = addthis_config||{};
4    addthis_config.data_track_addressbar = false;
5    addthis_config.data_track_clickback = false;
6</script>

config.tomlに追加する

./config.toml

1[params]
2    addThis = "ra-123456789ABCDEF"

コードを追加する

自分のテーマに合わせて、追加してください。

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <title>just a test</title>
 5</head>
 6<body>
 7
 8{{ partial "addthis" . }}
 9
10<!-- some content !-->
11
12{{ partial "addthis-script" . }}
13</body>
14</html>

サイトを確認する

うまく設定できれば、このように表示されると思います。

addthis

あとがき

Hugoで記事を書いたり更新することに慣れてきました。

Markdown最高！

Hugoで記事を書く時は、JetBrainsのWebStormで書いています。

ちなみに、JetBrainsの製品を使う際には、必ずIdeaVimというプラグインを入れています。

全く記事に関係ないけどGoland最高！