Pocket

WordPressプラグイン「Sharebar」でソーシャルボタン設置

  • add this entry to hatena bookmark

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

特徴

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、2番目にTwitter、3番目にはてなブックマーク(追加しました)を設定しています。

WordPress Plugin Sharebar

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

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

Sharebar Add-New-Button

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

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

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

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

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

Sharebar表示例

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

Sharebar Facebook width設定例

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

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

Sharebarの表示位置

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

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

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

Pocket

One thought on “WordPressプラグイン「Sharebar」でソーシャルボタン設置

  1. Pingback: ワードプレス:スクロールしても記事と共に着いてくるSNSボタンのプラグイン | ブログ

コメントを残す

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


*

チェックサイト RSS Feed読者登録はいかがでしょうか?RSS配信中です。