先日Twitterブログにて「Twitterボタンのシェア数」の廃止と、非公式カウント取得APIの廃止が発表されました。
今まで提供してきたツイートボタンとフォローボタンのデザインを一新すると同時に、今後はツイートボタンにツイート数を表示しなくなります。変更は2015年11月20日までに完了する予定です。
これにより、Twitterボタンは以下のような表示になります。
Twitterボタンがこうなってしまうと、今までバルーン表示されていた「ツイート数」の表示されなくなってしまうのではないかと思います。
例えば、これまでこんな感じで表示されていたのが、
新しいボタンを使用して他のシェアボタンと並べると、こんな感じになってしまうのではないかと。
これだと、高さがそろわず何となく気持ち悪いです。
ですので、2015年11月20日までツイート数が表示されなくなる前に、何か代替案を考えておこうかと。
という事で、ツイート数表示の廃止でバルーンが表示されなくなったとしても、あまり違和感のないツイートボタンを考えてみたのでその作成方法紹介したいと思います。
今回はWordpressでのカスタマイズ方法を紹介しますが、Wordpress関数部分を取り除けば通常サイトでも利用できるかと思います。
目次
ツイートボタンにバルーンをつける
これまで、ツイートボタンを他のシェアボタンと並べても、特に違和感がなかったのは、バルーン（吹き出し）があったからではないかと思います。
ですので、違和感なく表示するには、「バルーンを付けてしまえば良い」ということで自前で表示させることにしました。
自前で作成したバルーンボタンは、以下のような表示になります。
これは、「Twitter純正のボタン」に似せた「自作のボタン」を表示させることで、バルーン付きのボタンを実現させています。
ツイート数は、取得できないので、コメント（Comments）を表すFont Awesomeのアイコンを表示させています。
以下では、上記のようなTwitterボタンの実装方法を紹介したいと思います。
主な手順
自作のTwitterバルーンボタンを実装するのに必要になる主な手順は以下です。
- ヘッダーでFont Awesomeを呼び出す
- 以前Twitterボタンがあった場所に自作のコードを書く
- スタイルを記入する
やることといっても、3回ほどコピペすればできる簡単なものです。
ヘッダーでFont Awesomeを呼び出す
Font Awesomeを利用していないサイト（テーマ）ではファイルを呼び出す必要があります。
Font Awesomeを利用するには、<head></head>内に以下のようなタグを記入してください。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
既にサイト上でFont Awesomeを利用している場合は、この作業は不要です。
以前Twitterボタンがあった場所に自作のコードを書く
次に、以前「Twitter純正のツイートボタン」を配置していたコードを消して、以下のコードをコピペします。
<div class="balloon-btn-set">
<div class="arrow-box">
<a href="//twitter.com/search?q=<?php echo urlencode( get_permalink() ); ?>" target="blank" class="arrow-box-link twitter-arrow-box-link" rel="nofollow">
<span class="social-count twitter-count"><span class="fa fa-comments"></span></span>
</a>
</div>
<a href="//twitter.com/share?text=<?php echo urlencode( get_the_title() ); ?>&url=<?php echo urlencode( get_permalink() ) ?>" target="blank" class="balloon-btn-link twitter-balloon-btn-link" rel="nofollow">
<span class="fa fa-twitter"></span><span class="tweet-label">ツイート</span>
</a>
</div>
ここでは、ツイートボタンを自前のHTMLタグに入れ替えてしまいます。
スタイルを記入する
あとは、Wordpressであればstyle.cssに以下スタイルシートをコピペします。
/************************************
** 自作のTwitterバルーンボタン
************************************/
.balloon-btn-set{
display:block;
width:65px;
height:63px;
}
.balloon-btn-set a{
display:block;
color:#777;
font-size:14px;
text-decoration:none;
}
a.arrow-box-link{
color: #bbb;
text-align:center;
display:block;
}
a.balloon-btn-link{
border:1px solid #ddd;
width:65px;
height:18px;
line-height:16px;
position:relative;
color:white;
border-radius:3px;
text-align:center;
display:block;
}
.arrow-box {
position: relative;
background: #fff;
border: 1px solid #bbb;
text-align:center;
width:65px;
height:33px;
border-radius:3px;
line-height:33px;
display:inline-block;
}
.arrow-box:after,
.arrow-box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow-box:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #fff;
border-width: 3px;
margin-left: -3px;
}
.arrow-box:before {
border-color: rgba(187, 187, 187, 0);
border-top-color: #ddd;
border-width: 5px;
margin-left: -5px;
}
a.twitter-balloon-btn-link .fa-twitter{color:#55acee;
font-size: 16px;}
a.twitter-balloon-btn-link .tweet-label{
font: 11px/18px "Helvetica Neue",Arial,sans-serif;
font-weight: bold;
color: #000;
margin-left: 3px;
vertical-align: top;
}
/************************************
** Twitterのボタンのグラデーション
************************************/
a.balloon-btn-link {
font-size:16px;
font-weight:normal;
border:1px solid #bbb;
text-decoration:none;
background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
background:-ms-linear-gradient( top, #f9f9f9 5%, #e9e9e9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #f9f9f9), color-stop(100%, #e9e9e9) );
background-color:#f9f9f9;
color:#666666;
display:inline-block;
text-shadow:1px 1px 0px #ffffff;
-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
box-shadow:inset 1px 1px 0px 0px #ffffff;
}
このようにすることで、縦型のバルーンボタンは以下のように表示されます。
横型のバルーンボタンにも対応させる
上記の方法で、縦型のバルーンボタンには対応させることができました。
けれど、ページのタイトル下などは、横型のTwitterバルーンボタンを使用している方もおられるかもしれません。
こんなやつ。
これも、以下のような感じに変更したいと思います。
主な手順
これを行うには、さらに以下の2手順を加えるだけです。
- 横型バルーンボタンにしたい場合はdiv#sns-group-topで囲む
- 横型用のスタイルシートを貼り付ける
横型バルーンボタンにしたい場合はdiv#sns-group-topで囲む
「横型のバルーンボタン」にしたい場合は、先程の「縦型のバルーンボタン」を
<div id="sns-group-top"> <!-- ここにタグを挿入する --> </div>
実際のコードは、こんな感じになります。
<div id="sns-group-top">
<div class="balloon-btn-set">
<div class="arrow-box">
<a href="//twitter.com/search?q=<?php echo urlencode( get_permalink() ); ?>" target="blank" class="arrow-box-link twitter-arrow-box-link" rel="nofollow">
<span class="social-count twitter-count"><span class="fa fa-comments"></span></span>
</a>
</div>
<a href="//twitter.com/share?text=<?php echo urlencode( get_the_title() ); ?>&url=<?php echo urlencode( get_permalink() ) ?>" target="blank" class="balloon-btn-link twitter-balloon-btn-link" rel="nofollow">
<span class="fa fa-twitter"></span><span class="tweet-label">ツイート</span>
</a>
</div>
</div>
例ではID（#sns-group-top）を使用していますが、ページの中に何個も使用する場合は、クラスとかに変更したほうがいいかもしれません。
ページに1つしか利用しない場合はそのままでOKです。
横型用のスタイルシートを貼り付ける
あとは、「縦型のバルーンボタン」を「横型のバルーンボタン」に変更するスタイルシートを書くだけです。
style.cssに以下のようにコピペします。
/************************************
** 横型バルーンボタン
************************************/
#sns-group-top .balloon-btn-set {
display: block;
height: 22px;
margin-bottom: 10px;
width: 100px;
}
#sns-group-top .arrow-box {
float: right;
height: 18px;
line-height: 20px;
width: 28px;
}
#sns-group-top .arrow-box-link{
line-height:20px;
text-align:center;
}
#sns-group-top .balloon-btn-link{
top:0;
width:63px;
float:left;
line-height:14px;
}
#sns-group-top .arrow-box {
position: relative;
background: #fff;
border: 1px solid #bbb;
}
#sns-group-top .arrow-box:after,
#sns-group-top .arrow-box:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
left:auto;
position: absolute;
pointer-events: none;
}
#sns-group-top .arrow-box:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 3px;
margin-top: -3px;
}
#sns-group-top .arrow-box:before {
border-color: rgba(119, 119, 119, 0);
border-right-color: #bbb;
border-width: 4px;
margin-top: -4px;
}
#sns-group-top a.twitter-balloon-btn-link .fa-twitter {
vertical-align: top;
}
HTMLで「div#sns-group-top」でラップすることで、横型用のスタイルが優先して読み込まれます。
以下のような「縦型のバルーンボタン」が
以下のように横型に表示されます。
他のシェアボタンと並べるとこんな感じです。
ボタンを押した時の動作
「純正のTwitterボタン」を押した時の動作と、今回の「自作のTwitterボタン」を押した時の動作は以下のようになります。
純正ボタンの動作
「純正のTwitterボタン」をクリックしたときは、新しいウィンドウにツイートフォームが表示されます。
自作ボタンの動作
「自作のTwitterボタン」を押したときは、新しいタブが開かれて、ツイートフォームが表示されます。
「純正のTwitterボタン」のように新しいウィンドウが開かれる動作は、ブラウザによっては、表示されるまでにかなりの時間がかかるものがあるので、個人的には「自作のTwitterボタン」の方が使いやすいかと思います。
ただ、どうしても「新しいウィンドウで開きたい」という場合は、今後も「純正のTwitterボタン」を使うとかの方が良いかもしれません。
ボタンのオプション設定
あと、ボタンのオプション設定に関しては次のような違いがあります。
純正のツイートボタン
純正のツイートボタンの場合は、タグの属性としてオプションを設定する必要があります。
<a data-related="MrYhira,YahooNewsTopics" ...>
自作のツイートボタン
自作のツイートボタンの場合は、URLのパラメーターとしてオプションを設定する必要があります。
<a href="//twitter.com/share?text=[タイトルなど]&url=[URL]&related=MrYhira">ツイート</a>
詳しくは以下のページを参照してください。
属性で設定していたオプションが、URLパラメータになるだけなので、それほど難しい変更ではないと思います。
まとめ
というわけで、11月20日までにツイート数が表示されなくなるということで、「ボタンの仕様が変わるなら、見た目が同じようなものを自前作って表示させればいいじゃん」という考えの下、自作のボタンを作成して表示する方法を紹介しました。
ツイートボタンの仕様変更後の、デザインで悩んでいて、どうしても良い方法が思いつかない場合は、最後の手段として、利用しても良いかもしれません。
尚、今回の方法は、WordpressのTwenty Fifteenテーマと、Chrome、Firefoxを利用して動作確認をしました。もしかしたら他の環境で、表示に不具合が出るかもしれませんが、そういった場合は、それぞれで微調整していかなければと思います。
※試してないけどSimplicityで利用すると、他のスタイルとの兼ね合いでおかしな表示になるかも。
追記：Twitter純正のツイートボタンを使用した方法は以下。
読んでて眠たくなる内容だなぁもうちょっと簡潔にまとめることができないのか、
お前のサイトページが毎回検索エンジンに引っかかってうざいんだよ。
動画で解説しろ、バカ