【WordPressプラグイン】Sharebarを設置してアクセスアップに繋げよう

ID-10087969

独立・起業準備コンサルタントの沖 成章です。

私は情報発信の媒体としてWordPressを使ってブログを運営しています。

ブログを運営する目的は人によって様々であると思いますが、ほとんどの人に共通しているのが

「アクセスアップ」

であると思います。

どんな目的でブログを運営するにしろ、せっかくやっているのならばアクセス数を稼いで多くの人に見てもらいたいですよね。

アクセス数をアップさせるためにはSNSでブログ記事を拡散させることがとても効果的です。

WordPressでブログを運営していると、SNSでの拡散を手助けしてくれる「ShareBar」という優れもののプラグインがあります。

このようにブログ記事の横にSNSのシェアボタンを表示してくれます。

シェア

基本的にインストールすればすぐに使えますが、初期設定を少し変えた方がより効率的になると思います。

私自身も初めはあまり詳しくなかったので、インストールしただけで、設定はほぼいじらずにいました。

なので、今日の記事は

・「ShareBar」の使い方

・初期設定はどう変えたらいいのか

ということについて書いていきます。

スポンサーリンク

インストール方法

インストールするのは簡単です。

WordPress管理画面 →プラグイン → 新規追加 →「Sharebar」で検索。

検索結果に「ShareBar」が出てくるので、「いますぐインストール」をクリックすればインストールされ有効化されます。

インストール自体はこれだけでOKです。

プラグインの設定

WordPress管理画面→設定→ShareBar

と進んでいくとShareBarの管理画面に行きます。

インストール直後はこんな感じになっているかと思います。

sharebar_img02

見慣れない外国のSNSが多く、日本で一般的なのはTwitterとfacebookくらいで、はてなブックマークやgoogle+のシェアボタンがありません。

要らない外国のSNSは削除して、はてなブックマークとgoogle+のシェアボタンを追加していきましょう。

削除は簡単です。上の画像を参考にしていただきたのですが、左下にドロップダウンがあります。画像ではEnableとありますが、他にDeleteというのがあるので、それを選択し消したいものにチェックを入れ、Updateを押すだけです。

Disableを選択し、機能だけ停止し消さずに残すという方法もありますが、どうせ使わないし邪魔なので私は消しました。

日本のSNSシェアボタンの設定方法

初期画面の右上あたりにある、「Add New Button」をクリックします。

すると次のような画面が出ます。

実際に使うのは、赤で囲ってある部分のみです。

図1

NameとPositionは、その名の通り、そのシェアボタンの名前と表示させる位置です。

例えば、はてなブックマークを一番上に表示させたければ、

Name:hatena Position:1

とかにすればOKです。

また、Sharebarでは大きなボタンしか使わないので、Big ButtunというところのみにシェアボタンのHTMLコードを入れます。

Small Buttunは使いません。

以下に各SNSのHTMLコードを貼りますので、コピペしてください。

はてなブックマークのシェアボタン

Big buttonのHTMLコード

<a href=”http://b.hatena.ne.jp/entry/[url]” class=”hatena-bookmark-button” data-hatena-bookmark-title=”[title]” data-hatena-bookmark-layout=”vertical-balloon” data-hatena-bookmark-lang=”ja” title=”このエントリーをはてなブックマークに追加”><img src=”http://b.st-hatena.com/images/entry-button/button-only@2x.png” alt=”このエントリーをはてなブックマークに追加” width=”20″ height=”20″ style=”border: none;” /></a><script type=”text/javascript” src=”http://b.st-hatena.com/js/bookmark_button.js” charset=”utf-8″ async=”async”></script>

はてなブックマーク公式サイトはこちら

facebookのシェアボタン

Big buttonのHTMLコード

<iframe src=”http://www.facebook.com/plugins/like.php?href=[url]&layout=box_count&show_faces=false&width=70&action=like&colorscheme=light&height=65″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:70px; height:65px;” allowTransparency=”true”></iframe>

facebook公式サイトはこちら

※アクセス制限がかかっているWordPressですと、正しく表示させない不具合が確認させています。ただし、設定して投稿を公開すれば普通に表示されますのでご安心を。

Twitterのシェアボタン

Big buttonのHTMLコード

<a href=”http://twitter.com/share” class=”twitter-share-button” data-count=”vertical” data-via=”[twitter]”>Tweet</a><script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script>

Twitter公式サイトはこちら

Google+のシェアボタン

Big buttonのHTMLコード

<!– Place this tag where you want the +1 button to render. –>

<div class=”g-plusone” data-size=”tall”></div>

<!– Place this tag after the last +1 button tag. –>

<script type=”text/javascript”>

window.___gcfg = {lang: ‘ja’};

(function() {

var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;

po.src = ‘https://apis.google.com/js/plusone.js’;

var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);

})();

</script>

Google+公式サイト

まとめ

ここまで設定し終わると、このようになります。※私はSmall buttonのコードを入れているので、管理画面では表示されますが実際には全く使ってません。

キャプチャ

この状態でブログを見ると、記事の横にSNSのシェアボタンが表示されています。

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

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

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