記事の上部にソーシャル共有バーを設置しました

Hinemosu

当ブログ「Hinemosu」の記事を表示すると、画面上部にソーシャル共有バーが表示されるようになりました。

ソーシャル共有バーはこんな感じに表示されてるはずです。
2013-05-21_1131

デザイン的にはYahoo!ニュースを意識していまして、ぶっちゃけ見た目は丸パクリです。

あと共有バーには表示条件があって、ウィンドウ幅が1024以下で且つ300ラインスクロールするとフェードイン表示されるようになってますよ。

サンプル実装コード

参考までに使ってるコードはこんな感じ。

以下のコードを、single.phpなど記事表示用ファイルに追加。

<div id="floating_header">
    <div class="float_social_bar">
        <div class="header_twitterbtn">
            <a href="https://twitter.com/share" class="twitter-share-button" data-via="hideto" data-lang="ja">ツイート</a>
        </div>
        <div class="header_facebookbtn">
            <div class="fb-like" data-href="<?php the_permalink() ?>" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div>
        </div>
        <div class="header_hatebubtn">
            <a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php echo $title; ?>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20"></a>
        </div>
        <div class="commentbtn">
            <a href="#comments">コメントを見る（<?php comments_number('0件','1件','%件'); ?>）</a>
        </div>
    </div>
</div>

以下のコードを、single.phpなど記事表示用ファイルの最後の方に追加。

<script>
$(function(){
    var social_bar = $('#floating_header');
    var floating_end = $('#floating_box_end');
    var floating_end_offset = floating_end.offset();

    $(window).scroll(function (){
        if($(window).scrollTop() > (floating_end_offset.top)) {
            social_bar.fadeOut();
        } else if($(window).scrollTop() > 300 && ($(window).width() < 1024) ) {
            social_bar.fadeIn();
        } else {
            social_bar.fadeOut();
        }
    });
});
</script>

以下のコードを、style.cssなど記事表示を制御しているCSSファイルに追加。

#floating_header{width: 100%;background-color: #F8F8F8;position: fixed;top: 0;height: 48px;display:none;z-index:10;border-bottom: 2px solid #5A5A5A;}
.float_social_bar{margin:12px;height: 48px;}
.header_twitterbtn, .header_facebookbtn {float:left;width: 128px;}
.header_hatebubtn{float:left;}
.commentbtn {float:right;}
.commentbtn a{vertical-align: middle;font-size: 12px;color: black;font-weight: bold;padding: 2px 12px;}

以上でソーシャル共有バーが表示されるはずですよ。

そんな感じで！