tweetボタンの不具合対応

ヘッダー広告
スポンサードリンク
先日クラウドワーキングで、tweetボタンをクリックした時の処理が動かないという不具合に対する依頼を請けました。

その時に学んだことを書き留めたいと思います。

tweetボタンの不具合対応を行う

ツイートボタンを2箇所に配置


今回問題となったサイトには、ツイートボタンが記事の上部と下部にそれぞれ一つずつ配置されていました。

このサイトでは、DBにツイートボタンがクリックされた数を保存していて、ツイートボタンをクリックした際に、DBの値プラス1する仕様となっていました。

そしてクリックされた数を画面上に表示していたのです。

ところがいつの日からかツイートボタンをクリックしても、カウントされなくなってしまったとのことでした。

サイトを確認をしてみると、以下のようなHTMLとなっていました。

<HEAD>
</HEAD>

<BODY>

    <a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
    <script>
        window.twttr = (function (d,s,id) {
          var t, js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
            js.src="https://platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js, fjs);
            return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
        }(document, "script", "twitter-wjs"));

	twttr.ready(function (twttr) {
          twttr.events.bind("tweet", function (event) {
            alert("test");
            // ツイートされたタイミングで呼び出される
          });
        });
    </script>
  <br>

 
    ここに記事の内容を表示


  <br>
    <a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
    <script>
        window.twttr = (function (d,s,id) {
          var t, js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
            js.src="https://platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js, fjs);
            return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
        }(document, "script", "twitter-wjs"));

	twttr.ready(function (twttr) {
          twttr.events.bind("tweet", function (event) {
            alert("test");
            // ツイートされたタイミングで呼び出される
          });
        });
    </script>

</BODY>

デベロッパーツールに表示されているエラーの内容は

『Uncaught TypeError: Cannot read property ‘ready’ of undefined』

と表示されていました。


これをみて何が原因か分かりますでしょうか?

そうです。JavaScriptのグローバル変数が2箇所に宣言されているのです。

グローバル変数twttrが2箇所で宣言されていることで、正しくセットされずtwttr.readyが呼び出されなかったのだと思います。

これを修正するためには、scriptタグ内をそのままhead内に持っていけば正常に動作します。

<HEAD>

    <script>
        window.twttr = (function (d,s,id) {
          var t, js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
            js.src="https://platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js, fjs);
            return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
        }(document, "script", "twitter-wjs"));
	twttr.ready(function (twttr) {
          twttr.events.bind("tweet", function (event) {
            alert("test");
            // ツイートされたタイミングで呼び出される
          });
        });
    </script>

</HEAD>
<BODY>

    <a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
  <br>

 
    ここに記事の内容を表示


  <br>
    <a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>

</BODY>

HTMLやJavaScriptの理解があまりない方にとっては難しい問題なのでしょうね。

(ツイートボタンを表示するにはあのコードをそのまま張り付ければよいと考えてしまうのだと思います。)

JavaScriptでグローバル変数を利用する際には、重複しないように注意が必要ということを改めて理解した事象となりました。
フッター広告

スポンサードリンク



シェアする

  • このエントリーをはてなブックマークに追加

フォローする