コピペでOK!記事にGoogle「+1」ボタンを設置する方法

コピペでOK!記事にGoogle「+1」ボタンを設置する方法

以前、TwitterのツイートボタンやFacebookのいいね!ボタンの設置方法をご紹介したところとても好評だったので、今回はGoogle「+1」ボタンの設置方法をご紹介:)

SPONSORED LINK

初心者向け:コピペでOK!

設置は簡単、ボタンの下に書かれたコードをコピペするだけ!

2014/04/30 追記

ボタンの設置方法が分からない方はこちらの記事を参考にどうぞ:)

記事:記事下など好きな所にSNSボタンを設置する方法

吹き出し - たてver(オススメ)


<div class="g-plusone" data-size="tall"></div>


<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/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

吹き出し - 横ver


<div class="g-plusone"></div>


<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/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

テキストver


<div class="g-plusone" data-annotation="inline" data-width="300"></div>


<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/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

カウントなしver


<div class="g-plusone" data-annotation="none"></div>


<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/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

上級者向け:じっくり吟味してから設置!

ここからはちょっと上級者向けの設置方法をご紹介!

まずは以下のサイトにアクセスします。

+1 ボタン - Google+ Platform — Google Developers(公式サイト)

ボタンを作成する

ボタンの詳細設定

ここに細かい設定をしていきます。

サイズ

ボタンのサイズを選択します。

small / medium / standard / tall の中から選びましょう。

+1 情報

「+1」された数を表示するか選択します。

インライン:テキストで表示します

バルーン:吹き出しで表示します

なし:表示しない

(幅)

エリアの幅を設定します。※+1 情報でインラインを選んだ時のみ設定可

幅は120px以上で設定しましょう(120px未満だと自動で120pxに変更されます)。

未設定の場合450pxが自動で設定されます。

言語

「+1 情報」を表示する言語を選択します。

非同期(オプション)

Javascriptの読み込みを非同期で行うか設定します。

特に理由がなければチェックを付けましょう。

タグを解析(オプション)

「+1」ボタン関連のタグをいつ解析するか設定します。

こちらも特に理由がなければ「ページ読み込み時(デフォルト)」を選択しましょう。

JS コールバック関数(オプション)

コールバックイベントの関数名を設定します。

クリックアクションをGoogle Analyticsでトラッキングする時などに使用します。

+1 ボタンの対象とする URL(オプション)

「+1」するターゲットのURLを設定します。

特に理由がなければ空のままでOKです。

空を設定すると、ページの<link rel="canonical" ... />タグを参照します。Bloggerでは各ページのURLがこのタグに設定されているので、「空を設定=クリックされたページが対象」ということになります。

こんな感じでボタンのプレビューが表示されます

プレビューを確認し問題がなければコードをコピー!

あとはボタンを設置したい箇所にこのコードを張り付ければOK!

まとめ

というわけで「+1」ボタンを設置する方法のご紹介でした。

みなさんもぜひお試しくだされ:)

SPONSORED LINK

この記事がお役にたちましたらシェアをお願いします:)