ー スポンサード リンク ー

WordPressプラグイン Sharebarの使い方と設定方法

SNSでの拡散を促進するプラグイン【Sharebar】の設定方法

ShareBarは、ソーシャルシェアボックスを追加するための
WordPressプラグインです。

ソーシャルシェアの数を増やしたいならインストールしておくと
良いとおもいます。



このプラグインはページをスクロールすると、ソーシャルボタンが
ついてくるという優れものです。

実装するメリットは、固定型に比べると、だいぶ目立ちますので、
ソーシャルメディアからのアクセス流入数が期待できるところです。

 

スクリーンショット 2014-04-22 11.19.29

 

 

  ShareBarのインストール

インストールの方法についてはダッシュボード(管理画面)より
プラグイン新規追加をクリックします。

プラグイン新規追加

 

ダッシュボード(管理画面)の新規追加をクリックし検索ランにSharebar
と入力します。

シェアバー入力

 

プラグインの検索をクリックすると、下記画面になります。
今すぐインストールをクリックすると、インストールされます。

プラグイン検索された

 

プラグインの有効化をします。

有効かします

しかしインストールしたままの状態では、はてなブックマークや
プラスワンボタンがありません。

 

プラグインの設定

Sharebarはスクロールしても、Sharebarがついてきてくれ、SNSで
伝えたいときにシェアできるので非常に便利です。

Sharebar(シェアバー)を使いたいが、設定の仕方がわからない。
拡散効果の高い、ソーシャルボタンの設置方法が知りたい。
僕がやってみて分からない所を細かく解説します。

 ShareBarをクリックし設定画面に入ります。

 

 ShareBarの設定

 

Sharebarの設定画面です。外国産ですのでこのままだと、不必要な物が
多くあります。

 

シェアバー設定画面

 

いらないソーシャルボタンの削除方法

ほとんどが日本で使わないソーシャルボタンですので、この画面で
いらないボタンを削除します。

 

ソーシャルボタン削除

 

いらないボタンにチェックを入れてWith Selected:でEnableとありますが
Deleteを選択しUpdateをクリックし削除します。

 

Facebookのエラーの表示の直し方

ここでFacebookがエラーになっていますがまずここを直しましょう。

facebook

矢印のEditをクリックし編集します。

 

編集画面

 
  • Neme      は今編集しているFacebookです。
  • Position は表示される時の順番です。今は3番目になっています。
  • Enabled ここにチェックを入れて下さい。
  • Width      ここは重要です。【70px】に変更します
ShareBarでは大きいボタンしか使わないです。

 

Sharethisボタンの変更方法

ShareBarをインストールした時点ではメールやシェアがついています
要らない物をスッキリと変更します。

編集ボタンをクリックします。

シェアジスボタン変更

Sharethisの編集画面になります。
僕の場合すでに編集しているのでSharethisボタンの下についてない
画像になっていますが、下の枠の中を削除するとこのような
ボタンになります。

 

Sharethis

よく見ていただくとEmailとか書かれているのが分かると思います。
この囲みから下のの部分を削除します。

そしてUpdate Buttonをクリックします。

ShareBarの設定画面ではエラーになっていても,この設定を
した後はサイトでは表示されます。

 

ないボタンの取得方法

はてなブックマークボタンのボタンコードを取得

はてなブックマークボタンを、取得します。

http://b.hatena.ne.jp/guide/bbutton

上記のアドレスから取得画面に入る事ができます。

はてなブックマーク

ページアドレス:URLとタイトルは空欄のままでソースをコピーしてください!
ここにトップページのURLブログのタイトルを入れてしまうと、
個別ページを開いた状態で、ブックマークしても、個別ページではなく
トップベージが常にブックマークされてしまう事象がおきます

ページタイトル:ここも空欄にします。

ブックマーク数:「表示(バーティカル)」にすることで、大きい
サイズのボタンが取得できます。

ボタン設定をすると再生されるボタンの表示取得の所が
変更されていきます。

ここの大きな枠の中をコピーします。

 

 Add New Buttonで新たに追加します

Add New Button」をクリックして、追加できます。

Add new Button

 

Big ButtonSmall Buttonの設定を、先ほど作成した、
はてなブックマークで表示されたソースをコピーして、それぞれ貼り付けます。

Add new botton

 

Name: ここはボタンの名前を入れます。英語で入れた方が無難です。

Position: 表示の順番です。上から何番目に表示するか、ばん後を決めます。

Enabled: ここにチェックを入れます。

Big Button: 先ほど作成したソースを貼付けます。

Small Button: もソースをコピーペースとしときましょう。

ソース貼付け

Update Buttonをクリックし登録します。

 

その他Googleソーシャルボタンの追加

 Google+公式サイトから大体、同じ様な方法でソースコードを取得し
貼付けてボタンを追加します。

実際は下記のアドレスに入りボタンを作成します。
ここでのアドレスは僕のですのでリンクは貼っていませんが

https://developers.google.com/+/web/+1button/

googleに登録しサインインできる状態でしたら下記の画面になります。

google設定画面

Size: 一番大きいサイズにチェックを入れます。
Annotation: はbubbleを選びます。
Language: はJapanneseを選びます。

囲みの中にソースが出来上がりますのでコピーして
Add New Buttonをクリックし下記画面に上記で説明した様に

 

名前や表示される順番等入れて、大きい囲みに貼付けします。
Add Buttonをクリックします。

スクリーンショット 2014-04-22 16.48.58

そしてアップロードしますと記事の横にSNSのシェアボタンが
表示されています。

シェアボタンが目につきやすいところにあれば、各々のSNSで共有して
もらえる可能性が高くなります。

せっかくブログやホームページ等を運営しているのだから、シェアして
頂いて多くの人に見てもらいたいですよね。

 

シェアーバー完成

自分のブログに合わせてカスタマイズしていけるので、色々試してみましょう。