Sharebarの設定・使い方!WordPressに追従型のソーシャルボタンを設置する方法

どうも。葉です。

WordPressには、ソーシャルボタンボタン設置用のプラグインがたくさんあって、簡単にソーシャルボタンを設置することができます。

しかし、使ってみるとどのプラグイン似たかよったかだったりします。

そんな中で、プラグイン「Sharebar」は、他のプラグインにはない、記事のサイドでソーシャルボタンを追従表示させてくれる機能があり、初めて見るけた時は、「おっ!いいな!」と思いました。

ということで、この記事では、そんなプラグイン「Sharebar」の設定や使い方について詳しく解説していきます。

1.Sharebarでできること

プラグイン「Sharebar」では、

  • 追従型のソーシャルボタン
  • 平行型のソーシャルボタン

の2種類を設置することが可能です。

1-1.追従型のSharebar

追従型の「Sharebar」は、画面をスクロールしても常に記事の横にソーシャルボタンが表示され続けます。

表示条件は、ブラウザやスマホ、タブレットの横幅が1000px以上の時です。(1000pxは、変更可能です。)

追従型Sharebar

1-2.平行型のSharebar

平行型の「Sharebar」は、ブラウザやスマホ、タブレットの横幅が1000px未満になった時に記事上部ソーシャルボタンを表示してくれます。

スクロールしても追従はしてくれません。

並行型Sharebar

基本的にできることは、この2つです。「気に入った!」という方はぜひインストールしてください。

2.Sharebarのインストール・使用方法

では、プラグイン「Sharebar」のインストール手順を紹介していきます。

WordPress管理画面の左メニューより「プラグイン→新規追加」をクリックします。

sharebarのインストール手順1

プラグインの検索窓に「Sharebar」と入力するとプラグイン「Sharebar」を検索します。そこで、「Sharebar」の「今すぐインストール」をクリックします。

sharebarのインストール手順2

「有効化」をクリックします。

sharebarのインストール手順3

「Sharebar」が有効化されていることを確認します。

sharebarのインストール手順4

この状態で、ブログの記事を確認すると次のように記事の左側に追従型のソーシャルボタンが設置されているはずです。

sharebarのインストール手順5

このソーシャルボタンは、記事を下にスクロールしても一緒に追従して記事の左サイドに表示され続けます。

sharebarのインストール手順6

ただし、ブログを表示しているブラウザ、タブレット、スマホの横幅が1000px未満の場合は、平行型の「Sharebar」が表示されます。

並行型Sharebar

以上で、プラグイン「Sharebar」のインストール及び、簡単な使用方法の解説は終わります。

3.ソーシャルボタンの順番並べ替えや新規ボタンの追加/削除

ここでは、「Sharebar」に表示されるソーシャルボタンの順番を並べ替える方法、表示/非表示を切り替える方法、新規ボタンを追加/削除する方法について解説していきます。

WordPress管理画面の左メニューより「設定→Sharebar」をクリックします。

sharebarの設定1

すると、「Sharebar」の設定画面に移動します。それぞれについて解説していきます。

2-1.ソーシャルボタンの順番並び替え

まずは、ソーシャルボタンの順番を並び替えてみましょう。

「POSITION」の「↑」または「↓」をクリックすることで、表示するソーシャルボタンの順番を並び替えることができます。

sharebarの設定2

2-2.表示/非表示の切り替え

次に、ソーシャルボタンの表示、非表示の切り替え方を紹介します。デフォルトで、非表示になっている「pinterrest、reddit」を例に解説していきます。

非表示→表示

まず、「pinterrest、reddit」にチェックを入れて「Enable」を選択後に「Update」をクリックします。

sharebarの設定3

すると、次のように「pinterrest、reddit」がソーシャルボタンに表示されています。

sharebarの設定3-1

表示→非表示

次に、表示になった「pinterrest、reddit」を非表示に戻してみましょう。

先ほどと同様に「pinterrest、reddit」にチェックを入れた後、今度は「Disable」を選択して「Update」をクリックします。

