• コメントを書く

『Sharebar』の設定方法－ソーシャルボタンがどこまでもついてくる!?

SEOでのアクセスに加えて、現在ではSNS(Facebook、Twitter、Google＋、LINEなど・・)の拡散によるアクセスは欠かせないものとなってきています。

記事の上や下に配置されているソーシャルボタンはよく目にしますが、WordPressのプラグインの『Sharebar』はそれらのソーシャルボタンをでかでかと記事の横に配置することができます。

しかも！ページのスクロールと共に追尾してきます。

※スマホやiPhoneでは表示されません。

Sharebarを設置することで記事の上下のソーシャルボタンの押し忘れ防止や、追尾型のため、よりクリック率を高める効果があります。

では、Sharebarの設定方法を解説していきますね。

『Sharebar』をインストールする

管理画面からインストールする場合

メニューからプラグイン → 新規追加をクリックしましょう。

検索窓に『Sharebar』と入力してプラグインの検索をクリックします。

Sharebarを確認して今すぐインストールをクリックしましょう。

自動的にプラグインのインストールが始まります。インストールが完了してそのまま使用する場合はプラグインを有効化をクリックして完了です。

直接ダウンロードする場合

Sharebarを直接ダウンロードする場合はコチラ⇐⇐をクリックしてダウンロードすることができます。

細かい解説は

を参考にしてください。

『Sharebar』を設定していこう

使用するSNSボタンの選択

管理画面のメニューから、設定の上にカーソルを持っていきSharebarを選択します。

開いた画面を下にスクロールしていきます。デフォルト(初期設定)では様々なボタンが設置されているので、使用しないボタンを選択して削除していきます。

使用しないボタンは左側に☑していきます。背景がグレーになっている部分は無効となっているので削除しなくても問題はありませんが、使う予定のないものは削除しておきましょう。

注：Facebookの「いいね!」ボタンと別に「Share」ボタンを実装してい人はNAME：sharethisは削除せずに残しておきましょう。

☑を入れ終わったら、SNSボタン一覧の下にあるDeleteを選択してUpdateをクリックしたら削除完了です。

Sharebarのカスタマイズ方法

次にSharebarの表示される部分をカスタマイズしていきましょう。設定画面の右上のSettingsをクリックします。

以下の画像部分を編集していきます。

①ではSharebarの表示場所を左右選択することができます。

②ではSharebarを左側に配置した際に、記事からどのくらいの間隔をあけるかを設定できます。

③ではSharebarを右側に配置した際に、記事からどのくらいの間隔をあけるかを設定できます。

④は1000と入力してあるままで問題ありません。

⑤は表示されるSharebarの横幅を入力します。90～110あたりが妥当です。任意で入力してください。

⑥はTwitterのユーザー名を入力することができます。デフォルトではSharebarの開発者のユーザー名となっているので消去しておきましょう。Twitterユーザー名を入力しておくと、ツイートされた際に「＠××××から」と表示されるようになります。

⑦、⑧ではSharebarのBackground(背景)とBorder(枠)の色を変更することができます。カラーコードの入力部分をクリックするとカラーチャートが表れるので、好みの色を選択しましょう。

最後にUpdate Settingsをクリックして編集完了です。必ず忘れずにクリックして終わらせましょう。

ソーシャルボタンの修正・追加

これまでの設定ではまだ不十分な点がいくつかあります。その点の修正を行っていきます。

Sharebarは海外のプラグインなので海外向けのSNSが多いですが、デフォルトで表示されていないソーシャルボタンも追加することができます。

それらの方法を解説していきます。

Facebook「いいね!」ボタンの修正

デフォルトではFacebookボタンは「エラー」と表示されていてSharebarではきちんと表示されない状態になっています。

右上のメニューのHomeをクリックして設定画面を表示させます。

ボタン一覧画面からFacebookの部分のEditをクリックします。

Nameの部分はボタン一覧画面で表示される名前です。PositionはSharebarの上から何番目に表示するボタンかを入力します。Enabled?に☑すると有効化(使用する)ということになります。

