表示が遅くなったような気がしないでもないので、さくっと撤去するかもしれませんが…
更新履歴
変更01: 2019/07/08
- Twitter側の変更に合わせて、全体に記事修正
Tweetボタン
公式：自分のウェブサイトにTwitterボタンを追加する方法
- 上記公式ページを参照して、https://publish.twitter.com/へ移動。
What would you like to embed?の下に書かれてあるOr browse your options belowへTwitter Buttonsをクリックして、表示したいボタンの種類をクリック- そのまま
Copy Codeをクリックするか、オプションを指定してCopy Codeをクリック - コピーしたコードををタグで囲んだり、クラス名付けたり、hugo用にURLのリンクを追加したり
<div class="share-row">
<div class="share-button">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-url="{{ .Permalink }}" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
調整
SNSでシェアされたときに拾われるテキストや画像を metaタグに記載して（今回追加したのは、descriptionのみ。他はSEOのため元々記述していたもの）
<meta property="og:title" content="{{ .Title }}">
<meta name="description" content="{{ .Title }}">
<meta property="og:description" content="{{ .Title }}"/>
<meta property="og:url" content="{{ .Permalink }}">
<meta property="og:image" content="{{ .Site.BaseURL }}/img/mwlogoicon.png">
<meta property="og:type" content="article">
<meta property="og:site_name" content="{{ .Site.Title }}">
CSSを調整したら完成
div.share-row > div.share-button {
padding: 8px;
}
↓記事の下に Twitter ボタンを配置
コメント
コメントなどありましたら、GitHubのディスカッションへお願いします。（書き込みには、GitHubのアカウントが必要です）