Google +1 ボタンを表示する †基本的なコード †Google+1ボタン(プラスワンボタン)は、「プラスワン ボタン」でコードを取得できます。 基本的なコードは、以下のようなものです。 サイズを小、言語を日本語、カウンター(+1情報)を非表示、+1ボタンの対象とするURLを「http://dobon.net/」とした時のコードは、以下のようになります。 「<div class="g-plusone" ...」は「<g:plusone ...」とすることもできます。この場合は、以下のようになります。 「head 内か、body 終了タグの直前に次のタグを貼り付けてください。」のタグは、どこにあっても機能します。ただし、「Google +1 Button Performance Review」によると、body終了タグの直前がよい(ページが速く表示される)そうです。(古い情報です。) 対象とするURLを指定する †その他のブックマークボタンでも大抵そうですが、+1ボタンには対象とするURLを指定できます。もしこれを指定しなかったとしてもdocument.location.hrefで定義された現在のURLが使われるため、通常は問題ありません。 対象とするURLを明示的に指定するケースは、例えば、別のページの+1ボタンを設置したい時です。例えば、記事の一覧を表示したページで、それぞれの記事の+1ボタンを記事の横に表示する時は、その記事のURLを指定して+1ボタンを設置します。 それ以外でもできればURLを明示的に指定した方がよいです。なぜなら、document.location.hrefのURLに余計なクエリ文字列やアンカーが含まれていると、同じページであっても別のURLとして扱われてしまうかもしれないからです。 URLを明示的に指定する方法は、href属性以外に、link rel="canonical" タグを使う方法があります。詳しくは、「+1 Button | Google+ Platform for Web | Google Developers」をご覧ください。 カウンターをテキストで表示する †「+1情報」を「インライン」にすると、カウンターをテキストで表示することができます。この時、幅も指定することができます。 カウンタをテキストで表示し、幅を300pxとするコードは、以下のようになります。なおwidthは最低で120px(小さいサイズは自動でリサイズされ、推奨最小サイズは250px)で、指定しないと450pxになるようです。 非同期的にロードする †「詳細オプション」の「ダイナミック」にチェックを入れると、非同期的にロードするコードが出力されます。 「ダイナミック」を有効にして取得したコードは以下のとおりです。 IEで表示されない †「<g:plusone ...」のコードをJavascriptのdocument.writeで書き出すと、Internet Explorerではボタンが表示されないようです。 「Google +1(プラスワン)ボタンが表示されないときの対処法 & クリック計測方法 | 海外SEO情報ブログ」によると、IEでも表示されるようにするには、「次のタグを +1 ボタンを表示する箇所に貼り付けてください」のタグにHTML5の構文(「<div class="g-plusone" ...」)を使用するということです。 海外SEO情報ブログさんでは、「data-size」や「data-count」が効かないとありますが、私が試した限りでは、問題なく機能しているようです。 (X)HTML validにする †Google +1ボタンのコードを(X)HTML validにする方法は、「javascript - Google +1 Button not W3C compliant - Stack Overflow」や「How to produce valid Google +1 buttons - GabSoftware」にあります。 これに従うと、例えば以下のようなコードになります。 共有ボタン †共有ボタンは、「Share | Google+ Platform for Web | Google Developers」でコードを取得することができます。 コメント †
|