WordPressのサイドバーにGoogle+のフォローボタンを追加する方法

  • このエントリーをはてなブックマークに追加

ブログ運営を成功させるために、ブログの読者にソーシャルメディアでファンになってもらうための仕組みを作っておくことは重要だ。

そのファンを増やすために必ずやっておくべきことの一つが、下図のようにGoogle+ のフォローボタンをサイトに設置することだ。

それでは早速やり方を見て行こう。

尚、Google+ のフォローボタンをサイトに設置するには2つの方法がある。

  • 自動生成ツールで作ったバナー(Google+バッジ)を設置する方法
  • オリジナルの画像を用意して設置する方法

前者では、自動生成で簡単にソーシャルボタン付きの高機能なバナーが作れる反面、デザインの自由度が低いというデメリットがある。後者では、サイトに合わせてバナーを作るためデザイン上の自由度は高いが、オリジナルのバナーを作るという手間が発生する。

両方のやり方を解説するので、是非実践してみて欲しい。

1.自動生成ツールで作った公式バッジを設置する方法

自動生成ツールで作る Google+ のフォローボタンのことを“ Google+ バッジ ”と呼ぶ。Google+バッジは、サイト上でワンクリックでGoogle+ページをフォローすることができるので、ユーザーにとって利便性が高いものだ。

まずは、このバッジの生成方法とサイトへの設置方法を紹介しよう。

1−1.Google Developers でコードを取得

Google+ バッジを設置するために最初に、Google+ ページを作った Google アカウントでのログインしている状態で Google Developers にアクセスしよう。このページでは以下のように Google+ バッジの編集ができる。

設定はいたって簡単で、変更した内容がリアルタイムでプレビュー表示されるので迷うところはないだろう。サイトのデザインに合うように調整しよう。

設定が完了すると画面右下に Google+ バッジのコードが自動で生成される。

この2つのコードをメモ帳などにコピー&ペーストして保存しておこう。

後は、このコードをWordPressの表示したい部分に貼付けるだけだ。

1−2.WordPressウィジェットで Google+ バッジを設置

WordPress の管理画面にログインして、左メニューより「外観 →ウィジェット」の順にクリックして、ウィジェットの編集画面にアクセスしよう。そして、「テキスト」ウィジェットをメインサイドバーに追加する。

続いて先ほど取得したコードをペーストしよう。ここでは例として詳細オプションの「ダイナミック(非同期)」を選択したときのコードを貼り付ける。

最初に Google+ バッジのコードを貼り付ける。

次に別途、テキストウィジェットをメインサイドバーの最後尾に追加して、次のコードを貼り付けよう。

それぞれバッジだけ表示させたいので「タイトル」は、空白にする。また、コードのみの貼り付けのため「自動的に段落追加する」のチェックは外す。

設定が完了したら「保存」をクリックしよう。ブラウザで見てみると、図のようにサイトバーに Google+ バッジが反映されているはずだ。

Google+バッジの追加方法に関しては以上だ。

2.オリジナルボタンを設置する方法

Google+バッジは、非常に目立つボタンだしデザイン上のインパクトが強いので、サイトのデザインに合わない場合も多い。そんな時は自分で画像を用意してサイトに合うように調整しよう。

こちらの方法だと、Google+バッジのようにサイト上でフォローできるわけではなく、下図のように一度 Google+ のページに飛んでからフォローしてもらう形になることを覚えておこう。

wordpress-google+

それでは、早速解説していこう。

2−1.Google+ ボタンのオリジナル画像の用意

Google+ボタンので使用する画像はデザイナーに用意して貰ったり、「social icon free」などと検索するとダウンロードできる素材がいくらでもあるので、まずは好みの画像を探してみよう。

しかし、Google+のボタンにはデザインに関する規定が定められている。 誤ったデザインのものを使わないように、 Google+ のブランディングに関するガイドラインは必ず確認しておこう。

2−2.Google+ バナーのコードを取得

使用したいボタン画像が決まったら早速コードを用意していこう。ここでは、HTML 知識なしでコードが取得できる簡単な方法を紹介する。

