新しくなったTwitterボタンを「縦型のバルーン付きボタン」にする方法

アメリカ時間の11月20日に、Twitterボタンが刷新されました。

それに伴い、以前はこんなだったTwitterの縦型ボタンが

以前のTwitter縦型ボタン

全てこんなんに差し替えられました。

新しくなったTwitterボタン

これで何が困るかというと、以下のような縦型のバルーンボタンを並べている場合だと、高さがそろわず不格好になってしまいます。

縦型のバルーンボタンの不格好になってしまう

今回は、この単なるボタンだけになってしまったツイートボタンに無理やりバルーンを付加して、その他の縦型SNSバルーンボタンと、ある程度見た目を統一させるWordpressカスタマイズ方法の紹介です。

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

主な手順

今回は、Twitter純正のボタンを利用して、縦型のバルーンボタンを作成します。

今回のカスタマイズの完成形は以下のようになります。

新しい縦型ツイートバルーンボタン

カスタマイズの主な手順は以下の2手順です。

  1. ボタンを表示させたい箇所にコピペ
  2. ボタン用のスタイルをコピペ

以下で、それぞれのやり方について説明します。

ボタンを表示させたい箇所にコピペ

まずは、Wordpressのテンプレート内でTwitterボタンを表示させたい箇所に、以下のコードをコピペします。

Twitterボタン作成用のコードは、Twitterボタン | Aboutからカスタムしたものも取得できます。

Twitterボタン作成ページ

ボタン用のスタイルをコピペ

あとは、ボタン用のスタイルをstyle.cssにコピペするだけです。

バルーン用のスタイルは、以下のジェネレーターで作成しました。

動作確認

これを、Wordpress上で表示させると、以下のようになります。

新しい縦型ツイートバルーンボタン

これまでは、バルーン内にツイート数などが表示されましたが、今回のボタン機能の刷新でカウントは取得できなくなりました。

その代わり、「リスト」というテキストを入れています。

いろいろなサイト見てみたのですが、バルーン内のテキストは、以下のようなものが多かったように見受けられました。

  • リスト
  • 見る
  • Tweet
  • Tweets

「リスト」部分をクリックすると、タイムラインに飛ぶようにしてあります。

今回作成したボタンを、その他のSNSサービスのボタンと並べてみると、以下のようにし表示されます。

新しい縦型ツイートバルーンボタンを他のSNSサービスのボタンと並べてみる

細かな色や、余白は、サイトに合わせて調節してください。

まとめ

これで、以前よりは統一感が出たのではないかと思います。

縦型のバルーンボタンの不格好になってしまう

新しい縦型ツイートバルーンボタンを他のSNSサービスのボタンと並べてみる

ツイート数がないのは、少し寂しいです。けれど、どうあがいてもツイート数を取得できそうもなかったので、こういった見た目に慣れていくしかないのかもしれません。もしくは、全てシェアカウントを表示しないボタンにしてしまうか。

 

今回は新しいデザインのTwitterボタンを利用しましたが、以前のTwitterボタンの見た目を真似てボタンを作成する方法は、以下で紹介しています。

コピペで実装!廃止されるTwitter純正の吹き出し付きツイートボタンの代替案
先日Twitterブログにて「Twitterボタンのシェア数」の廃止と、非公式カウント取得APIの廃止が発表されました。 今まで...

『新しくなったTwitterボタンを「縦型のバルーン付きボタン」にする方法』へのコメント

  1. 名前:XYZ 投稿日:2015/11/25(水) 01:08:56 ID:96b422825

    htmlのページの場合
    href=”//twitter.com/search?q=”の部分を
    jQueryでアドレスを取得してhrefに代入すればいいと思うのですが書き方が分かりません・・・
    どうjsを書けばいいのでしょうか?

  2. わいひら 名前:わいひら 投稿日:2015/11/25(水) 12:52:35 ID:34408b3aa

    以下の取得方法と組み合わせれば、ページのURLを取得できるかと思います。
    jQuery 色々な自分自身の○○を取得する-ITかあさん
    ただ実際に試したことはないのでそのような仕様で、動作するかなどまではわからないです。