先日、自分のサイトテーマで使おうと思ってバルーン型のソーシャルボタンを作ってみました。
ソーシャルサービス純正のバルーン型シェアボタンも良いのですが、サイト独自色を出すため、自作のソーシャルボタンというのもありかもしれません。
今回は、そんな「自作バルーン型シェアボタンを作成するときのスタイル方法」を紹介します。
最終的には、以下のような感じになります。
photo by Adrian Fallace
目次
準備
まず今回、以下のサービスのソーシャルボタンを自作します。
- Google＋
- はてなブックマーク
- LINE
- feedly
それぞれのボタンのロゴとしてウェブアイコンフォントを使用します。
アイコンフォントは、以下の記事で紹介しているものを使います。
まずは以下から、アイコンフォントファイルをダウンロードして解凍してください。
[wpdm_file id=5 title=”true” desc=”true” ]
ヘッダーに呼び出しタグを記入
解凍したら、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で縦型のバルーンをジェネレートし、少し編集しています。
あとは、ボタン部分にサービスそれぞれの特徴的な色を入れ、ロゴを表示しています。
スタイルを適用すると、以下のようになります。
カウント数の取得など
あとは、先程のHTMLに各サービスからカウントを取得したり、クリック後の動作を書くだけです。
カウント数の取得
カウントの取得などは、以下の記事などに詳しく書いてあります。
以下の記事には、JavaScriptで取得する方法もまとめられています。
feedlyの取得方法は以下に書かれています。
Pocketのカウント数を取得する方法もあるのですが、取得するHTMLにPocket公式が「do not scrape」と書いているので、あまり推奨される方法ではないのかもしれません。
※サーバーの設定によってはカウント数が取得できない場合もあります。
動作部分
クリック後、シェアしたりするURLの作成は、以下がとても参考になります。
まとめ
以上のような感じで、独自のバルーン型シェアボタンを作成することができます。
ソーシャルサービスデフォルトのボタンを使わないことで、多少はページ表示のスピードアップが図れるかもしれません。
今回僕は、「ページ表示スピードがかなり速くなるのかな？」と、テスト的に作成してみたのですが、Facebook以外は速いような気がします。ただ、FacebookはAPIでカウントを取得しても、Facebookサーバーの状態次第では、かなり遅くなります。ページの表示スピードを上げたい場合は、PHPで取得せず、ソーシャルカウントの取得方法まとめで紹介されている、JavaScriptを使った方法を試すと良いのかもしれません。
ともあれ、ソーシャルボタンを、全て自作することによって、それぞれのサービスが提供しているボタンを並べて使用するよりは、ボタンに統一感が出るのは間違いありません。なので、「ソーシャルバルーンボタンのバラバラ感が気に入らない」なんて人には、お勧めのスタイル設定方法です。
このアイコンフォントは再配布していいのですか？