Google+1ボタンについては⇒Google+1ボタン
実はこのボタン、googleにログインして押すと、
数字のカウントが上がるほかに右の文字が変わるんです。
GoogleのIDがない方は、ぜひ取得してみてください。
そして、恵まれない当サイトに「+1」を。
もちろん無料ですし、
アクセス解析の「Analytics」
WEBサイト管理に便利な「ウェブマスターツール」
「Gmail」
広告クリックで収入が発生する「AdSense」
「Googleリーダー」
「YouTube」
などなど、
さまざまなサービスが利用できます。
登録はここから⇒Googleアカウント
Google+1ボタンについて、
作成ツールは、前記事参照。 ⇒Google +1 をウェブサイトに表示
ここで簡単に作れるます。
Google+1ボタンのAPIについて、もっと詳しく知りたい方は ⇒+1 button API
この文字を変更する方法を踏まえて、
Google+1ボタンの設置の詳細をご紹介します。
まず、Google+1ボタンを使用するのに必要な、Javascriputを貼り付けます。
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'ja', parsetags: 'onload'} </script>
このコードをページのどこかに入れておく必要があります。
記事やサイドバーに入れてしまうと、出てこないページが出てきてしまうので、
head 要素内やbody 終了タグの直前あたりの調整が出来るならそちらに貼り付けます。
Wordpressなら、「header.php」か「footer.php」
「lang: 'ja'」 これは、使用する言語指定。
デフォルト(指定しないで省略すると)、「en-US」(英語)になります。
「parsetags: 'onload'」
これは、
onload(デフォルト):ページの読み込み後すぐに読み込む
explicit:指定して呼び出す。
gapi.plusone.go(container) または gapi.plusone.render(container)で呼び出す。
通常は、ページの読み込み後に呼び出せばよいので、省略でOK。
次にボタンを設置したい場所に以下のコードを貼り付ける。
<g:plusone callback="plusOnedPublicly" count="false" href="http://test" size="medium"></g:plusone>
※分かりやすいように改行を入れてあります。
size:ボタンの大きさの指定。デフォルトは「standard」
count:+1 の合計数(ふきだし)を表示指定。
true⇒表示する, false⇒表示しない。 デフォルトはtrue。
(※tall(大)の場合は、必ず表示)
詳細は⇒Google +1 ボタンのサイズ
callback:+1 ボタンをクリックした後に呼び出す関数(コールバック関数)の指定
hrefには、 +1で指定したURL
stateには、+1 をした場合には「on」、+1 をキャンセルした場合には「off」が入ります。
href:指定したURLに、+1 します。
指定しないと、貼り付けた先のURLになります。
以上が、Google+1ボタンのAPIの解説です。
それで、具体的に文字を変えるにはどうするかというと・・・
ボタンの位置に以下のソースを貼り付けます。
<g:plusone callback="plusOnedPublicly"></g:plusone> <span id="plus-one-button-default" style="display:inline;"> ※最初に出る文字 </span> <span id="plus-one-button-thanks" style="display:none;"> ※クリックして+1されたときに出る文字 </span> <span id="plus-one-button-ng" style="display:none;"> ※クリックして+1がキャンセルされたときに出る文字 </span>
それとは別に以下のJavascriputを貼り付けます。
<script type="text/javascript"> //google+1が押された場合の処理 function plusOnedPublicly(callbackData) { // callbackDataがない場合とstateがない場合は終了 if (!callbackData || !callbackData.state) { return; } //初期のメッセージ var defaultMessage = document.getElementById("plus-one-button-default"); //+1した時用のメッセージ var thankYouMessage = document.getElementById("plus-one-button-thanks"); //+1キャンセルした時用のメッセージ var ngMessage = document.getElementById("plus-one-button-ng"); // ボタンを押した後用のメッセージがない場合は終了 if (!thankYouMessage || !ngMessage) { return; } //初期のメッセージは消す defaultMessage.style.display = "none"; //ステータスがON(投票されている)場合と、 //キャンセルした場合に分けてメッセージ変更 if (callbackData.state == "on") { thankYouMessage.style.display = "inline"; ngMessage.style.display = "none"; } else { thankYouMessage.style.display = "none"; ngMessage.style.display = "inline"; } } </script>
簡単に動作説明 +1ボタンが押された時点で、
plusOnedPublicly(callbackData)関数が動きだす。
callbackDataに、 on(+1した。) off(+1キャンセルした。) が、格納される。
デフォルトの文字(ID:plus-one-button-default)を消す(display = "none")
そして、ケースに応じて +1した時用のメッセージ(ID:thankYouMessage)か
+1キャンセルした時用のメッセージ(ID:ngMessage)を出す。
Googleウェブマスターツールでやっていた内容を参考にしました。
直接、文字列を変えてしまうとか、もっと、スマートな方法があると思います。
っと、よく調べたら、すでに、jQueryプラグインが作成されていました。
たぶんやっていることは似たような内容だと思います。
jquery-gplusone-js(jQuery Google +1-Button plugin)
デモとダウンロードは(Javascriputのエラーがあり、IEだとデモが見えないかも)
jquery-gplusone-js(Working Demo)
mataiです。
コメントを途中まで書いて送信してしまった方がいるようです。
内容があまりにも短かったもので(一文字なのですが)、
スパムコメント対策に引っかかってしまっています。
調べた限りでは、ボットによる誤投稿ではなさそうです。
もしかすると、エディタが使いづらかったかなと、気になっています。
よろしければ、ぜひ、再投稿いただけるとうれしいです。
もしくは、おきてがみ等を利用して、こっそり教えてください。
よろしくお願いします。