jQueryを使ってフェードイン／アウトするSNSボックスを作成する

今回もお問い合わせを頂いたので記事にしました

Hide and seek / Two Roses

当ブログをPCブラウザで見た時、ページを一定位置までスクロールすると画面の左からビヨーンとフェードインして現れる、TwitterやFacebookなどの「SNSボックス」。一定位置より上にスクロールで戻ると逆に画面外へとフェードアウトするようにも設定してます。

この機能は昨年末のカスタマイズ作業にて実装しました。当時のカスタマイズまとめ記事に書いています。

【参考】年末ブログカスタマイズ祭り・最近の流行を反映させてみた

以前、「トップに戻るボタン」の再作成でjQueryを導入した際も、設置した直後に「作り方を教えて！」というリクエストがあり、記事を書きました。

【参考】トップに戻るボタンをjQueryでニュルッと改造する

今回紹介するSNSボックスの作り方も、上記の「トップに戻るボタン」を応用させて作った機能になります。

本日、このSNSボックスに関して「ソースコードを教えて欲しい」というリクエストを頂きましたので、早速エントリーを書いてみます。

まずは「jQuery Easing Plugin」を導入する

↑jQuery Easing Pluginのページで「jquery.easing.1.3.js」というファイルをダウンロード。

ダウンロードしたファイルをサーバにアップロードします。アップロード先は自分のブログが現在使用しているテーマフォルダでいいと思います。私はテーマフォルダに「js」というサブフォルダを作り、その中にjQuery関連ファイルを全てアップしてます。

アップロードが完了したら、ブログのheadタグ内にjQueryの宣言コードを追加します。

<?php wp_enqueue_script('jquery'); ?>
<?php wp_enqueue_script('easing', get_bloginfo('template_url') . '/js/jquery.easing.1.3.js', array('jquery')); ?>

1 2	<?php wp_enqueue_script('jquery'); ?> <?php wp_enqueue_script('easing', get_bloginfo('template_url') . '/js/jquery.easing.1.3.js', array('jquery')); ?>

1行目をすでに書いている場合は重複して追加する必要はありません。

2行目が今回の追加コード。WordPressであれば「header.php」というテンプレートファイルがヘッダー定義になってると思いますので、その中の「wp_head」を定義している直前に追加しています。

私自身、まだあんまりjQueryが分かっていないので、いろんな記事を参考にしながら作ってます。上で紹介したjQuery Easing Pluginに関しては、以下記事がとても分かりやすく解説して下さっていて、私もこちらで勉強して設置に成功しました。

http://ozpa-h4.com/2012/12/11/jquery-easing-plugin-effect-pattern/

jQueryのエフェクトに変化を加える「jQuery Easing Plugin」の使い方と、全33種類のエフェクトサンプルを作成してみた | OZPAの表4

記事ページにSNSボックスのHTMLコードを追加する

headタグの記述が終わったら、次はSNSボックスのHTMLコードを追加します。私は記事ページテンプレート（single.phpなど）の先頭に以下のコードを追加しています。

<ul class="snsLeftFix">
<li><a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical" 
title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" 
alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</li>
<li><div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="box_count" data-width="55" data-show-faces="false"></div>
</li>
<li><a href="https://twitter.com/share" class="twitter-share-button" data-via="" data-url="<?php the_permalink(); ?>" data-lang="ja" data-count="vertical" data-text=" RT @★★アカウント: <?php the_title(); ?>">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</li>
<li><g:plusone size="tall"></g:plusone>
<script type="text/javascript">
window.___gcfg = {lang: 'ja'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</li>
</ul>

<li><a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical"

title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif"

alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>

</li>

<li><div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="box_count" data-width="55" data-show-faces="false"></div>

</li>

<li><a href="https://twitter.com/share" class="twitter-share-button" data-via="" data-url="<?php the_permalink(); ?>" data-lang="ja" data-count="vertical" data-text=" RT @★★アカウント: <?php the_title(); ?>">ツイート</a>

</li>

window.___gcfg = {lang: 'ja'};

(function() {

var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

po.src = 'https://apis.google.com/js/plusone.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

})();

</script>

</li>

</ul>

SNSボックスはulタグで作成。ulタグにクラス「snsLeftFix」を設定し、CSSでデザインを変更できるようにしています。

各ボタンのコード内訳は、

◆はてなブックマークボタン … 2～6行
◆Facebookいいね！ボタン … 7～8行
◆Twitterシェアボタン … 9～11行
◆Google+ボタン … 12～21行

となっています。3つめのTwitterシェアボタンは「★★アカウント」という箇所をご自身のTwitterアカウントに変更してください。

CSSでデザインを整える

次はCSS。以下のサンプルコードは私の記述例ですので、お使いのブログに合うよう自由にカスタマイズされてください。

.snsLeftFix {
padding: 10px;
margin-left: -700px;
top: 165px;
position: fixed;
background-color:#fafafa;
border-radius: 5px;         /* CSS3 */
-moz-border-radius: 5px;    /* Firefox */
-webkit-border-radius: 5px; /* Safari,Chrome */
}
.snsLeftFix li {
list-style-type: none;
margin: 5px 0;
}

.snsLeftFix {

padding: 10px;

margin-left: -700px;

top: 165px;

position: fixed;

background-color:#fafafa;

border-radius: 5px; /* CSS3 */

-moz-border-radius: 5px; /* Firefox */

-webkit-border-radius: 5px; /* Safari,Chrome */

}

.snsLeftFix li {

list-style-type: none;

margin: 5px 0;

}

重要な箇所は3つ。3～5行目です。

まず「margin-left（3行目）」と「top（4行目）」で値を指定しています。ページ先頭から165ピクセルほど下の位置。

左側はマイナスの値を指定してますので、ブラウザの外、つまり画面外に設置する指定となり、最初はSNSボックスが見えてない状態。

さらに「position: fixed（5行目）」の指定により、画面をスクロールしてもSNSボックスは固定されて同じ場所から動かない、というカラクリ。

この値を「ある位置まで来たらmargin-leftの値を変更しSNSボタンをページ内に出現させる」のと、「最初にインストールしたjQuery Easing Pluginの機能を利用してアニメーション効果を付ける」のがjQueryのお仕事。

jQueryでフェードイン／フェードアウトの動きを指定する

最後はjQueryのコード。私は前述の通り、使用中のWordPressテーマフォルダに「js」というサブフォルダを作り、その中にjQueryファイルをアップロードしています。

jQuery(function() {
var showFlug = false;
var snsLeftFix = jQuery('.snsLeftFix');
snsLeftFix.css('margin-left', '-700px');
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 900) {
if (showFlug == false) {
showFlug = true;
snsLeftFix.stop().animate({'margin-left' : '-100px'}, 650, "easeOutBounce"); 
}
} else {
if (showFlug) {
showFlug = false;
snsLeftFix.stop().animate({'margin-left' : '-700px'}, 800, "easeInOutBack"); 
}
}
});
});