2015年5月20日

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

スポンサードリンク

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

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



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



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

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

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


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

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



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


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

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


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

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

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


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


 まずはこちら。

<!-- head 内か、body 終了タグの直前に次のタグを貼り付けてください。 -->
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'ja'}
</script>


書かれているように、<head>から</head>の間か、
</body>の直前に貼り付けます。

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


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



 その際、Bloggerのテンプレートの仕様の影響で、
このままのコードでは貼付けできません。

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


 理由はわからないのですが、ちょっと不便ですね。
でも、修正すれば大丈夫です。


 問題は

async defer>

です。

こちらを変更します。

<script src="https://apis.google.com/js/platform.js" async="async" defer="defer">

とします。

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

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



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

大体は投稿記事の下とかが多いですが、
ガジェットでもいいですし、好きに決めて大丈夫です。

そこへ

<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-plusone" data-size="medium"></div>

を追加します。


 投稿の下は、

<data:post.body/>

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

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

投稿のみに表示させるには、
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
ここ
<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ボタンの読み込みを非同期にできるので、
ページが開くのがスムーズになります。



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

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


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

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

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


スポンサードリンク