投稿日: 投稿者: iwbjp

Twitterツイートボタン吹き出しカウンターリンク作成方法

Twitterツイートボタン吹き出しカウンターリンク作成方法

ツイートボタンの刷新

Twitter、ツイートボタンの刷新は米国時間の11月20日に実施

Twitter Japan株式会社が告知していたツイートボタンのリニューアルについて、同社広報部に確認したところ、米国時間の11月20日に実施することが判明した。

これは、10月6日付の同社公式ブログ内で「11月20日までにリニューアルを実施」と予告していたもの。ツイートボタンを、青をベースとしたハイコントラストなデザインに変更する。また、新デザインへの移行にともない、ツイート数を表示するカウンターを廃止する。

上記の記事に書かれてあるとおり米国時間の2015年11月20日以降にTwitterのツイートボタンの吹き出しカウンターが表示されなくなった。
上記の記事に書かれてあるとおり米国時間の2015年11月20日以降にTwitterのツイートボタンの吹き出しカウンターが表示されなくなった。

すでにTwitter公式サイトのボタン設置用のコードを生成するページでは吹き出しカウンター付きのボタンのオプションの有無を選択できなくなっている。
https://about.twitter.com/ja/resources/buttons#tweet

Twitterツイートボタン吹き出しカウンター部分は記事に対するTwitter上のコメント閲覧用のリンクになっているため完全になくなるとユーザーが不便になる。

そのため吹き出し部分を記事のリンク付きで自作して表示しているサイトが最近多くなってきている。

例：Engadget、ねとらぼ、Internet Watchなど
Engadget、ねとらぼ、Internet Watchのツイートボタン

吹き出し(右)作成方法

tweet-balloon-right

吹き出し部分を自分で作成するにはまずTwitterボタンのコードを公式サイトからコピーしてきてdiv.twitter-btn-wrapで囲む。

<div class="twitter-btn-wrap">
<a href="https://twitter.com/share" class="twitter-share-button"{count}>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>

CSSのコード

吹き出し部分の装飾はCSSで下記のように記述する。

.twitter-btn-wrap {
  display: inline-block;
}
.twitter-btn-wrap .balloon {
  display: inline-block;
  position: relative;
  padding: 0 3px;
  border: 1px solid #bbb;
  border-radius: 3px;
  background: #fff;
  color: #333;
  font: 11px/18px &quot;Helvetica Neue&quot;,Arial,sans-serif;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: top;
}
.twitter-btn-wrap .balloon:hover {
  text-decoration: underline;
}
.twitter-btn-wrap .balloon::before,
.twitter-btn-wrap .balloon::after {
  content: &quot;&quot;;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 0;
  line-height: 0;
  margin: -4px 0 0 -4px;
  border-style: solid solid solid none;
  border-width: 4px 4px 4px 0;
}
.twitter-btn-wrap .balloon::before {
  border-color: transparent #aaa transparent #aaa;
  margin: -4px 0 0 -4px;
}
.twitter-btn-wrap .balloon::after {
  border-color: transparent #fff;
  margin: -4px 0 0 -3px;
}

フォントや吹き出しの線の形や色は元々のツイートボタンの吹き出しのものに合わせてある。

JavaScriptのコード

肝心の吹き出しのHTML部分はJavaScriptで生成して挿入する。

!function(d){
  var t = d.querySelector('.twitter-btn-wrap'),
      a = d.createElement('a'),
      c = d.createTextNode('見る');
  a.className = 'balloon';
  a.href = 'https://twitter.com/search?ref_src=twsrc%5Etfw&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;q=' +
            encodeURIComponent(d.location.href);
  a.target = '_blank';
  a.appendChild(c);
  t.appendChild(a);
}(document);

以上の手順だけでTwitterボタンの右に記事のツイートへの吹き出しリンクを表示させることができるようになる。

JavaScriptを使用しているのはボタンがあるページのURLを取得するためなのでWordPressのテンプレートタグなどでページのURLを取得できるのであればJavaScriptを使用せずにHTMLをこのようにすれば同じことができる。

