お手軽実装！SNSアイコンからシェアボタンがポップアップする「Social Media Sharing Bubbles」
Contents
お手軽実装！SNSアイコンからシェアボタンがポップアップする「Social Media Sharing Bubbles」
今やどんなサイトにも設置されているSNSアイコン。
おしゃれな無料アイコンもたくさん配布されていますね。
でも、アイコンだけならスマートに収まるのですが、「tweetボタン」や「いいね！ボタン」など、シェアボタンまで並べだすと見た目にごちゃごちゃとしてデザイン性に欠けます。
そこで今回は、アイコンにシェアボタンを隠しておいて、マウスをあてたときだけポップアップで現れるjQueryのスクリプト「Social Media Sharing Bubbles」をご紹介します。
デモはこちら
ソースはこちらの記事内の「Download Source Code」からダウンロードできます。
ダウンロードしたソースの中にはデモ用のファイルも入っているので、実装も簡単です。
1.ファイルを読み込む
まずは<head>内でjQueryとcssを読み込みます。
サンプルにjQueryが入っていますが、もちろんcdnでも大丈夫です。
[HTML]
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
2.スクリプトを記述
<body>の閉じタグの直前で、次のスクリプトを読み込みます。
記述するJavaScriptはこれだけ。アイコンのclassと表示、非表示を切り替えるcss部分のみです。
[HTML]
$(function(){
$(‘.glyph’).on(‘mouseover’, function(e){
$(this).addClass(‘active’);
$(this).find(‘.bubble’).css(‘display’,’block’);
}).on(‘mouseleave’, function(e){
$(this).find(‘.bubble’).css(‘display’,’none’);
$(this).removeClass(‘active’);
});
});
</script>
3.HTMLを記述
以下はTwitterの場合のソースです。
その他のSNSアイコンを追加する場合は、①の中に、Twitterと同じ形で追加します。
アイコンは背景画像なので、HTMLには記述しません。
[HTML]
<div class="clearfix">
①<!–ここに追加していく–>
<div class="glyph twitter">
<div class="bubble">
<a href="SNSへのリンク" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @twitter-acount</a>
<script>tweetボタンやいいね！ボタンやシェアボタンのスクリプト</script>
</div>
<a href="SNSへのリンク" target="_blank"></a>
</div><!– @end .glyph .twitter –>
<!–ここまで–>
</div><!–clearfix–>
</div><!–social-links–>
4.cssを記述
デモに付属しているstyle.cssをそのまま読み込めば問題ありませんが、ポップアップには直接関係のないスタイルもあります。
1〜71行目（Googleフォントの読み込み部分から、/** social links **/まで）は、次の部分だけ残しておけばOKです。
[CSS]
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/** social links **/以下は全てポップアップに関わってくるので、そのまま残しておきましょう。
ここまでで、ポップアップが完成します。
■シェア数がはみ出る？！
一つ気になるのが、Facebookアイコンにマウスオーバーしたときに、シェア数が右にはみ出てしまうということ。
CSSを見てみると、吹き出しは背景画像になっています。
cssフォルダの中に「bubble-wide.png」というファイルがありました。
この幅が足りないために、テキストがはみ出てしまっているようです。
■対策
新たに「bubble-sowide.png」という画像を作成し、style.cssに次のコードを追加しました。
[CSS]
.glyph .bubble.sowide {
width: 200px;
left: -6px;
background: url(‘bubble-sowide.png’);
}
きれいに収まりました！
いかがでしょうか。
省スペースでデザインの邪魔にならないのがいいですね。
SNSボタンをスマートに見せたいという時に、ぜひ試してみてください。