Mono Works

チラシのすきま

Twitter ボタン始めました

表示が遅くなったような気がしないでもないので、さくっと撤去するかもしれませんが…

2018-07-11-set-sns-button01

更新履歴

変更01: 2019/07/08

  • Twitter側の変更に合わせて、全体に記事修正

Tweetボタン

公式:自分のウェブサイトにTwitterボタンを追加する方法

  1. 上記公式ページを参照して、https://publish.twitter.com/へ移動。
  2. What would you like to embed?の下に書かれてあるOr browse your options below
  3. Twitter Buttonsをクリックして、表示したいボタンの種類をクリック
  4. そのままCopy Codeをクリックするか、オプションを指定してCopy Codeをクリック
  5. コピーしたコードををタグで囲んだり、クラス名付けたり、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 ボタンを配置

comments powered by Disqus
Googleブログ検索
Amazon検索
執筆者
"ぽぽろんち" pporoch
pporoch120
Mono Worksの中の人。DQX内では "ぬここ" の中の人もやってます。好きなことをつらつらと書き留めてます。
"DQX@ぬここ(UD487-754)"
採用案内