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

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

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

以前のTwitter縦型ボタン

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

新しくなったTwitterボタン

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

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

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

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

主な手順

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

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

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

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

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

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

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

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

<div class="twitter_btn">
  <a class="arrow_box" href="//twitter.com/search?q=<?php echo get_permalink(); ?>" target="_blank">リスト</a>
  <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>

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

Twitterボタン作成ページ

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

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

    .twitter_btn{
      width: 68px;
    }
    
    .arrow_box {
      position: relative;
      background: #fff;
      border: 1px solid #ccc;
      margin-bottom: 5px;
      text-align: center;
      font-size: 11px;
      height: 33px;
      line-height: 33px;
      display: block;
      text-decoration: none;
      color: #333;
      border-radius: 3px;
      font-family: "Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    }
    .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(221, 221, 221, 0);
      border-top-color: #ccc;
      border-width: 4px;
      margin-left: -4px;
    }

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

    CSSArrowPlease allows you to create and export CSS code for a custom box with an arrow extending out from the side.

    動作確認

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

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

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

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

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

    • リスト
    • 見る
    • Tweet
    • Tweets

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

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

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

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

    まとめ

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

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

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

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

     

    今回は新しいデザインの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かあさん
      ただ実際に試したことはないのでそのような仕様で、動作するかなどまではわからないです。