Twitter、Facebook、はてなブックマークなどのソーシャルメディアの共有ボタンを一括で簡単に設置できるプラグインです。
ワードプレスでは定番のプラグインで利用している方も多いので、しょっちゅう見かけると思います。
↑こういう奴です。
特長
- 簡単設定
- デフォルトで日本語化
- 色々な種類のソーシャルボタンがある
- PHPで任意の場所に設置することも可能
数年前はデザインが崩れて修正するのが大変だったので他の外部サービスに頼ることもあったのですが、今は綺麗に整っています。
これでほぼ完璧なプラグインなので迷わず導入できます。
インストールと使い方
WordPressの管理画面から、「プラグイン」＞「新規追加」＞「検索」で【WP Social Bookmarking Light】を検索してプラグインをインストールします。
管理画面＞「設定」に「WP Social Bookmarking Light」の項目が追加されていますので、そこから設定が行えます。
詳細設定
簡単な設定だけ行えば、後はほとんどそのままの設定で使えます。
| 項目 | 説明 |
|---|---|
| 位置 | 表示位置の設定 |
| 個別記事のみ | 個別記事での表示をするかどうか |
| ページ | 個別ページでの表示をするかどうか |
| サービス | 表示したいボタンをドラッグ&ドロップで選択 |
表示位置
【Top】：記事の上に表示
【Bottom】：記事の下に表示
【Both】：記事の上下両方に表示
【None】：非表示
非表示って何だ？と思われるかもしれませんが、任意の場所にコードを張り付けて表示する時に使います。
表示ページ
【個別記事のみ】：個別記事での表示・非表示
【ページ】：個別ページでの表示・非表示
サービス
左のボックスが表示されるサービスのボタンなので、右のボックスから追加したいサービスをドラッグ&ドロップします。
デフォルトでよく使われるFacebook、Twitter、はてなブックマークが設定されています。
何を設定して良いのかわからない場合、以下がスタンダードな設置ボタンです。
- Facebook（デフォルトで設定済み）
- Twitter（デフォルトで設定済み）
- はてなブックマーク（デフォルトで設定済み）
- LINE
- mixi
- Google +1
- Poket
- Evernote
Google +1は日本ではいまいち泣かず飛ばずなのですが一応。PoketやEvernoteは意外と利用者がいるようなので、入れておくとちょっと感謝されるかも？
mixiチェックの利用は登録が必要のようで、ちょっとめんどくさいかも。
スタイル
一般設定のタブの一つ右にある【スタイル】を選択するとスタイルシートの設定ができます。
ほとんどデフォルトのままで揃っています。
.wp_social_bookmarking_light {
border: 0 !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
margin: 0 !important;
}
上下余白をもう少し開けたい場合は、上記のように一番上の「.wp_social_bookmarking_light」の部分を少し修正します。
ただ、これだと設置したボックス全部に適用されてしまうので、設置箇所ごとに変えたい場合はプラグインではなくて、自分でCSSを設定した方が良さそうです。
個人的にはここはいじっていないので、プラグインのアップデートの際はどうなるのかわかりません。元に戻ってしまうとちょっとめんどうかも。
その他
表示させるサービスに設定していると個別設定用のタブが表示されます。
言語を日本語に選択するくらい。自分でアカウントも設定できます。
ちなみに、twitterボタンの右側がなぜか不自然に少し空くのですが、これは2桁用のようです。
綺麗に揃えたい場合は、上で説明した【スタイル】にある一番下にあるコードを修正します。
.wsbl_twitter{
width: 85px;
}
「width: 100px;」にところを85くらいにすると丁度良くなります。ただ、これだと2桁になると表示がずれてしまうようです。
ということで代替案として、twitterボタンを一番右に設置すれば余白が目立たなくなります。
まぁ、個人的には余白が空いてもそれほど気にはなりません。
言語を日本語に設定するくらい。ほとんどがデフォルトでベストな状態になっているかと思います。
「WP Social Bookmarking Light」を任意の場所に設置する方法
これが結構重要です。簡易設定からできる表示位置だと、出て欲しいところに表示してくれなかったりします。
１．【一般設定】の「位置」を「None」にしておきます。
<?php if(function_exists("wp_social_bookmarking_light_output_e")){wp_social_bookmarking_light_output_e();}?>
２．contents.phpなどの表示させたい位置に上記のコードを貼り付けます。
注意点
上記のコードを貼り付けたままでプラグインを削除したりすると表示がおかしくなったりします。
何らかのメンテナンスや新規サイト作成のためにデザインのコピペなどをしていると、気づかないで嵌ることがあります。