BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» アメブロカスタマイズ・プロフィール欄にgoogleバッチを設置する方法

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

アメブロカスタマイズ・プロフィール欄にgoogleバッチを設置する方法

   投稿日: 2014/10/31    投稿者:webコラム

皆さん、こんにちは。

 

今回はアメブロのプロフィールにGoogle+のバッチを埋め込む方法をご紹介します。

通常のプロフィール欄はこんな感じですが

 

初期プロフ.jpg

 

カスタマイズするとGoogle+のバッチが表示され、サークルに追加などが用意にできるようになります。


 変更後プロフ.jpg

 

まだ国内で広く浸透してはいませんが、バッチ自体に背景と切抜き画像を設置できるのでおしゃれなプロフィールになります!

 

今回の作業はタグの取得、フリースペースとフリープラグインのカスタマイズです。

 

 

Google+のバッチ用タグの取得

 

初めにGoogleのデベロッパーサイトにてタグを取得します。このタグというものは、コピーして貼り付けることで簡単にブログなどに表示させることができるコードのようなものです。

 

Googleのデベロッパーサイト  https://developers.google.com/+/web/badge/?hl=ja 

 

こちらで項目をすべて埋めていきます

 デベロッパーサイト.jpg

 

右側に表示されるプレビューを見ながらサイズや向きなどは各々で調節してください。

画像の一番下にある[詳細オプション]を開き、ダイナミックという項目にチェックをつけます。

 ダイナミック.jpg
 

これで大丈夫というものが出来上がったら、プレビュー画像の下に出ているタグをそれぞれの場所にコピーしていきます。

 

 

タグのコピーと貼り付け

 

表示されたタグは日本語の部分で2つに分かれていて、それぞれ貼り付ける場所が違うので注意が必要です。

それぞれをフリースペースとフリープラグインに移します。また、画面に表示しきれていない部分があるので、一度メモ帳などに全文をコピーしてから該当箇所を抜き出すとより確実だと思います。

 

 

まず、フリースペースに以下の文を追加します。

 

<span id="socialb"></span>

 

 

そしてこの文の間(>と<の間)に先ほどのタグの一部をコピーして貼り付けます

コピーする部分は、「<!-- ウィジェット を表示したい位置に次のタグを貼り付けてください。 -->」という分の次の一文です。「<div class=」などといったものから始まっていると思います。その一行をすべてコピーしてフリースペースの先に追加した文の間に張り付けてください。

 

<span id="socialb"><div class= ...(省略) </div></span>

 

このようにできたらOKです。

 

続いてフリープラグインへは「<!-- 最後の ウィジェット タグの後に次のタグを貼り付けてください。 -->」から下すべてをコピーします。「<script type=」などといったものから始まっていると思います。

それをフリープラグインにそのまま追加します。

 

両方を終えてから表示を確認してみましょう。

自分の名前やピグの下にGoogle+のバッチが表示されていたら成功です。

 

まとめ

上手くできましたでしょうか?

サイドのスペースに乱雑に配置するのではなく、プロフィールに埋め込むことでよりスッキリした印象になりますね!

カテゴリ:

TOPへ