ブログ内で常時表示するシェアボタンのソース公開

先日「ブログのカスタマイズは楽しいけど..」でブログに常にシェアボタンを表示させるボックスを付ける試みを始めましたが、やっとお見せできる形になってきました。公開＆解説していきまーす。

最初に謝辞

今回の常時表示シェアボックスの土台はこちらのブログ記事を参考にさせていただきました。先達の知恵に感謝！

はてなブログの追尾型ソーシャルボタンセットにPageTop／Downボタンを付ける - 太陽がまぶしかったから

仕様の概要

パソコンのブラウザでブログを見たときに、

はてなブックマークボタン
ツイートボタン
Pocketボタン

をブラウザ右下に常時表示します。

実際の表示については、パソコンのブラウザからみておられれば、右下にシェアボタンのボックスが出てるので確認してみてください。

スマフォのかたは見えてないので、スクショを用意しておきますね。

20140504110937

ソース

ソースも公開しますので、参考にしてください。

今回のシェアボタンにはサイト毎の設定は入っていません。

全く同じ仕様でよければ、はてなブログの「デザイン」から「フッター」の設定に以下のソースを設定することで、どなたのブログでも機能するはずですが、必ずテスト環境等で試してからお使いください。

<style>
/* シェアボックスのスタイル 右下に常時表示*/
#m_ShareFixedBox {
    bottom: 20px;
    right: 35px;
    height: 80px;
    position: fixed; /* ボックスを常時表示 */
    border: solid 1px #ddd;
    background-color: rgba(255, 255, 255, 0.6); /* ボックス背景の半透明化 */
    padding: 10px 3px 0px 10px;
    width: 250px; /* ボックス幅 */
    border-radius: 3px 3px 3px 3px; /* 角丸め */
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.1); /* ボックスの影 */
    z-index: 1000; /* 要素の重なり順 */
}
.m_ShareArea {
    margin: 0;
    padding: 0;
    list-style-type: none; /* リストのマーカーを消す */
}
.m_ShareArea li {
    float: left; /* 左に寄せて次の要素を右へ回り込ませる */
    margin: 0 5px 5px 0; /* 次の要素との間隔を指定 */
    padding: 2px;
    text-align: center;
}
.m_ShareArea:after {
    content: "";
    display: block;
    clear: both; /* 最後にfloat設定を解除 */
}
</style>
<div id="m_ShareFixedBox">
    <ul class="m_ShareArea">
        <li>
            <!-- はてなブックマークボタン -->
            <a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" 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>
            <!-- ツイートボタン -->
            <a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="vertical">ツイート</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        </li>
        <li>
            <!-- Pocketボタン -->
            <a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
            <script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
        </li>
    </ul>
</div>