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

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

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

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

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

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

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

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

HTML

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

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

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

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

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

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

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

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

CSS

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

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

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

プラグイン

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

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

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

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

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

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

ツール

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

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

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

あとがき!

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

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

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

  • このエントリーをはてなブックマークに追加

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