WEBマスターのお仕事TOP > スポンサー広告 > Google+ badge (バッヂ) 設置方法WEBマスターのお仕事TOP > ソーシャルプラグイン設置 > Google+ badge (バッヂ) 設置方法

スポンサーサイト

(--/--/--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Google+ badge (バッヂ) 設置方法

(2012/02/03)
Google+ページと自サイトをつなぐGoogle+ badge がバージョンアップしたようなので、設置方法とともにご紹介します。

今回のバージョンアップによって、バッヂのサイズ(幅)とtheme(light or dark)の選択ができるようになった模様です。
こんな感じ↓で表示されます



設置は簡単


1)コード取得ページへアクセス
https://developers.google.com/+/plugins/badge/config?utm_source=platform&utm_medium=email&utm_campaign=badge2

2)必要事項を埋める
Google+ badge

プレビューを見ながら好きなデザイン/形状に整えます。
Link to this Google+ page: https://plus.google.com/の後の入力フォームのGoogle+ページのIDを入力。ページIDはGoole+ページのアドレスに含まれている21ケタの数値のことです。https://plus.google.com/[あなたのページのID]
Customize your badge:
Features:バッヂのタイプを選びます。icon:従来からあるアイコンだけのもの、Small badge:アイコンとフォローボタン、Standard badge:フォロワーの顔写真等も表示
Language:言語を選択。日本語あります。
Advanced Options:これが今回追加されたオプション。
Width:幅(100~1024px)
Color Theme:lightかdark、Asynchronous/HTML5 valid syntax (よくわからなかったのでデフォルトのAsynchronousにしました)
Parse:Default (On Load)/Explicit(これもよくわからずデフォルトのままにしました)

3)コードの取得&設置
↓このようなコードは<head>タグの中に設置します。(冒頭のコメントアウト部分は無しでOK)

<!-- Place this tag in the <head> of your document -->
<link href="https://plus.google.com/[あなたのGoogleページのID]" rel="publisher" /><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+ badgeを表示したい場所に設置します。(冒頭のコメントアウト部分は無しでOK)

<!-- Place this tag where you want the badge to render -->
<g:plus href="https://plus.google.com/[あなたのGoogleページのID]" width="300" height="69" theme="light"></g:plus>



以上です。

関連記事

コメント

コメントの投稿

サイト管理者にのみ通知する

トラックバックURL

http://goodjob4604.blog103.fc2.com/tb.php/125-919d51bf
月別アーカイブ
Google+
Twitter
ページトップへ
ブログパーツ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。