コピペで使える固定ソーシャルボタンBOX


WordPressでスクロール時も固定表示されるソーシャルボタンを
簡単に設置するためのテンプレートを作りました。

不要なものは削除してお好きにカスタマイズしてください。

ソーシャルボタンBOXの仕様

  • コピペしてそのまま使用可能なので
    基本的にコードを書き換えたり、プラグインの導入は必要はありません。
  • Facebook、Twitter、Google+、はてブ、Pocket、
    おまけにブログランキングボタンを付けてみました。
  • トップページではなく各ページをシェアできます。
  • スマートフォンでは非表示にしています。

ソーシャルボタンBOXのイメージ

今回はこのようなソーシャルボタンを設置します。

コピペで使える固定ソーシャルボタンBOX

HTML

こちらは<body>タグの中に設置してください。

上部に設置すると記事など重要なコンテンツの表示が遅れる可能性があります。
</body>タグの手前くらいでちょうど良いと思います。

ランキングボタンを使用する場合、
【ランキングURL】にはあなたの専用ランキングURLを記入してください。

<!-- ソーシャルボタンBOX start -->

<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
<?php else: ?>

<ul id="sns_box">

<li><!-- いいねボタン -->
<script type="text/javascript">
    var url = encodeURIComponent(location.href);
    document.write('<iframe src="http://www.facebook.com/plugins/like.php?href=' + url + '&width=100&layout=box_count&show_faces=false&action=like&colorscheme=light&height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden;width:70px;height:65px;" allowTransparency="true"></iframe>');
</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><!-- Google+ボタン -->
<div class="g-plusone" data-size="tall"></div>
<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/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</li>

<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><!-- 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>

<li><!-- ブログランキング -->
<a href="【ランキングURL】" target="_blank"><img src="http://image.with2.net/img/banner/banner_good.gif" width="80" height="35" border="0" /></a>
</li>

<li><!-- ブログ村ランキング -->
<a href="【ランキングURL】" target="_blank"><img src="http://www.blogmura.com/img/www103_20_1.gif" width="103" height="20" border="0" alt="ブログランキング・にほんブログ村へ" /></a>
</li>

</ul>

<?php endif; ?>

<!-- ソーシャルボタンBOX end -->

ファイルを別に作成して呼び出す場合

上記のコードをエディタに記述し、「sns.php」という名前で保存します。
※名前は任意で変更してください

ファイルをテーマディレクトリにアップロードします。

/ドメイン名/wp-content/themes/テーマ名

<body>タグ内に以下のコードを記述します。

<?php get_template_part('sns');?>

CSS

今回はこのようにCSSを指定しました。
デザインはお好みで変更してくださいね。

#sns_box {
    background:#fff;
    width:120px;
    padding:15px 0;
    left:100px; /* 左からの距離 */
    bottom:20px; /* 下からの距離 */
    text-align:center;
    position:fixed;
    list-style-type:none;
    box-shadow:#ccc 0px 1px 3px; /* 影を付ける */
}
#sns_box li {
    line-height:250%;
}

他の方法でソーシャルボタンを設置する

上記の方法以外でソーシャルボタンを作成する場合は
プラグインかツールを使うのが便利です。

プラグイン

Sharebarというプラグインで縦並びのソーシャルボタンが設置できます。

Sharebar配布ページはこちらから
※管理画面からの検索も可能です

非常に便利なプラグインですが設定に少し手間が掛かる印象(´・_・`)

海外製プラグインのため、初期状態で表示されるボタンの削除、
はてブボタンなどは後から追加する必要があります。

デザインの調整が必須、その他ボタンが表示されないなどの
不具合もあったため私は現在使用していません。

導入される場合は親切に解説されているサイトも
たくさんありますので検索してみてください。

ツール

ソーシャルボタンを簡単に設置できるツールとして
忍者おまとめボタンというものがあります。

忍者おまとめボタンはこちらから

記事の外に固定表示させるのなら
別途CSSの指定なんかは必要になりますが、
とりあえずソーシャルボタンなら何でも!っていう方には
とても簡単に作成できるので使いやすいと思います。

あとがき!

以上、ソーシャルボタン設置用テンプレートでした。

各ページをシェアできるようにするのが
一筋縄ではいかない部分もあったりで少し時間が掛かりました(´ーωー`)

色々試行錯誤を繰り返したのでミスってたら報告ください。


こんな記事も書きました!

laptop-2838921_1280

WordPressでCSSの反映を確認しながら編集する方法

CSS編集方法についての前置き 「管理画面」→「外観」→「テーマ編集」→「スタイルシート」から ...

MORE

coffee-2446645_1280

ページ遷移時のフェード効果を実装するjQuery

リンクをクリックした時にページが滑らか~にフェードしながら遷移する方法です。 今回新たに作成し...

MORE

laptop-computer-1245981_1280

コピペで使えるCSSデザイン枠テンプレート

どシンプルなものからちょっと凝ったものまで、 CSSでスタイリングしたデザイン枠のテンプレートです...

MORE

alarm-clock-2132264_1280

無料で簡単にロゴを作れるツール「LOGASTER」が斬新!

Webサイトを作るときって、ただのテキストタイトルを表示するよりも独自のロゴがあれば締まるのにな~っ...

MORE

cup-2315554_1280

商用サイトで使えるフリー素材サイトまとめ

アイコンや壁紙を設定したりアイキャッチ画像を用意したり・・・ と、WEBサイトを作る時に欠かせない...

MORE

background-2850091_1280

CSSでテーブル使わずに簡単レスポンシブ!下線だけ引いて横並びデザイン

こういった感じの、シンプルな2カラムの表を作成したいなーと思いました。 デザインは、下...

MORE

computer-1185626_1280

CSSでヘッダーの真ん中に吹き出しっぽい三角をつけてみた

アメブロからWordPressへと個人ブログを移すにあたって「どんなデザインでサイトを作ろうかなー」...

MORE

season-1985856_1280

WordPressをカスタマイズする前に子テーマを作っておく

子テーマについての前置き WordPressはほとんどの方が既存のテーマから お好みのものを選ん...

MORE

food-2940553_1280

ローディング・読み込み中の画像を簡単に作成できるツール

ページを読み込みする時などに使う「ローディング画像」は ジェネレーターで簡単に作成することができま...

MORE

cup-2884023_1280

名刺代わりのサイトを思いっきしリニューアルしてみた件!カスタマイズTIPS色々書きました。

mayuの活動なんかをまとめただけの俗に言う自己紹介サイトがありまして、 ちょっとお手すきになった...

MORE

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

flower