【Sharebarの設定方法】はてブ、Google+ボタンを追加してSNS拡散を促進させるプラグイン

sharebarの設定方法ども、ハヤトです。

今回はSNSでの拡散を促進するプラグイン【Sharebar】の設定方法を解説します。

 

 

Sharebarというのは追尾型のSNSボタンプラグイン。
色んなサイトで使われているので見たことある人も多いはず。

 

常に記事の横にくっついてくるので目に触れる機会が多く、記事が気に入ればボタンをクリックしてSNSで拡散してくれる可能性が高まります。

ただデフォルトの状態ではボタンが潰れていたり、日本では使わないSNSのボタンが入っていて、逆にはてなブックマークやGoogle+のボタンがない・・・

 

ということで今回はボタンを追加して見た目も綺麗にする方法を解説していきます。

 

 

 

Sharebarのインストール

インストール方法は他のプラグインと同様。

Sharebarで検索すればヒットするのでインストールして有効化しましょう。

 

 

インストールした状態だとこのように表示されます。

英語で表示されているし、よく分からないSNSのボタンはあるし、そもそもデザインが潰れている・・・

ということで詳細に設定していきます。

 

Sharebarのカスタマイズ

「設定」⇒「Sharebar」をクリック。

 

 

まずは不要なボタンを削除しておきましょう。

 

 

Deleteを押して削除。
灰色背景になっているものは有効になっていないので放置でもOK。(今回は削除しました)

後facebookはチェックを入れて「Enable」にしておきましょう。

 

次にSharebarの幅を設定しておきます。

「Setting」から「Sharebar Width」で調整します。

 

 

初めは65になっていますが、100ぐらいがベストだと思います。(今回は100に設定しておきました)

後はTwitter Usernameも自分のTwitterネームにしておくといいでしょう。呟く時に@○○から、と表示されます。

設定できたら「Update Settings」をクリック。

 

ここまででやると

 

 

こんな表示になっているはず。

はい、facebookのボタンがはみ出ていますね。設定しておきましょう。

 

 

初めの設定画面に戻って「Edit」をクリック。

 

 

ここのwidthの値を変えればOK。今回は80に設定しておきました。

 

 

これでちゃんと表示されていますね!

でもやっぱり少ない。
最低でもはてブ、後今後のためにGoogle+も入れておきたい所。

ということで続いてこの2つのボタンを追加する方法も解説しておきます。

 

はてブボタンの追加方法

まずははてなブックマークの追加方法から。

 

 

今回のWordPressだとボタン潰れちゃってます(テンプレートの問題?)が、「Add New Button」をクリック。

 

 

ここで新しくボタンを追加できます。

①の説明はHTML、CSS、JavaScript等が使えて[url][title][author]といったコードが使えますよって書かれてあります。まぁよく分からなくても特に問題ありません。

②はボタンの名前。(自分での判別用)

③は並べる順番。(上から1,2,3,4)

④はボタンのコードです。大きいサイズと小さいサイズの2つが作成可能。

 

さて、はてブのボタンですがコードはこちらから取得してきます。

⇒はてなブックマークボタンの作成

 

 

ここで注意しておくのはページのアドレス、タイトルは空欄のままにしておくこと。

ここを入力してしまうとユーザーが個別の記事をはてブできなくなります。後からこの記事を読みたいのに、ブックマークしようとするとトップページになってしまう・・・というのを避けられます。

表示は「バーティカル」に設定し、コードをコピーしましょう。

コピーしたものを先ほどの画面④にコピペすればOK。

 

 

今回は「hatebu」という名前で順番は3に設定しました。

忘れずにEnabeled?にチェック。(有効化する?って意味)

 

 

これではてなブックマークボタンが追加されましたね。

 

Google+ボタンの追加方法

ひとまずTwitter、facebook、はてなブックマークがあればいい気もしますが、今後のためにGoogle+ボタンも追加しておきましょう。

今の日本だとそれほど流行ってないですが、今後検索エンジンとも紐付けされる可能性もあるので(海外では導入済み)、見過ごせないサービスの1つです。

導入されると Google+の情報からユーザー毎に検索結果を変える、という仕様になります。(これまでのSEO対策が通用しないってことです)

 

Google+ボタンのコードはこちらから取得できます。

⇒+1ボタンの作成

 

 

サイズは「tall」+1情報は「バルーン」に設定。

後はコードをコピーして先ほどと同様にボタンを追加。

今回Scriptはすでに他のプラグインで導入されていたので省きました。(テンプレートやプラグインによって必要な場合もあります)

 

 

今回はTwitter、facebook、はてブ、Google+の順番にしてみました。

この4つがあればひとまずOKでしょう。

 

設定が面倒ですが、非常に綺麗でシェアも非常に簡単。SNSでの拡散を狙う場合はSharebarをぜひ導入してみてください。

 

PS
今回の記事はこちらの記事を参考にさせて頂きました。

ソーシャルボタンSharebar(シェアバー)の使い方と設置方法。WordPressプラグイン。

 

他のボタンを追加したい場合はこちらの記事も参考になるかと思います。

【WordPress】Pocketボタンを設置するために「Sharebar」プラグインを導入してみた

 

 

PPS
スマホ表示の場合は追尾型にはなりません。初めの設定状態だと記事の下に表示されます。

スマホからのアクセスが多い場合はWP Social Bookmarking Lightの利用が推奨です。

 

また3カラムの場合はデザイン的にあまりおすすめしません。(サイドバーが邪魔になって隠れるか、記事から離れてしまうため)

というわけで当ブログでも利用していません。(運営する他のブログでは利用しています)

使うなら2カラムのサイトがいいですね。

最後までお読み頂きありがとうございます!

今回の記事が役に立った!という場合は以下のボタンから、ソーシャルメディアでのシェアよろしくお願いします。ありがとうございます!

ブログランキングにも参加中。1.3秒で済むので応援クリックよろしくお願いします!

関連するこちらの記事も合わせてどうぞ

レポート無料配布中

メルマガ登録

*メールアドレス
*お名前(姓・名)

One Response to “【Sharebarの設定方法】はてブ、Google+ボタンを追加してSNS拡散を促進させるプラグイン”

  1. Sharebar より:

    […] Sharebarの設定方法 […]

コメントを残す

サブコンテンツ

このページの先頭へ