Big Buttonでは、「いいね!」ボタンのタグを入力します。デフォルトのままでは表示幅に問題がありきちんと表示されないという・・(^_^;)

そこで、下記の部分を変更します。

これで、width(横幅)のサイズを変更すれば表示されるようになります。

Small Buttonは使用しないのでそのままでOKです。

最後にUpdate Buttonをクリックして完了です。

Facebook「share」ボタンの修正

設定画面からボタン一覧のsharethis部分のEditをクリックします。

現状のままでは不要な表示が含まれているのでその部分を消去します。

最後にUpdate Buttonをクリックして完了です。

Twitterボタンの修正

設定画面からボタン一覧のTwitter部分のEditをクリックします。

現状のままだと、記事がシェアされた時に説明文の冒頭に「Tweet」という文字が入ってしまいます。その部分を消去します。

最後にUpdate Buttonをクリックして完了です。

Google＋(plus)ボタンの追加

新しくボタンを追加したい場合は設定画面のボタン一覧の右上に表示されているAdd New Buttonをクリックします。

各項目を入力していき、Big Buttonの部分にはGoogle＋(plus)ボタンのコードを入力する必要があります。

Google DevelopersのGoogle＋ Platformへアクセスします。

下記の赤枠画像に合わせて設定していき、表示されたコードをコピーします。

コピーしたコードをBig Buttonの部分に貼り付けます。

最後にUpdate Buttonをクリックして完了です。

はてなブックマークボタンの追加

設定画面から再度Add New Buttonをクリックして追加していきます。

各項目を入力していき、Big Buttonの部分にははてなブックマークボタンのコードを入力する必要があります。

はてなブックマークボタン

下記の赤枠画像に合わせて設定していき、表示されたコードをコピーします。

コピーしたコードをBig Buttonの部分に貼り付けます。

最後にUpdate Buttonをクリックして完了です。

LINEボタンの追加

Sharebarは基本的にはパソコン表示のみなのでLINEはパソコンで行っている人も少ないとは思いますが一応解説しておきます。

設定画面から再度Add New Buttonをクリックして追加していきます。

各項目を入力していき、Big Buttonの部分にはLINEで送るボタンのコードを入力する必要があります。

LINEで送るボタン

下記の赤枠画像に合わせて設定していき、表示されたコードをコピーします。

コピーしたコードをBig Buttonの部分に貼り付けます。

注：LINEボタンの場合はデフォルトではパソコン表示がoffの設定になっています。false ⇒ trueに書き換えることで表示されるようになります。

最後にUpdate Buttonをクリックして完了です。

Pocketボタンの追加

設定画面から再度Add New Buttonをクリックして追加していきます。

各項目を入力していき、Big Buttonの部分にはPocketボタンのコードを入力する必要があります。

Pocketボタン

下記の赤枠画像に合わせて設定していき、表示されたコードをコピーします。

コピーしたコードをBig Buttonの部分に貼り付けます。

最後にUpdate Buttonをクリックして完了です。

最終調整をする

使用するボタンが決まったら実際にサイトを確認してみましょう。

ボタンが表示される順番やSharebarの位置をHomeやSettingsから調整していきます。

これで終わり！でもいいのですが、表示されているSharebarってちょっとデザインに味気ない感じがしませんか!?

これにちょっとひと手間をかけると見た目がかっこよくなります。

Sharebarのカスタマイズ方法2

見た目がかっこよくなるとはどういった感じになるかというと・・

・Sharebarの角を少し丸くして、柔らかい印象になる。
・背景にシャドウ（影）を入れて、立体感が出る。
・ボタンの上部と下部に空きを与えて、見やすくする。

こんな効果が得られます。

 

 

管理画面の外観からテーマ編集を選択します。

 

 

スタイルシート(style.css)の一番最後に以下のコードをコピー＆ペーストしましょう。

以下のように貼り付けておけばOKです。

最後に必ずファイルを更新をクリックして終わらせましょう。

表示を確認すると・・

グッと見た目がひきしまってかっこよくなりましたね(^O^)

［記事公開日］2014/09/05
［最終更新日］2016/07/18