Google+共有バナー、+1ボタンをつけるには。

　まずはGoogle+のバナーを取得してきます。
簡単なのですが、
Bloggerに貼り付ける時はちょっとコツがいります。

Bloggerのテンプレートの仕様の影響だと思われます。

Google+共有バナーを作成する

まず、GoogleDeveloperで
Google+の+1ボタンを作ります。

それをコピーして、自分のサイトに貼り付けるだけです。

作成するボタンは、自分固有のものです。

　作成するところは、こちらです。

https://developers.google.com/+/web/+1button/

　詳細オプションは特に気にせず、
とりあえずボタンを作ります。

　大きさはMedium、
+1情報はバルーン表示、
言語を日本語にしました。

もちろん、好きに変えられます。

　すると、
右側にボタンのHTMLコードが表示されています。

こちらをサイトに貼り付けるだけです。

では、どこに貼り付けるかですね。

　2つコードがあります。
それぞれ別の場所に貼り付けます。

　まずはこちら。


<script src="https://apis.google.com/js/platform.js" async defer>
{lang: 'ja'}
</script>

書かれているように、<head>から</head>の間か、

</body>の直前に貼り付けます。

どちらでも良いです。
自分でわかりやすい位置に設置します。

Bloggerのテンプレートに貼る時はasync defer>に注意

　その際、Bloggerのテンプレートの仕様の影響で、

このままのコードでは貼付けできません。

貼付けはできるのですが、
テンプレート保存をしようとすると
エラーが表示されます。

　理由はわからないのですが、ちょっと不便ですね。

でも、修正すれば大丈夫です。

　問題は

async defer>

です。

こちらを変更します。

とします。

最後が少し、変わったのがお分かりになるでしょうか。

これでテンプレート保存が無事出来ました。

　そして、ボタンを取り付けたい位置を決めて、

探します。

大体は投稿記事の下とかが多いですが、

ガジェットでもいいですし、好きに決めて大丈夫です。

そこへ

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

を追加します。

　投稿の下は、

<data:post.body/>

の後です。

このタグ以下が投稿下になります。

なので、<data:post.body/>直後に置くといいですね。

投稿のみに表示させるには、

<b:if cond='data:blog.pageType == "item"'>

ここ

<b:else/>

</b:if>

に挿入。

　注意点は、

<data:post.body/>が複数あること。

どれかがPC用、モバイル用、もう一つあったのですが、

PC用でした。

どう使い分けられているかはわかりません。

お使いのテンプレートを見ながら、

試してみて下さいね。

　前後のコードで、mobileという文字があれば、
それはモバイルの

<data:post.body/>

だとわかります。

　最後に、

<script type="text/javascript">
(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>

を一番最後に追加している
<div class="g-plusone" data-size="medium"></div>

コードの直後に追加します。

複数

<div class="g-plusone" data-size="medium"></div>コードを
設置している方は、
一番最後のコードのみに、
上記

<script type="text/javascript">
(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>
コードを追加すればOK。

　これで、+1ボタンの読み込みを非同期にできるので、
ページが開くのがスムーズになります。

　当ブログ内の情報は、
全ての方に応用できるとは限りません。

必ずテンプレートはバックアップを取っておいて下さいね。

また、ご利用は自己責任でお願い致します。

ラビットしま子は美容ライターであり、
サイト制作のプロではありません。

個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。（わからんから）

スポンサードリンク

ページ

2015年5月20日