Google +1 ボタンを表示する †基本的なコード †Google+1ボタン(プラスワンボタン)は、「プラスワン ボタン」でコードを取得できます。 基本的なコードは、以下のようなものです。 サイズを小、言語を日本語、カウンターを非表示、+1ボタンの対象とするURLを「http://dobon.net/」とした時のコードは、以下のようになります。 「次のタグを head 要素内または body 終了タグの直前に貼り付けてください」のタグは、どこにあっても機能します。ただし、「Google +1 Button Performance Review」によると、body終了タグの直前がよい(ページが速く表示される)そうです。 更なるカスタマイズについては、「+1 ボタンをサイトに追加 - +1 button API - Google Code」や「Adding the +1 Button - +1 Button API - Google Code」(こちらの英語のページの方が最新の情報が書かれています)が参考になります。 対象とするURLを指定する †その他のブックマークボタンでも大抵そうですが、+1ボタンには対象とするURLを指定できます。もしこれを指定しなかったとしてもdocument.location.hrefで定義された現在のURLが使われるため、通常は問題ありません。 対象とするURLを明示的に指定するケースは、例えば、別のページの+1ボタンを設置したい時です。例えば、記事の一覧を表示したページで、それぞれの記事の+1ボタンを記事の横に表示する時は、その記事のURLを指定して+1ボタンを設置します。 それ以外でもできればURLを明示的に指定した方がよいです。なぜなら、document.location.hrefのURLに余計なクエリ文字列やアンカーが含まれていると、同じページであっても別のURLとして扱われてしまうかもしれないからです。 URLを明示的に指定する方法は、href属性以外に、link rel="canonical" タグを使う方法があります。詳しくは、「+1 ボタンをサイトに追加 - +1 button API - Google Code」をご覧ください。 カウンタをテキストで表示する †実は英語のページ「plusone-button」で+1ボタンを作成すると、日本語のページで作成するよりも多くのオプションを設定できます。そのひとつに、カウンタをテキストで表示する設定があります。 カウンタをテキストで表示し、幅を480pxとするコードは、以下のようになります。なおwidthは最低で120pxで、指定しないと450pxになるようです。 非同期的にロードする †同じく英語のページ「plusone-button」には「Asynchronous」というオプションがあり、これにチェックを入れると、非同期的にロードするコードが出力されます。通常は非同期的にロードした方が、速く表示されます。 「Asynchronous」を有効にして取得したコードは以下のとおりです。 IEで表示されない †上記タグをJavascriptのdocument.writeで書き出すと、Internet Explorerではボタンが表示されないようです。 「Google +1(プラスワン)ボタンが表示されないときの対処法 & クリック計測方法 | 海外SEO情報ブログ」によると、IEでも表示されるようにするには、「次のタグを +1 ボタンを表示する箇所に貼り付けてください」のタグにHTML5の構文を使用するということです。HTML5の構文については、「+1 ボタンをサイトに追加 - +1 button API - Google Code」に説明があります。 HTML5の構文は、例えば以下のようになります。 海外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」にあります。 これに従うと、例えば以下のようなコードになります。 コメント †
|