ShareButton/GoogleBuzz のバックアップ差分(No.3)

バックアップ一覧
現在との差分を表示
ソースを表示
バックアップを表示
ShareButton/GoogleBuzz へ行く。
- 1 (2011-09-01 (木) 23:05:51)
- 2 (2011-09-02 (金) 17:35:07)
- 3 (2011-09-05 (月) 01:28:31)
- 4 (2011-10-18 (火) 01:11:57)
追加された行はこの色です。
削除された行はこの色です。
#title(Googleバズボタンを表示する)

#contents

-[[「様々なシェア、ブックマークボタン（Google+1、twitter、facebook、はてななど）を表示する」に戻る>../]]

*Googleバズボタンを表示する [#o8b56e2f]

#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-09-02 (金) 17:35:07,DOBON!)
#pageinfo([[:Category/インターネット]],2011-09-01 (木) 23:05:51,DOBON!,2011-09-05 (月) 01:28:31,DOBON!)
▲ ▼
DoboWiki