sharebarの設定4

すると、先ほど表示されていた「pinterrest、reddit」が非表示にいなっています。

sharebarの設定4-1

2-3.不要なボタンを削除する

次は、不要なソーシャルボタンを削除します。今後も使用しないであろうボタンは削除してしまいましょう。

今回は、「reddit、stumbleupon、email」を削除します。

「reddit、stumbleupon、email」にチュックを入れて、「Delete」を選択し、「Update」をクリックします。

sharebarの設定5

すると、次のように「reddit、stumbleupon、email」が「Available Buttons:」から消えています。

sharebarの設定6

2-4.新規ボタンの追加方法(はてブ、G+1、Pocket)

次に、新しいソーシャルボタンの追加方法を解説します。はてなブックマークボタンなどは、追加したい人も多いはずです。

手順も丁寧に解説しているので、真似してみてください。

はてなブックマークボタンを追加する

「Sharebar」にはてな「ブックマークボタン」を追加していきます。

まず、「Add New Button」をクリックします。

sharebarの設定7

次に、こちらのページよりはてな「ブックマークボタン」のコードを取得します。

はてなブックマークボタンの作成・設置について

sharebarの設定7-1

「Sharebar」の設定画面に戻り、①名前、②順番(好きな順番でOK)を入力後、③「Enabled?」にチェックを入れます。

④「Big Button」と⑤「Small Button」には、先ほどコピーしたコードを貼り付けます。④と⑤のデザインを別のものにしたい場合は、異なるコードを取得してください。

「Add Button」をクリックします。

sharebarの設定8

  • Big Button
    表示された画面の横幅が1000px以上の時、こちらのボタンが表示されます。
  • Small Button
    表示された画面の横幅が1000px未満の時、こちらのボタンが表示されます。

次の画面で、追加したはてなブックマークボタンが非表示状態になっていることがあるので、「非表示→表示」を参考に、はてなブックマークボタンを表示可能な状態にしましょう。

Google Plus Oneボタンを追加する

次に、「Google Plus Oneボタン」を追加していきます。

まず、「Add New Button」をクリックします。

sharebarの設定9

次に、こちらのURLより「Google Plus Oneボタン」のコードを取得します。

+1 Button  |  Google+ Platform for Web  |  Google Developers

sharebarの設定9-1

「Sharebar」の設定画面に戻り、①名前、②順番(好きな順番でOK)を入力後、③「Enabled?」にチェックを入れます。

④「Big Button」と⑤「Small Button」には、先ほどコピーしたコードを貼り付けます。④と⑤のデザインを別のものにしたい場合は、異なるコードを取得してください。

「Add Button」をクリックします。

sharebarの設定10

  • Big Button
    表示された画面の横幅が1000px以上の時、こちらのボタンが表示されます。
  • Small Button
    表示された画面の横幅が1000px未満の時、こちらのボタンが表示されます。

次の画面で、追加したはてなブックマークボタンが非表示状態になっていることがあるので、「非表示→表示」を参考に、はてなブックマークボタンを表示可能な状態にしましょう。

Pocketボタンを追加する

次に、「Pocketボタン」を追加していきます。

まず、「Add New Button」をクリックします。

sharebarの設定11

次に、こちらのURLより「Pocketボタン」のコードを取得します。

Pocket for Publishers: Pocket Button

sharebarの設定11-1

「Sharebar」の設定画面に戻り、①名前、②順番(好きな順番でOK)を入力後、③「Enabled?」にチェックを入れます。

④「Big Button」と⑤「Small Button」には、先ほどコピーしたコードを貼り付けます。④と⑤のデザインを別のものにしたい場合は、異なるコードを取得してください。

「Add Button」をクリックします。

sharebarの設定12

  • Big Button
    表示された画面の横幅が1000px以上の時、こちらのボタンが表示されます。
  • Small Button
    表示された画面の横幅が1000px未満の時、こちらのボタンが表示されます。

