Google+1ボタンカスタマイズ

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)

このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録
ボタンの色が白ならば、クリックし+1 を付けてください。
カテゴリー: AJAX, Google, JavaScript, SEO, WordPress, ブログパーツ   パーマリンク

Google+1ボタンカスタマイズ への1件のコメント

  1. matai より:

    mataiです。

    コメントを途中まで書いて送信してしまった方がいるようです。
    内容があまりにも短かったもので(一文字なのですが)、
    スパムコメント対策に引っかかってしまっています。

    調べた限りでは、ボットによる誤投稿ではなさそうです。

    もしかすると、エディタが使いづらかったかなと、気になっています。

    よろしければ、ぜひ、再投稿いただけるとうれしいです。
    もしくは、おきてがみ等を利用して、こっそり教えてください。

    よろしくお願いします。

コメントをどうぞ

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" target="" rel="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <br> <cite> <code> <del datetime=""> <em> <i> <li> <ol> <p class="" align="" dir="" lang="" style=""> <span class="" dir="" align="" lang="" style="" title=""> <q cite=""> <strike> <strong> <sub> <sup> <u> <ul> <hr align="" class="" noshade="" size="" width=""> <img alt="" align="" border="" class="" height="" hspace="" longdesc="" vspace="" src="" style="" width="" localsrc="">

コメント大歓迎。ぜひよろしくお願いします。
Wordpressプラグイン「nofollow free」を利用して、ウェブサイトで入力されたURL、コメント内リンクのすべてに対してnofollow属性を取り外しています。
関連記事⇒コメントのリンクタグの「rel=nofollow」について
プラグインの取得は⇒nofollow free
このカスタマイズ文章の作り方の記事⇒nofollow freeカスタマイズ
↓スパムコメント対策
Comments on this blog, 'Akismet' is protected by.