Google +1 ボタンを設置した&表示されない場合の対処方法

2011.07.24 ( Sun )
Google +1 ボタン
Google +1 ボタンを設置すると検索結果にいろいろ影響を与えるようなので、試しにこのブログにも設置してみました。

Google +1 ボタンのコードを取得したい方は、以下から
プラスワン ボタン

このブログでは、上記サイトで作成したコードではGoogle +1 ボタンが設置できなかったため、
表示されない場合の対処方法も合わせてメモしておきますので、同様の現象が起こる方は参考に

Google +1 ボタンを設置方法&表示されない場合の対処方法

基本的にはhead要素内に
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script>

+1 ボタンを表示させたい部分に
<g:plusone></g:plusone>
を設置するだけです。

しかしながら自分のブログでは、HTML5に対応したブラウザで確認しても
Google +1 ボタンが表示されませんでした。

+1 button APIのページに記載されている
<div class="g-plusone" data-size="standard" data-count="true"></div>
とdiv要素を使用した形式も試してみましたが、表示されず…

最終的に、JavaScript APIに記載されている「gapi.plusone.render()」メソッドを使用してみたところ表示されました。

gapi.plusone.render()」を使用する場合は、
head要素内に
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script>

+1 ボタンを表示させたい部分に
<div id="plusone"></div>
<script type="text/javascript">
gapi.plusone.render("plusone",{"size":"medium"});
</script>
という様な記載すればOKです。

APIのページに記載されていますが、div要素にidを割り当て、「gapi.plusone.render()」の第一引数にdiv要素に割り当てたidを指定すればボタンが表示されます。

また、第二引数には「{"size": "standard", "count": "true"}」というようにパラメータを設定できます。

パラメータの意味に関しては、+1 button APIのページを参考にして下さい。


関連記事
ブログにTwitterのツイートボタンやFacebookのいいねボタンを設置


スポンサードリンク


この記事に対するコメント


この記事に対するコメントの投稿












※ スパムコメント対策のため、現在「http」が含まれているコメントを拒否しています。
URLを書く場合は、"h"を抜いて書くなどして下さい。

申し訳ありませんが、いろいろ忙しくなってしまったので、
今後、質問などのコメントに対しての返信はほとんど出来ないと思います。
不明点が場合はGoogle等を利用して自力で解決して頂くか、諦めてください (´・ω・`)

この記事に対するトラックバック

トラックバックURL
http://ub.blog85.fc2.com/tb.php/458-c0d7ca58
この記事にトラックバックする(FC2ブログユーザー)
ブログ内検索
RSS
Google +1 ボタン
リンク
人気記事ランキング
ブログパーツ
アクセスランキング
ブログパーツ
カウンター

カレンダー
«07 | 2017/08 | 09»
--12345
6789101112
13141516171819
20212223242526
2728293031--
テスト
track word track feed この日記のはてなブックマーク数