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

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

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

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

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

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

sharebar - image

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

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

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

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

plugin-wptouch

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

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

plugin-sharebar
plugin-sharebar1

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

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

plugin-sharebar2

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

ダウンロードボタン赤3D

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

細かい解説は

を参考にしてください。

『Sharebar』を設定していこう

使用するSNSボタンの選択

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

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

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

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

plugin-sharebar3

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

plugin-sharebar6

Sharebarのカスタマイズ方法

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

plugin-sharebar5

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

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

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

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

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

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

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

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

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

plugin-sharebar18

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

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

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

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

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

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

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

plugin-sharebar7

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

plugin-sharebar8

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

plugin-sharebar9

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

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

plugin-sharebar10

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

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

plugin-sharebar11

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

Facebook「share」ボタンの修正

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

plugin-sharebar19

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

plugin-sharebar20
plugin-sharebar11

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

Twitterボタンの修正

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

plugin-sharebar12

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

plugin-sharebar13
plugin-sharebar11

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

Google+(plus)ボタンの追加

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

plugin-sharebar14

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

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

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

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

plugin-sharebar21
plugin-sharebar11

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

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

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

plugin-sharebar14

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

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

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

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

plugin-sharebar22

plugin-sharebar11

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

LINEボタンの追加

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

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

plugin-sharebar14

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

LINEで送るボタン

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

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

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

plugin-sharebar23

plugin-sharebar11

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

Pocketボタンの追加

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

plugin-sharebar14

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

Pocketボタン

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

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

plugin-sharebar24

plugin-sharebar11

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

最終調整をする

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

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

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

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

Sharebarのカスタマイズ方法2

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

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

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

plugin-sharebar25

 

 

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

 

 

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

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

plugin-sharebar26

plugin-sharebar110

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

表示を確認すると・・

plugin-sharebar28

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

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

最新情報、定期購読にはFacebookページが便利です。

ブログ吹き出し使用素材1

関連記事

コメント

  1. この記事へのコメントはありません。

CAPTCHA


ピックアップ記事

WP Social Bookmarking Lightの設定と便利な使い方(カスタマイズ方法)。

『WP Social Bookmarking Light』の設定と便利な使い方(カスタマイズ方法)。

WordPressのプラグイン『WP Social Bookmarking Light』ではSNS(Facebook、Twitter、LIN…

おすすめ記事

Now!!

当サイトのテーマ(テンプレート)

WordPressテーマ「AN (tcd014)」
ページ上部へ戻る