最初に WordPress の管理画面にログインし、左メニューより「投稿 → 新規追加」の順にクリックしよう。

図のように「メディアを追加」をクリックして、メディアライブラリを開く。

メディアライブラリ内に Google+ のバナーをドラッグ&ドロップでアップロードして、「投稿に挿入」をクリックする。

エディタにバナーが表示されたら画像をクリックしよう。

続いて「リンク挿入/編集」ツールをクリックする。

リンク編集の画面が表示されるので、Google+ ページのURLを入力しよう。

「リンクを新ウィンドウまたはタブで開く」にチェックを入れた方が親切だろう。上図の通り設定したら「更新」ボタンをクリックする。

次にコードを取得するためエディタの「テキスト」タブをクリックしよう。

コードが表示されるので全て選択してコピーする。

コピーしたコードをメモ帳にでも保管しておくと後で作業がしやすくなる。続いてこのコードをウィジェットを使ってサイドバーに設置しよう。

2−3.WordPressにバナーを設置

管理画面の左メニューにある「外観」にカーソルをもっていくと「ウィジェット」が表示されるのでクリックする。次の画面にアクセスするので「テキスト」ウィジェットをメインサイドバーに追加しよう。

先ほど取得したコードを次の図のように貼り付けよう。

設定が完了したら「保存」をクリックして、実際にブラウザで確認してみよう。設定が反映されているはずだ。

3.まとめ

サンプルサイトで使用している ” Twenty Twelve ” というテーマでは、下の図のようにサイドバーの一番上に各種ソーシャルボタンを表示している。

実際のコードをここに貼付けておくので、あなた自身で設定する際の参考にして欲しい。

<p> <a href=”http://#”><img class=”alignnone size-full wp-image-522″ src=”http://wordpress-designer.net/wp-content/uploads/2014/11/facebook-32.png” alt=”facebook-32″ width=”32″ height=”32″ /></a>  <a><img class=”alignnone size-full wp-image-525″ src=”http://wordpress-designer.net/wp-content/uploads/2014/11/twitter-32.png” alt=”twitter-32″ width=”32″ height=”32″ /></a>  <a href=”http://#”><img class=”alignnone size-full wp-image-523″ src=”http://wordpress-designer.net/wp-content/uploads/2014/11/google-32.png” alt=”google+-32″ width=”32″ height=”32″ /></a>  <a href=”http://#”><img class=”alignnone size-full wp-image-524″ src=”http://wordpress-designer.net/wp-content/uploads/2014/11/rss-32.png” alt=”rss-32″ width=”32″ height=”32″ /></a></p>
<div class=”fb-like-box” data-href=”https://www.facebook.com/bazubu” data-width=”238″ data-height=”300″ data-colorscheme=”light” data-show-faces=”true” data-header=”false” data-stream=”false” data-show-border=”false”></div>
<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=444211749032087&version=v2.0”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

Google+ バナーのサイトへの設置方法は以上だ。サイドバーの設定に関しては以下の3つのページもあわせて確認しておこう。

  • このエントリーをはてなブックマークに追加

最高の結果を出すためのサイト制作サービス
『 bazubu-shiki 』

cta_bazubushiki“ bazubu-shiki(バズブシキ)” は、バズ部の運営ノウハウを詰め込んだ、メディアサイトの制作サービスです。

  • ・WEBの専門知識がなくても、ブログ記事の更新が可能
  • ・検索エンジンを徹底的に研究した内部構造なので、SEO対策に最適
  • ・お問い合わせやリードの獲得に繋げる、導線の実装が簡単

デザインの作成、SNSへの連携、サーバー管理などはバズ部が一貫して行いますので、あなたは、安心してコンテンツ作りに集中することができます。
WEBマーケティングで最高の結果を出すために、ぜひ導入してみてください。


" bazubu-shiki " について詳しく見る

最新の記事情報が取得できます

Facebook

「いいね!」ボタンを押すと、最新情報がすぐに確認できるようになります。

Twitter

「フォローする」ボタンを押すと、最新情報がすぐにツイート上で確認できるようになります。

コメントはこちらから