WEBのお勉強とその他趣味的な感じで

まず、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)で呼び出す。
通常は、ページの読み込み後に呼び出せばよいので、省略でＯＫ。

次にボタンを設置したい場所に以下のコードを貼り付ける。

<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：指定したＵＲＬに、+1 します。
指定しないと、貼り付けた先のＵＲＬになります。

以上が、Google＋1ボタンのＡＰＩの解説です。
それで、具体的に文字を変えるにはどうするかというと・・・
ボタンの位置に以下のソースを貼り付けます。

<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");
      //＋１した時用のメッセージ
      var thankYouMessage = document.getElementById("plus-one-button-thanks");
      //＋１キャンセルした時用のメッセージ
      var ngMessage = document.getElementById("plus-one-button-ng");	

      // ボタンを押した後用のメッセージがない場合は終了
      if (!thankYouMessage || !ngMessage) {
        return;
      }

      //初期のメッセージは消す
      defaultMessage.style.display = "none";

      //ステータスがＯＮ（投票されている）場合と、
      //キャンセルした場合に分けてメッセージ変更
      if (callbackData.state == "on") {
        thankYouMessage.style.display = "inline";
        ngMessage.style.display = "none";
      } else {
        thankYouMessage.style.display = "none";
        ngMessage.style.display = "inline";
      }
    }
</script>

簡単に動作説明 ＋１ボタンが押された時点で、
plusOnedPublicly(callbackData)関数が動きだす。
callbackDataに、 on(＋１した。) off（＋１キャンセルした。) が、格納される。
デフォルトの文字（ＩＤ：plus-one-button-default）を消す（display = "none"）
そして、ケースに応じて ＋１した時用のメッセージ（ＩＤ：thankYouMessage）か
＋１キャンセルした時用のメッセージ（ＩＤ：ngMessage）を出す。

Googleウェブマスターツールでやっていた内容を参考にしました。
直接、文字列を変えてしまうとか、もっと、スマートな方法があると思います。

っと、よく調べたら、すでに、jQueryプラグインが作成されていました。
たぶんやっていることは似たような内容だと思います。
jquery-gplusone-js（jQuery Google +1-Button plugin）
デモとダウンロードは（Javascriputのエラーがあり、ＩＥだとデモが見えないかも）
jquery-gplusone-js（Working Demo）

« 続きを隠す