コピペで使える固定ソーシャルボタン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の指定なんかは必要になりますが、
とりあえずソーシャルボタンなら何でも!っていう方には
とても簡単に作成できるので使いやすいと思います。

あとがき!

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

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

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


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

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

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

MORE

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

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

MORE

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

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

MORE

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

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

MORE

MacやiPhoneのスクショはめ込み画像を作る

そうそう、こんな画像ってたまに必要なときがありますよね!笑 これ、わざわざ画像を合わせ...

MORE

CORE(TCD027)でトップページの新着記事一覧にページナビをつける

先日導入したCORE(TCD027)テーマについてのカスタマイズ記事でございます。 トップペー...

MORE

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

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

MORE

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

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

MORE

WordPressにヘッダー画像機能(カスタムヘッダー)がない場合の作り方

カスタマイズサポートにてヘッダー画像の導入方法を尋ねられることが多々あるので 設定手順を公開してお...

MORE

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

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

MORE

Message

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

flower