Mono Works

チラシのすきま

Twitter ボタン始めました

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

2018-07-11-set-sns-button01

Tweetボタン

公式:Guides — Twitter Developers

一番シンプルなやつ

<a class="twitter-flex-item" href="https://twitter.com/intent/tweet">Tweet</a>

もう少しいろいろ試したい場合は、下記ページも参照ください。

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

調整

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 }}">

ボタンをタグで囲んでクラス名付けて

<div class="share-row">
  <div class="share-button">
    <a class="twitter-share-button" href="https://twitter.com/intent/tweet">Tweet</a>
  </div>
  <div class="share-button">
    <a href="{{ .Site.BaseURL }}/index.xml" id="menuRss" title="RSS"><i class="fa fa-rss-square fa-fw" aria-hidden="true"></i>RSS</a>
  </div>
</div>

CSSで調整したら完成です(いろいろと力技なのは見逃してください)

.share-row {
  display: flex;
}
iframe#twitter-widget-1 {
  margin: 3px 16px 12px 0;
}
a#menuRss > i.fa.fa-rss-square.fa-fw {
  font-size: 24px;
  color: #f26522;
}
a#menuRss {
  color: #777;
  font-weight: 400;
  vertical-align: top;
}

記事の下に Twitter ボタンを配置。以前、上のメニューに置いていた RSS ボタンを Twitter ボタンの隣に移動。

↓ここに置いた

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