次の画面で、追加したはてなブックマークボタンが非表示状態になっていることがあるので、「非表示→表示」を参考に、はてなブックマークボタンを表示可能な状態にしましょう。

4.シェアバーのデザイン・表示位置の変更

次はシェアバーのデザイン設定を行っていきます。

WordPress管理画面の左メニューより、「設定→Sharebar」をクリックします。

sharebarのデザイン設定1

次に、「Settings」をクリックします。

sharebarのデザイン設定2

すると「Sharebar Settings」に移動するので各項目について設定していきます。

4-1.シェアバーを表示させる投稿タイプを設定:Add Sharebar

「Add Sharebar」では「Sharebar」を表示させる投稿タイプを選択します。

sharebarのデザイン設定3

それぞれの項目に付いて解説していきます。

①Automatically add Sharebar to posts? (only affects single posts)

投稿にシェアバーを表示します。チェックを入れたままにしてください。

②Automatically add Sharebar to pages? (only affects pages)

固定ページにシェアバーを表示します。チェックを入れたままにしてください。

4-2.表示オプション:Display Options

「Display Options」では、Sharebarの表示位置や追従型から平行型への移行のタイミングなどについて設定します。

sharebarのデザイン設定4

それぞれの項目について解説していきます。

①Display horizontal Sharebar if the page is resized to less than 1000px?

ブラウザやスマホ、タブレットの横幅が1000px未満の時、追従型の「Sharebar」が平行型に変わります。

平行型の「Sharebar」を表示させたい場合のみチェックを入れてください。チェックを外すと、ブラウザやスマホ、タブレットの横幅が1000px未満の時になっても「Sharebar」が平行型に移行しません。つまり、ソーシャルボタンが表示されないとうことです。

②Display maker credit link?

チェックを入れると「Sharebar」製作者への広告リンクが表示されます。

③Sharebar Position

Sharebarの表示位置を選択できます。

  • Left:Sharebarを左側に表示
  • Rigth:Sharebarを右側に表示

④Left Offset (used when positioned to left)

Sharebarを左側に表示した場合の「Sharebar」と記事との距離を調節します。

⑤Right Offset (used when positioned to right)

Sharebarを左側に表示した場合の「Sharebar」と記事との距離を調節します。

⑥Minimum width in pixels required to show vertical Sharebar to the left of post (cannot be blank)

ブラウザ、タブレット、スマホのピクセル数がここで指定したピクセル数より小さくなった時に、「Sharebar」が追従型のから平行型に変わります。

①にチェックを入れている場合のみ設定が必要です。

4-3.Customize:シェアバーのカスタマイズ

「Customize」では、「Sharebar」の背景色や枠線の色を選択します。

sharebarのデザイン設定5

①Sharebar Width:

「Sharebar」の横幅を指定できます。おすすめは、100pxです。

②Twitter Username:

ツイートされた際に「@〇〇から」という文言がツイート文の中に追加されます。参考画像を載せておきます。

③Sharebar Background Color:

「Sharebar」の背景色を指定できます。次のサイトを参考に背景色を選んでみてください。

WEB色見本 原色大辞典 – HTMLカラーコード

④Sharebar Border Color:

「Sharebar」の枠線の色を指定できます。次のサイトを参考に枠線の色を選んでみてください。

WEB色見本 原色大辞典 – HTMLカラーコード

以上の設定が終わったら「Update Settings」をクリックします。

sharebarのデザイン設定6

シェアバーのデザイン・表示位置の変更の解説は終わります。

5.まとめ

この記事では、

  • Sharebarでできること
  • Sharebarのインストール・使用方法
  • ソーシャルボタンの並べ替えや新規ボタン追加・削除
  • シェアバーのデザイン・表示位置の変更

について解説しました。

最近では、テンプレートにデフォルトでソーシャルボタンが表示されているものがほとんどです。しかし、「Sharebar」のように記事の横で、ずっと追尾して表示してくれるようなテンプレートは、ほとんど見たことがありません。

ソーシャルボタンを追従させたいのであれば、「Sharebar」を導入して見てください。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします