2012/11/29

BloggerのGoogle+新フォロワーガジェットをWEBページに設置する方法♪

昨日、BloggerとGoogle+の連携機能として新フォロワーガジェットが公開されました。(下記GIFアニメ参照/このブログの右上にも設置しております)

このガジェットをWEBページに任意のサイズで設置することに成功しましたので、設置方法をご紹介いたします。

実際にWEBページに設置した【デモページはコチラ】です。

下記は実際に設置して表示させております。



【Google+ フォロワー ガジェット(Followers Gadget)の設置方法】

1、<head>内に以下のように設置します。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

<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>


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー



2、表示させたい箇所に以下のように書きます。
*21桁のGoogle+IDはあなたのIDに置き換えて設置してください。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

コチラは個人アカウントの場合

<div class="g-plus" data-action="followers" data-href="https://plus.google.com/116174129635451094329" data-width="520" data-height="360" data-rel="author"></div>

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

コチラはGoogle+ページアカウントの場合

<div class="g-plus" data-action="followers" data-href="https://plus.google.com/102493521432519923540" data-width="520" data-height="360" data-rel="publisher"></div>

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

以上です。
横幅は「data-width」、縦の高さは「data-height」の数値を変更して調整して下さい。
このサイズに応じて表示するフォロワーの人数が変化します。

検索から来られた方など、私のGoogle+【http://m-y-p.com/+】もヨロシクです♪
この投稿への「+1」など↓もヨロシクお願いします(^ ^)/