<div class="twitter-btn-wrap">
<a href="https://twitter.com/share" class="twitter-share-button"{count}>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<a href="https://twitter.com/search?ref_src=twsrc%5Etfw&q=<?php echo rawurlencode(get_permalink()); ?>" target="_blank" class="balloon">見る</a>
</div>

Twitterツイートボタン吹き出し(右)リンク作成方法サンプル

Twitterツイートボタン吹き出し(右/WordPressテンプレートタグ使用/JavaScript未使用)リンク作成方法サンプル

ツイートボタン吹き出し(上)作成方法

tweet-balloon-top

吹き出しが上に表示されるタイプは右に表示されるタイプよりも大きく、表示位置も異なるためコードがCSS, JavaScriptコードが異なる。

HTMLは右も上も同じコードを使用

<div class="twitter-btn-wrap">
<a href="https://twitter.com/share" class="twitter-share-button"{count}>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>

CSS

.twitter-btn-wrap {
  display: inline-block;
}
.twitter-btn-wrap .balloon {
  display: block;
  position: relative;
  margin-bottom: 5px;
  padding: 0 5px;
  border: 1px solid #bbb;
  border-radius: 3px;
  background: #fff;
  color: #333;
  font: 16px/34px &quot;Helvetica Neue&quot;,Arial,sans-serif;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
}
.twitter-btn-wrap .balloon:hover {
  text-decoration: underline;
}
.twitter-btn-wrap .balloon::before,
.twitter-btn-wrap .balloon::after {
  content: &quot;&quot;;
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  line-height: 0;
  border: 4px transparent solid;
  border-bottom: 0;
}
.twitter-btn-wrap .balloon::before {
  margin: 0 0 -4px -4px;
  border-top-color: #aaa;
}
.twitter-btn-wrap .balloon::after {
  margin: 0 0 -3px -4px;
  border-top-color: #fff;
}

JavaScript

!function(d){
  var t = d.querySelector('.twitter-btn-wrap'),
      a = d.createElement('a'),
      c = d.createTextNode('見る');
  a.className = 'balloon';
  a.href = 'https://twitter.com/search?ref_src=twsrc%5Etfw&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;q=' +
            encodeURIComponent(d.location.href);
  a.target = '_blank';
  a.appendChild(c);
  t.insertBefore(a, t.firstChild);
}(document);

Twitterツイートボタン吹き出し(上)リンク作成方法サンプル

ツイートボタンのデザイン変更

今回の変更はツイート数を表示する吹き出しカウンターだけでなくツイートボタンのデザインも変更されている。

グレーのグラデーションがかかったものから青をベースとしたデザインに変更された。
グレーのグラデーションがかかったものから青をベースとしたデザインに変更された。

しかし、いまだにグレーのツイートボタンが表示されているサイトを見かける。

実はツイートボタンはiframeで表示する方法とiframeを使用せずに表示する方法(HTML+CSS)があるのだが後者の場合はボタンが静的な作りになっていているためデザインが更新されない。

時間が経過するに連れて青のボタンが一般的になってくるし、ボタンのクリック数にも影響するためなるべく青のデザインを使用したほうが良い。

Twitterの鳥アイコン使用時の注意

今回の仕様変更を機にサイトのツイートボタンを独自デザインのものに刷新するサイトもあるだろう。

注意しなければならないのはTwitterバードはTwitter社の規定のものを使用しなければならないため勝手に形や色を変更したものを使用すると規定違反になる。

例：PC版アメブロ(Amebaブログ) は鳥の形が規定違反
例：PC版アメブロ(Amebaブログ) は鳥の形が規定違反

Twitterのブランド資産(Twitterロゴ規定)

ツイート数表示API廃止

ツイート数を表示するカウンターが廃止されたためツイート数を表示するAPI(count.json)も廃止された。

