コピペで利用!WordPressに自作のソーシャルバルーンボタンを設置するためのスタイル設定方法

先日、自分のサイトテーマで使おうと思ってバルーン型のソーシャルボタンを作ってみました。

ソーシャルサービス純正のバルーン型シェアボタンも良いのですが、サイト独自色を出すため、自作のソーシャルボタンというのもありかもしれません。

今回は、そんな「自作バルーン型シェアボタンを作成するときのスタイル方法」を紹介します。

最終的には、以下のような感じになります。

伝える適用後の吹き出し付きソーシャルボタン

photo by Adrian Fallace

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

準備

まず今回、以下のサービスのソーシャルボタンを自作します。

  • Twitter
  • Facebook
  • Google+
  • はてなブックマーク
  • Pocket
  • LINE
  • feedly

それぞれのボタンのロゴとしてウェブアイコンフォントを使用します。

アイコンフォントは、以下の記事で紹介しているものを使います。

今回は、日本でよく利用されているWEBサービスのアイコンフォントファイルと、使い方をまとめてみました。 でき上がりはこんな感じ...

まずは以下から、アイコンフォントファイルをダウンロードして解凍してください。

ウェブサービスアイコンフォントのダウンロード

日本でよく利用されるWEBサービスのアイコンフォントをまとめたものです。

feedly、はてブ、ポケット、LINEのSVGファイルはドウラクさわさわさん制作です。


ヘッダーに呼び出しタグを記入

解凍したら、icomoonフォルダができるので、テーマ直下にコピペします。

あとは、header.phpなどにある<head></head>内に以下のようにIcoMoonのstyle.cssファイルの呼び出しタグを記入します。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/icomoon/style.css">

準備はこれだけです。

表示部分にHTMLを記入

次にソーシャルボタンを表示させたい部分にHTMLを記入します。

記入するHTMLは以下のようになります。

<div id="sns-buttons" class="sns-buttons-pc">
  <ul class="snsbv">
    <li class="balloon-btn-vertical twitter-balloon-btn-vertical">
      <span class="balloon-btn-set">
        <span class="arrow-box-vertical">
          <a href="" target="blank" class="arrow-box-vertical-link twitter-arrow-box-vertical-link">
            0
          </a>
          <a href="" target="blank" class="balloon-btn-vertical-link twitter-balloon-btn-vertical-link">
            <i class="icon-twitter"></i>
          </a>
        </span>
      </span>
    </li>
    <li class="balloon-btn-vertical facebook-balloon-btn-vertical">
      <span class="balloon-btn-set">
        <span class="arrow-box-vertical">
          <a href="" target="blank" class="arrow-box-vertical-link facebook-arrow-box-vertical-link">
            0
          </a>
          <a href="" target="blank" class="balloon-btn-vertical-link facebook-balloon-btn-vertical-link">
            <i class="icon-facebook"></i>
          </a>
        </span>
      </span>
    </li>
    <li class="balloon-btn-vertical googleplus-balloon-btn-vertical">
      <span class="balloon-btn-set">
        <span class="arrow-box-vertical">
          <a href="" target="blank" class="arrow-box-vertical-link googleplus-arrow-box-vertical-link">
            0
          </a>
          <a href="" target="blank" class="balloon-btn-vertical-link googleplus-balloon-btn-vertical-link">
            <i class="icon-googleplus"></i>
          </a>
        </span>
      </span>
    </li>
    <li class="balloon-btn-vertical hatena-balloon-btn-vertical">
      <span class="balloon-btn-set">
        <span class="arrow-box-vertical">
          <a href="" target="blank" class="arrow-box-vertical-link hatena-arrow-box-vertical-link">
            0
          </a>
          <a href="" target="blank" class="balloon-btn-vertical-link hatena-balloon-btn-vertical-link">
            <i class="icon-hatena"></i>
          </a>
        </span>
      </span>
    </li>
    <li class="balloon-btn-vertical pocket-balloon-btn-vertical">
      <span class="balloon-btn-set">
        <span class="arrow-box-vertical">
          <a href="" target="blank" class="arrow-box-vertical-link pocket-arrow-box-vertical-link">
            KEEP!
          </a>
          <a href="" target="blank" class="balloon-btn-vertical-link pocket-balloon-btn-vertical-link">
            <i class="icon-pocket"></i>
          </a>
        </span>
      </span>
    </li>
    <li class="balloon-btn-vertical line-balloon-btn-vertical">
      <span class="balloon-btn-set">
        <span class="arrow-box-vertical">
          <a href="" target="blank" class="arrow-box-vertical-link line-arrow-box-vertical-link">
            LINE!
          </a>
          <a href="" target="blank" class="balloon-btn-vertical-link line-balloon-btn-vertical-link">
            <i class="icon-line"></i>
          </a>
        </span>
      </span>
    </li>
    <li class="balloon-btn-vertical feedly-balloon-btn-vertical">
      <span class="balloon-btn-set">
        <span class="arrow-box-vertical">
          <a href="" target="blank" class="arrow-box-vertical-link feedly-arrow-box-vertical-link">
            0
          </a>
          <a href="" target="blank" class="balloon-btn-vertical-link feedly-balloon-btn-vertical-link">
            <i class="icon-feedly"></i>
          </a>
        </span>
      </span>
    </li>
  </ul>
