コピペで実装!廃止されるTwitter純正の吹き出し付きツイートボタンの代替案

先日Twitterブログにて「Twitterボタンのシェア数」の廃止と、非公式カウント取得APIの廃止が発表されました。

今まで提供してきたツイートボタンとフォローボタンのデザインを一新すると同時に、今後はツイートボタンにツイート数を表示しなくなります。変更は2015年11月20日までに完了する予定です。

これにより、Twitterボタンは以下のような表示になります。新しいTwitterボタン

Twitterボタンがこうなってしまうと、今までバルーン表示されていた「ツイート数」の表示されなくなってしまうのではないかと思います。

例えば、これまでこんな感じで表示されていたのが、

これまでのTwitterボタン

新しいボタンを使用して他のシェアボタンと並べると、こんな感じになってしまうのではないかと。

Twitterボタンを新しいものに変更すると

これだと、高さがそろわず何となく気持ち悪いです。

ですので、2015年11月20日までツイート数が表示されなくなる前に、何か代替案を考えておこうかと。

という事で、ツイート数表示の廃止でバルーンが表示されなくなったとしても、あまり違和感のないツイートボタンを考えてみたのでその作成方法紹介したいと思います。

今回はWordpressでのカスタマイズ方法を紹介しますが、Wordpress関数部分を取り除けば通常サイトでも利用できるかと思います。

スポンサーリンク
レクタングル(大)広告

ツイートボタンにバルーンをつける

これまで、ツイートボタンを他のシェアボタンと並べても、特に違和感がなかったのは、バルーン(吹き出し)があったからではないかと思います。

ですので、違和感なく表示するには、「バルーンを付けてしまえば良い」ということで自前で表示させることにしました。

自前で作成したバルーンボタンは、以下のような表示になります。

自前で作ったツイッターボタンを追加

これは、「Twitter純正のボタン」に似せた「自作のボタン」を表示させることで、バルーン付きのボタンを実現させています。

ツイート数は、取得できないので、コメント(Comments)を表すFont Awesomeのアイコンを表示させています。

以下では、上記のようなTwitterボタンの実装方法を紹介したいと思います。

主な手順

自作のTwitterバルーンボタンを実装するのに必要になる主な手順は以下です。

  1. ヘッダーでFont Awesomeを呼び出す
  2. 以前Twitterボタンがあった場所に自作のコードを書く
  3. スタイルを記入する

やることといっても、3回ほどコピペすればできる簡単なものです。

ヘッダーでFont Awesomeを呼び出す

Font Awesomeを利用していないサイト(テーマ)ではファイルを呼び出す必要があります。

Font Awesomeを利用するには、<head></head>内に以下のようなタグを記入してください。

既にサイト上でFont Awesomeを利用している場合は、この作業は不要です。

以前Twitterボタンがあった場所に自作のコードを書く

次に、以前「Twitter純正のツイートボタン」を配置していたコードを消して、以下のコードをコピペします。

ここでは、ツイートボタンを自前のHTMLタグに入れ替えてしまいます。

スタイルを記入する

あとは、Wordpressであればstyle.cssに以下スタイルシートをコピペします。

このようにすることで、縦型のバルーンボタンは以下のように表示されます。

自前で作ったツイッターボタンを追加

横型のバルーンボタンにも対応させる

上記の方法で、縦型のバルーンボタンには対応させることができました。

けれど、ページのタイトル下などは、横型のTwitterバルーンボタンを使用している方もおられるかもしれません。

こんなやつ。

横型のTwitterバルーンボタン

これも、以下のような感じに変更したいと思います。

新しい横型Twitterバルーンボタン

主な手順

これを行うには、さらに以下の2手順を加えるだけです。

  1. 横型バルーンボタンにしたい場合はdiv#sns-group-topで囲む
  2. 横型用のスタイルシートを貼り付ける

横型バルーンボタンにしたい場合はdiv#sns-group-topで囲む

「横型のバルーンボタン」にしたい場合は、先程の「縦型のバルーンボタン」を

実際のコードは、こんな感じになります。