ツイートボタンで独自デザインを作成してツイート数をAPIから取得して表示させている場合、数字が表示されなかったり、記事がツイートされているのに0が表示されたりするので注意が必要。
ツイート数をAPIから取得して表示させている場合、数字が表示されなかったり、記事がツイートされているのに0が表示されたりするので注意が必要。

count.jsoonでツイート数表示

どうしてもツイート数を表示したい場合はcount.jsoonというサービスを利用する方法がある。

これはURLを登録すればツイート数をカウントしてAPIで取得できるようになる無料サービスだ。(HTTPS非対応)

吹き出し内が「見る」などの文字だけだと実際にツイートがなくてもユーザーを遷移させてしまうことがあるためユーザビリティが良くない。

なるべくこのサービスを使用してツイート数を表示させよう。

count.jsoonの使い方

  1. まず使用するサイトURLとメールアドレスを登録します。

count.jsoon
count.jsoon

2. 登録後しばらくするとメールが届くので記載されているURLをクリック。
登録後しばらくするとメールが届くので記載されているURLをクリック。

3. URLをクリックするとcount.jsoonのサービスのページが開くので「サービス利用可能です。」が表示されているか確認する。
count-json-service

4. 初期値0を設定した吹き出しを配置。

iwb.jpはWordPressを使用しているのでdata-turl="<?php echo rawurlencode(get_permalink()); ?>"にしてあるがJavaScriptのlocation.hrefでページのURLを取得する場合はdata-turlは不要。



&lt;div class=&quot;twitter-btn-wrap&quot;&gt;
  &lt;a href=&quot;https://twitter.com/search?ref_src=twsrc%5Etfw&amp;q=&lt;?php echo rawurlencode(get_permalink()); ?&gt;&quot; target=&quot;_blank&quot; class=&quot;balloon&quot; data-turl=&quot;&lt;?php echo rawurlencode(get_permalink()); ?&gt;&quot;&gt;0&lt;/a&gt;
  &lt;a href=&quot;https://twitter.com/share&quot; class=&quot;twitter-share-button&quot;{count}&gt;Tweet&lt;/a&gt;
  &lt;script&gt;!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');&lt;/script&gt;
&lt;/div&gt;

5. JavaScriptでcount.jsonを読み込む。

WordPressなどでHTMLの方にdata-turlなどをつけて現在のページのURLを取得する場合はfunctions.jsに以下のコードを追加してツイート数を取得して吹き出しに入れる。

jQueryを使用すると簡単。

var $tBalloon = $('.twitter-btn-wrap &gt; .balloon');
var turl = $tBalloon.data('turl');
$.ajax({
  url: 'https://jsoon.digitiminimi.com/twitter/count.json?url=' + turl,
  dataType: 'jsonp',
  success: function(data) {
    if(data.count &gt; 0) {
      $tBalloon.text(data.count);
    }
  }
});

JavaScript側で現在のURLを取得する場合は

var $tBalloon = $('.twitter-btn-wrap &gt; .balloon');
var turl = encodeURIComponent(location.href);
$.ajax({
  url: 'https://jsoon.digitiminimi.com/twitter/count.json?url=' + turl,
  dataType: 'jsonp',
  success: function(data) {
    if(data.count &gt; 0) {
      $tBalloon.text(data.count);
    }
  }
});

以上でツイート数がiwb.jpのように吹き出しに表示されるようになる。

ちなみにajaxのurlのパラメーターが間違っているとdata.countに-2が返ってくるので注意。

関連する記事

  1. Google Apps Scriptなら1分でサンプルのWebページを公開可能

    Google Apps Scriptなら1分でサンプルのWebページを公開可能
  2. amp-social-shareのTwitterのタイトル置換はdata-param-textを使う

    amp-social-shareのTwitterのタイトル置換はdata-param-textを使う
  3. HTMLタグのdetailsとsummaryだけでアコーディオンメニューが作成可能

    HTMLタグのdetailsとsummaryだけでアコーディオンメニューが作成可能