#title(Googleバズボタンを表示する) #contents -[[「様々なシェア、ブックマークボタン(Google+1、twitter、facebook、はてななど)を表示する」に戻る>../]] *Googleバズボタンを表示する [#o8b56e2f] ''Googleバズは、2012年1月15日に閉鎖される予定です。'' #ref(../buzz1.png) **基本的なコード [#s9dbc90e] Google バズボタンは、「[[バズ - ウィジェット>http://www.google.com/buzz/api/admin/configPostWidget]]」でコードを取得できます。 基本的なコード(ボタンとカウンタを表示し、カウンタは上に表示)は、以下のようになります。 #prescroll(wrap=true){{ <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/」にした時のコードは、以下のようになります。 #prescroll(wrap=true){{ <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>http://code.google.com/intl/ja/apis/buzz/buttons_and_gadgets.html]]」が参考になります。 **ポストするメッセージを設定する [#j12726cb] メッセージは、data-message属性で指定できます。 #prescroll(wrap=true){{ <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を使用しないで、リンクだけを作成する [#o1058dad] カウンタは表示できませんが、バズに投稿するためのリンクはJavaScriptを使用せずに、簡単に作成できます。例えば、投稿先のURLが「http://dobon.net/」ならば、次のようなコードを書きます。 #prescroll(wrap=true){{ <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にする [#q8123875] (X)HTML validにするには、JavaScriptを使用しない方法にするか、「data-」で始まる属性をすべて削除します。 「data-」属性をJavaScriptで付けることで、validにした例を示します。 #prescroll(wrap=true){{ <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> })(); }} **フォローボタンを表示する [#m6b15fd9] #ref(../buzz2.png) Googleバズフォローボタンを表示するためのコードは、「[[バズ - ウィジェット>http://www.google.com/buzz/api/admin/configFollowWidget]]」で取得できます。 **コメント [#i8b1a9a5] #comment //これより下は編集しないでください #pageinfo([[:Category/インターネット]],2011-09-01 (木) 23:05:51,DOBON!,2011-10-18 (火) 01:11:57,DOBON!) |