2012/02/25

Google+バッジを作成してBloggerに掲載する方法

いつもチェックしているブログを見るとGoogle+バッジが掲載されているのに気が付きました。

はどこでGoogle+バッジを作れるのか分からなかったのですが、作成できる場所を見つけたのでメモしておきます。

image

作成はGoogle DevelopersのGoogle+ Platformから!

  1. Google+ Platformにアクセス
  2. Plugins→Badge→Configuration Toolへ移動
  3. Google+のPageIDをテキストボックスに入力
    PageIDは下記URLの赤い部分です。

    https://plus.google.com/xxxxxxxxxxxxxxx/posts

    image
  4. バッジスタイルを選択する
    image
  5. スクリプトをコピーし、ブログに貼り付ける
    スクリプトの貼付けはhead部とbody部に分かれているので気をつけて下さい。
    <link href~>は<head>~</head>の間に貼り付け。
    <a href~>は<body>~</body>の任意の場所に貼り付け。

Bloggerに掲載する時にアイコンサイズを調整してみました

XHTMLを知っている方であれば即わかると思いますが、Bloggerに掲載する時にアイコンサイズを調整したい方は下記コードの赤い部分の数値を修正してください。

私はサイトタイトル横のアイコンを32pxから24pxに変更して掲載しています。

image

<!-- Place this tag where you want the badge to render -->
<a href="https://plus.google.com/xxxxxxxxxx?prsrc=3" style="text-decoration:none;">

<img src="https://ssl.gstatic.com/images/icons/gplus-32.png" alt="" style="border:0;width:32px;height:32px;"/></a>

スポンサーリンク

スポンサーリンク