FacebookやTwitter、はてなブックマークのソーシャルボタンをWordPressサイトに付けたいと思い、Sharebar を設置する事にしました。

特徴

Sharebarは、ページをスクロールしている際も、ソーシャルボタンを常に表示する事ができるのが面白いと思います。以下の画像が Sharebar です。

ページの指定箇所にソーシャルボタンを表示できるプラグインも別途導入したいと考えていますが、まずは、Sharebarを導入したいと思います。

プラグインを有効化

プラグインを有効化するところまでは、通常のWordPress導入手順と同じです。

# cd /usr/local/src
# wget http://downloads.wordpress.org/plugin/sharebar.zip
# unzip sharebar.zip
# mv sharebar /(WordPress導入ディレクトリ)/wp-content/plugins/

次に、WordPress管理画面のプラグイン一覧画面で「Sharebar」を有効化します。

すると、細かいSharebarの設定はまだ行っていませんが、サイトには Sharebar ソーシャルリンクが表示されるようになります。

Sharebarの設定

WordPress管理画面の「設定」-「Sharebar」で「Custom Sharebar」画面を表示します。

Available Buttoms では、いくつかのソーシャルリンクが用意されています。Facebook や Twitter はデフォルトで入っていますが、はてなブックマークは入っていません。よって、この後に必要な設定を行います。

以下の画像は、私が設定した内容です。一番上にFacebook、２番目にTwitter、３番目にはてなブックマーク（追加しました）を設定しています。

はてなブックマークの追加

はてなブックマークを追加する際は、「Add New Button」をクリックします。

Nameには適当に「hatena」、Positionは表示順の数字を入れるので「3」、Big/Small Button は、「はてなブックマークボタンの作成・設置について」で生成したコードを貼り付けます。

Add Button をクリックしたら、はてなブックマークの追加が完了です。

Facebookの画像が見切れているので修正

デフォルトではFacebook のソーシャルボタン画像が見切れている状態になっています。

以下の例のようにキレイになっていない状態だと思います。

上画像のように修正するには、Sharebar設定画面にて、facebook の「Edit」画面を表示させ、以下のように「width」の値を修正しました。修正するwidth値は、Sharebarを設置するサイトによって変動するかと思います。一番キレイに表示される値を探してみてください。

上の私のサイトの例では、以下のように設定しています。

• Big Button
  • １番目のwidth：デフォルト60 から 65 に変更
  • ２番目のwidth：デフォルト45 から 70 に変更
• Small Button
  • １番目のwidth：デフォルト85 から 120 に変更
  • ２番目のwidth：デフォルト85 から 120 に変更

Sharebarの表示位置

Sharebarが表示される位置を微修正したい場合は、Sharebar設定画面の右上の表示されている「Settings」リンクから移動できるSetting画面で設定出来ます。

私のサイトは、Left Offset を 70 に設定し、Sharebar Width を 100 に設定しました。

以上で良い感じで Sharebar が表示されるようになりました。