Google+のバッジ(フォローボタン)をブログに設置する方法

シェアボタンを押して情報を共有しましょう。

スクリーンショット_052216_054623_PM

どもー!こんにちわっ!橋尾渡でっす!

今回は、Googleが展開しているSNSサービス「Google+」のバッジを設置する方法について記事にしていきたいと思います!ところで、バッジってなんのことだかわかります?簡単に言うと、SNSのフォローボタンのことですね

スクリーンショット_052216_055418_PM

こんなGoogle+のフォローボタン見たことありません?ネットサーフィンしていると、頻繁に見かけますよね。これ、僕の尊敬しているプロブロガー「かん吉」さんが使っていたんですよ。それで、僕も使いたくなっちゃった訳なんです!(笑)

スクリーンショット_052216_061415_PM

ほら見て、ブログのフッターに色々ウィジェットが付いてるでしょ?整理されてて、見やすいから僕もこんな感じで付けたいんですよね。フッターではなく、サイドバーに付けてみるのもありですね。まぁ、好きな所に付けれますので後々変えるのもいいでしょう。

それでは、Google+のバッジを設置する方法について説明していきたいと思います。

スポンサーリンク
レクタングル(大)広告

Google+バッジの設定方法

では、最初にこちらのGoogle+バッジを作れるサイトに移動しましょう!『google+badge

スクリーンショット_052216_064107_PM

すると、こんな画面がでてくるはずです。あなたが複数アカウントをお持ちの場合、「Google+ユーザー」という項目から、フォローボタンを作りたいアカウントを選んでください

アカウントを表示させる

スクリーンショット_052216_065712_PM

表示させたいアカウントのGoogle+プロフィールページを開き、URLをコピーしてください。

スクリーンショット_052216_065833_PM

そして、先程の「Google+ユーザー」の箇所に、URLを貼り付けましょう。貼り付けることができたら、右側にアカウントが表示されるはずです。

バッジの設定

次に、バッジ(フォローボタン)の設定を行いましょう。

スクリーンショット_052216_071141_PM

設定では、バッジのレイアウトを変更することができます。上から見ていきましょうか。

設定

これは、アイコンか、バッジかを選べます。アイコンにすると…。

スクリーンショット_052216_072012_PM

丸いアイコンになります。名称とアイコンのサイズを決めることもできますね。なんといか、シンプルでオシャレなアイコンです。そして、バッジがいつも通りのフォローボタンですね。

レイアウト

ここは、バッジの見た目を変えることができます。通常のバッジフォローボタンが縦向きで、横向きを選ぶとこうなります。

スクリーンショット_052216_072338_PM

プロフィール写真が大きく表示されていて、隣にフォローボタンがありますね。これも中々良いデザインですね。でも、僕は標準デザインのほうが好きかも(笑)

幅の変更

幅の変更をすれば、大きくすることもできるし、小さくすることもできます。標準サイズは300です。

スクリーンショット_052216_073714_PM

最大サイズの450にすれば、かなり大きく表示させることができますね。ここまで大きいと、少し邪魔かもしれません。

スクリーンショット_052216_073816_PM

最小サイズは180。これは非常にコンパクトですねぇ。いろんな場所に設置できて便利そうです。

色のテーマ

色のテーマでは、写真にあるバックグラウンドカラーを変えることができます。白と黒色のに二択ですね。

スクリーンショット_052216_074405_PM

僕のプロフィール写真はダークだと、相性が良くないかも。なので今回は、白にしておきましょうか。

カバー写真

ここは、あなたがGoogle+で設定している背景を表示するか否かを設定できます。

スクリーンショット_052216_074623_PM

背景画像が無くなると、少し寂しさを感じます。僕は背景を表示させておきたいので有効化しておきました。

キャッチフレーズ

僕が今、設定しているキャッチフレーズは「どうも!橋尾渡(はしおわたる)橋を渡るですw」という訳のわからない説明になっています。これを無効化すると…。

スクリーンショット_052216_074949_PM

こんな感じで、キャッチフレーズが消えます。名前とフォローボタンだけでいいよ!って人は無効化しておきましょう。

バッジを設置する

それでは一通り設定が終わりましたので、次はバッジの設置をしていきましょう!

スクリーンショット_052216_075320_PM

設定を終えたら、下にスクロールしてください。すると、コードが表示されています。それを、コピーしてあなたの好きな場所に貼ってください。

こんな感じでGoogle+のバッジが表示されました。Google+バッジのコードを貼り付ける際は、テキストモードにしてから貼り付けましょう。そうしないと、正しく表示されない場合があります。

ではここで、当初の目的「かん吉さんのようなレイアウトにする」ということだったので、フッターにバッジを表示させていきたいと思います。

フッターにバッジを付ける

今回は、ワードプレスのテーマ「Simplicity」を使って説明しますね。まず、ワードプレスの管理画面を開いてください。そしたら、外観を選び、ウィジェットを開きます。

スクリーンショット_052216_081803_PM

ウィジェットの中から、「テキスト」をクリックして、「フッター、左、中、右」の中から設置したい場所を選びます。とりあえず、真ん中に設置してみましょう。

スクリーンショット_052216_082625_PM

中をクリックしたら、テキストボックスが開きます。コピーしたコードを貼り付けて保存を押しましょう。

スクリーンショット_052216_082933_PM

保存を押してブログを確認します。すると、無事フッターの真ん中にGoogle+のバッジが表示されました!ちょっと、サイズが大きすぎましたかね?(笑)幅を250くらいにしておくとちょうどいいかもしれません。

まとめ

以上で、Google+のバッジをブログに設置する方法は終わりです。いかがだったでしょうか。ここにあと、FaceBookページのウィジェットも追加していきたいですね。そうすれば、かん吉さんのようなレイアウトに近づくことができます。

それでは、そろそろGoogle+バッジについての記事を終わりたいと思います。ありがとうございました!

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告
Google+のバッジ(フォローボタン)をブログに設置する方法
この記事をお届けした
HASHIO_LOGの最新ニュース情報を、
いいねしてチェックしよう!

シェアボタンを押して情報を共有しましょう。

フォローする

関連記事