例ではID(#sns-group-top)を使用していますが、ページの中に何個も使用する場合は、クラスとかに変更したほうがいいかもしれません。

ページに1つしか利用しない場合はそのままでOKです。

横型用のスタイルシートを貼り付ける

あとは、「縦型のバルーンボタン」を「横型のバルーンボタン」に変更するスタイルシートを書くだけです。

style.cssに以下のようにコピペします。

HTMLで「div#sns-group-top」でラップすることで、横型用のスタイルが優先して読み込まれます。

以下のような「縦型のバルーンボタン」が

縦型のバルーンボタン例

以下のように横型に表示されます。

横型のバルーンボタン例

他のシェアボタンと並べるとこんな感じです。

新しい横型Twitterバルーンボタン

ボタンを押した時の動作

「純正のTwitterボタン」を押した時の動作と、今回の「自作のTwitterボタン」を押した時の動作は以下のようになります。

純正ボタンの動作

「純正のTwitterボタン」をクリックしたときは、新しいウィンドウにツイートフォームが表示されます。

新しいウィンドウにツイートフォームが表示される

自作ボタンの動作

「自作のTwitterボタン」を押したときは、新しいタブが開かれて、ツイートフォームが表示されます。

新しいタブが開かれてツイートフォームが表示される

「純正のTwitterボタン」のように新しいウィンドウが開かれる動作は、ブラウザによっては、表示されるまでにかなりの時間がかかるものがあるので、個人的には「自作のTwitterボタン」の方が使いやすいかと思います。

ただ、どうしても「新しいウィンドウで開きたい」という場合は、今後も「純正のTwitterボタン」を使うとかの方が良いかもしれません。

ボタンのオプション設定

あと、ボタンのオプション設定に関しては次のような違いがあります。

純正のツイートボタン

純正のツイートボタンの場合は、タグの属性としてオプションを設定する必要があります。

自作のツイートボタン

自作のついたボタンの場合は、URLのパラメーターとしてオプションを設定する必要があります。

詳しくは以下の位一例を参照してください。

Twitterのシェアボタンからツイート後フォローを促す画面を表示させる設定方法まとめ
例えば、Yahoo!ニュースのTwitterシェアボタンから、こんな感じでツイートボタンを押したとします。 すると、こんな感じで表...

属性で設定していたオプションが、URLパラメータになるだけなので、それほど難しい変更ではないと思います。

まとめ

というわけで、11月20日までにツイート数が表示されなくなるということで、「ボタンの仕様が変わるなら、見た目が同じようなものを自前作って表示させればいいじゃん」という考えの下、自作のボタンを作成して表示する方法を紹介しました。

ツイートボタンの仕様変更後の、デザインで悩んでいて、どうしても良い方法が思いつかない場合は、最後の手段として、利用しても良いかもしれません。

尚、今回の方法は、WordpressのTwenty Fifteenテーマと、Chrome、Firefoxを利用して動作確認をしました。もしかしたら他の環境で、表示に不具合が出るかもしれませんが、そういった場合は、それぞれで微調整していくなければと思います。

※試してないけどSimplicityで利用すると、他のスタイルとの兼ね合いでおかしな表示になるかも。

追記:Twitter純正のツイートボタンを使用した方法は以下。

新しくなったTwitterボタンを「縦型のバルーン付きボタン」にする方法
アメリカ時間の11月20日に、Twitterボタンが刷新されました。 それに伴い、以前はこんなだったTwitterの縦型ボタンが ...
刷新されたTwitterボタンを「横型のバルーン付きボタン」にする方法
前回、縦型バルーンボタンの作成方法について書きました。 今回は、一応横型のバルーンボタンのWordpressカスタマイズ方法につい...

『コピペで実装!廃止されるTwitter純正の吹き出し付きツイートボタンの代替案』へのコメント

  1. 名前:っh 投稿日:2015/10/21(水) 18:28:53 ID:470598ad4

    読んでて眠たくなる内容だなぁもうちょっと簡潔にまとめることができないのか、
    お前のサイトページが毎回検索エンジンに引っかかってうざいんだよ。
    動画で解説しろ、バカ

  2. わいひら 名前:わいひら 投稿日:2015/11/14(土) 10:59:13 ID:a210ea93e

    そもそも、どのような検索をしたのかがわからないと何とも言えないです。
    このサイトが、検索エンジンの上位に表示されているのだとしたら、それは僕の責任ではなくGoogleのアルゴリズムの問題です。

    この記事のような内容の場合は、動画で説明するよりも、コピペでカスタマイズコードが手に入る、テキスト形式の方が適していると僕は思います。