QLOOKアクセス解析
Home » WordPress, WordPress プラグイン

ソーシャルブックマークボタンを簡単に設置できる、プラグイン「WP Social Bookmarking Light」

2011年5月12日 949 views 2 Comments

「WP Social Bookmarking Light」は、ソーシャルブックマークボタンをブログ記事に表示する為のプラグインです。設置が簡単なことに加え、シンプルで分かりやすい管理画面。対応しているソーシャルブックマークが日本ユーザ向けなものが多く、日本人開発者のプラグインならではの気配りが感じられます。閲覧者にもひと目でわかるボタン配置がうれしい、ソーシャルネットワークを意識したサイト作りの足がかりになるプラグインです。

 

 

◆「WP Social Bookmarking Light」のインストール

「プラグイン」>「新規追加」をクリック。

wordpress_wpsocialbookmarking01_1

検索で「WP Social Bookmarking Light」と入力し「プラグインの検索」ボタンをクリック。

wordpress_wpsocialbookmarking01_2

「WP Social Bookmarking Light」の「詳細」をクリック。

wordpress_wpsocialbookmarking01_3

「いますぐインストール」ボタンをクリック。

wordpress_wpsocialbookmarking01_4

「Screenshots」タブをクリックすると、プラグインを視覚的に確認できます。

wordpress_wpsocialbookmarking01_5

「WP Social Bookmarking Light」の「プラグインを有効化」をクリック。

wordpress_wpsocialbookmarking01_6

有効化すると、ダッシュボードに「設定」>「WP Social Bookmarking Light」の項目が追加されます。続けて「WP Social Bookmarking Light」を設定していきましょう。

 

 

◆「WP Social Bookmarking Light」の設定方法

「設定」>「WP Social Bookmarking Light」をクリック。

wordpress_wpsocialbookmarking02_1

設定画面が表示されます。位置、個別記事のみ、ページ、をお好みで変更します。

ソーシャルブックマークボタンは、初期設定では「サービス」のようになっています。

wordpress_wpsocialbookmarking02_2

表示させたい項目を右側から左側へドラッグ&ドロップで移動させます。左側に移動させることで、連動して「サービス」に追加されます。ドラッグ&ドロップで順番移動させることもできます。

hatena_button、twitter、facebook_like、facebook_send、mixi、gree ボタンを追加した場合は、設定を変更するためのタブが現れます。

wordpress_wpsocialbookmarking02_3

wordpress_wpsocialbookmarking02_5

wordpress_wpsocialbookmarking02_6

wordpress_wpsocialbookmarking02_7

必要に応じて変更しましょう。以上で設定は完了です。最後に、「設定を保存」ボタンをクリックするのを忘れないように。

 

 

◆「WP Social Bookmarking Light」の実装確認

実際のサイトを確認すると、このようにソーシャルブックマークボタンが配置されました。

Twitter、はてなブックマーク、Facebookなど、代表的なサービスはほぼ網羅しており、ブックマーク数も表示可能です。しかし、すべてを表示すると重くなってしまい、また、ユーザが混乱してしまうもとになってしまうので、お気に入りのいくつかだけに絞って表示するとよいでしょう。

 

 

◆ ボタンと記事との間をあける

このままでも全く問題ありませんが、ボタンと記事の間にもう少しスペースが欲しいところ。ついでに変更してしまいましょう。

「外観」>「テーマ編集」をクリック。右カラムから「style.css」を選択します。

一番最後に、.wp_social_bookmarking_light{height: 20px;} と入力し、「ファイルを更新」ボタンをクリック。以上で完了です。

変更前 →

変更後 ↓

お好みでマージン幅を変えてあげましょう。

◆ Similar Posts

2 Comments »

Leave a comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.