Googleバズボタンを表示する †
基本的なコード †
Google バズボタンは、「バズ - ウィジェット」でコードを取得できます。
基本的なコード（ボタンとカウンタを表示し、カウンタは上に表示）は、以下のようになります。
<a title="Google バズに投稿" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-locale="ja"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
|
カウンタをボタンの横に表示し、言語を日本語、投稿先のURLを「http://dobon.net/」にした時のコードは、以下のようになります。
<a title="Google バズに投稿" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-count" data-locale="ja" data-url="http://dobon.net/"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
|
詳しくは、「Buttons and Gadgets - Google Buzz API - Google Code」が参考になります。
ポストするメッセージを設定する †
メッセージは、data-message属性で指定できます。
<a title="Google バズに投稿" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-count" data-locale="ja" data-url="http://dobon.net/" data-message="DOBON.NETです。"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
|
JavaScriptを使用しないで、リンクだけを作成する †
カウンタは表示できませんが、バズに投稿するためのリンクはJavaScriptを使用せずに、簡単に作成できます。例えば、投稿先のURLが「http://dobon.net/」ならば、次のようなコードを書きます。
<a href="http://www.google.com/buzz/post?http%3A%2F%2Fdobon.net%2F"><img src="http://code.google.com/intl/ja/apis/buzz/images/google-buzz-16x16.png" width="16" height="12" style="border: none;" alt="Google バズに投稿" title="Google バズに投稿" /></a>
|
(X)HTML validにする †
(X)HTML validにするには、JavaScriptを使用しない方法にするか、「data-」で始まる属性をすべて削除します。
「data-」属性をJavaScriptで付けることで、validにした例を示します。
<a id="buzz_button" title="Google バズに投稿" class="google-buzz-button" href="http://www.google.com/buzz/post"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
<script type="text/javascript">
(function(){
var bb = document.getElementById("buzz_button");
bb.setAttribute("data-button-style","normal-count");
bb.setAttribute("data-url","http://dobon.net/");
bb.setAttribute("data-locale","ja");
</script>
})();
|
フォローボタンを表示する †
Googleバズフォローボタンを表示するためのコードは、「バズ - ウィジェット」で取得できます。
コメント †