</div>

今回は、スタイルの設定方法なので、カウント取得部分やリンク動作部分は取り除きシンプルなHTMLのみにしました。

後で、この部分に、ソーシャルカウントを取得する動作や、クリック時の挙動を実装していくことになります。

classをいろいろ記入してありますが、これは後からでも自由にスタイルを変更できるようにするためです。(使ってないクラスもあります)

スタイルを設定していないので、現時点での表示は以下のようになります。

スタイルなしソーシャルボタン

カウント数(取得方法が定まっていないPocketと、そもそもカウントがないLINEを除く)と、それぞれのサービスのロゴとなるアイコンフォントが表示されています。

以下では、このHTMLにスタイルをつけます。

スタイルの設定

先程のHTMLにstyle.cssなどでスタイルをつけていきます。

スタイルのCSSは以下になります。

/************************************
** 自前のバルーンシェアボタン
************************************/
.balloon-btn-set{
  width:60px;
  height:63px;
}

.balloon-btn-set a{
  display:block;
  color:#777;
  font-size:14px;
  text-decoration:none;
}

a.arrow-box-vertical-link{
  font-weight:bold;
  text-align:center;
}

a.arrow-box-vertical-link:hover{color:#777;}

a.balloon-btn-vertical-link{
  border:1px solid #ddd;
  width:58px;
  height:20px;
  line-height:20px;
  position:relative;
  top:7px;
  color:white;
  border-radius:3px;
}

a.balloon-btn-vertical-link:hover{
  color:white;
  opacity:0.6;
}

a.twitter-balloon-btn-vertical-link{background-color:#55acee;}
a.facebook-balloon-btn-vertical-link{background-color:#3c5a99;}
a.googleplus-balloon-btn-vertical-link{background-color:#dd4b39;}
a.hatena-balloon-btn-vertical-link{background-color:#3c7dd1;}
a.pocket-balloon-btn-vertical-link{background-color:#ee4257;}
a.line-balloon-btn-vertical-link{background-color:#00c300;}
a.feedly-balloon-btn-vertical-link{background-color:#87bd33;}

.arrow-box-vertical {
  position: relative;
  background: #fff;
  border: 1px solid #bbb;
  text-align:center;
  width:58px;
  height:33px;
  border-radius:3px;
  top:-7px;
  line-height:33px;
  display:inline-block;
}

.arrow-box-vertical:after,
.arrow-box-vertical:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow-box-vertical:after {
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-width: 3px;
  margin-left: -3px;
}
.arrow-box-vertical:before {
  border-color: rgba(187, 187, 187, 0);
  border-top-color: #BBBBBB;
  border-width: 5px;
  margin-left: -5px;
}

バルーンの吹き出し部分のスタイルなどは、cssarrowpleaseで縦型のバルーンをジェネレートし、少し編集しています。

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

あとは、ボタン部分にサービスそれぞれの特徴的な色を入れ、ロゴを表示しています。

スタイルを適用すると、以下のようになります。

伝える適用後の吹き出し付きソーシャルボタン

カウント数の取得など

あとは、先程のHTMLに各サービスからカウントを取得したり、クリック後の動作を書くだけです。

カウント数の取得

カウントの取得などは、以下の記事などに詳しく書いてあります。

昨日、試しに作っているカスタマイズテーマに直接APIなどから取得した、ツイートカウント数などを表示させたくなりました。 それで...

以下の記事には、JavaScriptで取得する方法もまとめられています。

12436288584_94d6bc46d2_b.jpg
Twitter、Facebook、Google+など各SNSのカウント数を取得する方法をPHP、Javascriptを例に解説します。

feedlyの取得方法は以下に書かれています。

feedlyアイコンの右側に、購読者数が表示される吹き出しのついた、小さなフォローボタンを作ってみました。 Wordp...

Pocketのカウント数を取得する方法もあるのですが、取得するHTMLにPocket公式が「do not scrape」と書いているので、あまり推奨される方法ではないのかもしれません。

12436288584_94d6bc46d2_b.jpg
現時点でPocketブックマーク数単体取得に利用可能な公式APIは提供されていません。その中でありそうでなかったPocketブックマーク数を取得する方法を紹介します。

※サーバーの設定によってはカウント数が取得できない場合もあります。

動作部分

クリック後、シェアしたりするURLの作成は、以下がとても参考になります。

12436288584_94d6bc46d2_b.jpg
簡単な手順公式サイトでコードを取得してコピー。プレビューできるならその場でプレビューして共有ページのURLをそこでコピー…

まとめ

以上のような感じで、独自のバルーン型シェアボタンを作成することができます。

ソーシャルサービスデフォルトのボタンを使わないことで、多少はページ表示のスピードアップが図れるかもしれません。

今回僕は、「ページ表示スピードがかなり速くなるのかな?」と、テスト的に作成してみたのですが、Facebook以外は速いような気がします。ただ、FacebookはAPIでカウントを取得しても、Facebookサーバーの状態次第では、かなり遅くなります。ページの表示スピードを上げたい場合は、PHPで取得せず、ソーシャルカウントの取得方法まとめで紹介されている、JavaScriptを使った方法を試すと良いのかもしれません。

ともあれ、ソーシャルボタンを、全て自作することによって、それぞれのサービスが提供しているボタンを並べて使用するよりは、ボタンに統一感が出るのは間違いありません。なので、「ソーシャルバルーンボタンのバラバラ感が気に入らない」なんて人には、お勧めのスタイル設定方法です。

『コピペで利用!WordPressに自作のソーシャルバルーンボタンを設置するためのスタイル設定方法』へのコメント

  1. 名前:めたる 投稿日:2015/03/10(火) 21:34:58 ID:aef502faa

    このアイコンフォントは再配布していいのですか?

  2. アバター画像 名前:わいひら 投稿日:2015/03/10(火) 22:47:28 ID:2c49f4643

    アイコン製作者の、以下のページにリンクを紹介して配布すれば良いのではないかと思います。
    ブログのデザインでも使用している「Webフォントアイコン」を本当にオススメしたい! | ドウラク

    ページには、以下のように書いてあるので、自由に使用して良いとは思いますが、一応。

    需要があるか分かりませんが、今回トレースしたFeedly、LINE、はてなブックマークのSVGファイルを公開しておきますので、ご自由にダウンロードして使ってください。

  3. 名前:めたる 投稿日:2015/03/11(水) 00:28:48 ID:9547a8811

    お返事ありがとうございます。
    問題なさそうですね。使わしていただきます!

  4. 名前:ニョイ 投稿日:2015/11/21(土) 07:27:03 ID:26cc2b8b2

    いつもお世話になっております。

    シェアボタンを自作する際に参考にさせて頂きました。
    関連記事も合わせて大変勉強になりました。

    どうもありがとうございました。

  5. アバター画像 名前:わいひら 投稿日:2015/11/22(日) 13:29:49 ID:a397a9cb3

    こんにちは。
    記事が参考になったようでよかったです。