14
18

More than 5 years have passed since last update.

オリジナルデザインのツイートボタンから、ツイート完了したイベントを取得する

Posted at

SNSへの投稿ボタンを設置することはよくあるが、ユーザーがちゃんと投稿してくれたかどうかをどう確認する方法はあるのか。
twitterについて調べてみた結果を報告する。

twitterのJavaScript APIでコールバックイベント取得する

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="//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(){
    //ここにツイート完了時の処理を書く
  });
});

これでツイート完了時のイベントを取得して関数を実行することができる。

ただし、公式ウィジェットであるツイートボタンからのツイートが想定されているようである。
オリジナルデザインのボタンからツイートをさせたい場合でも、ツイート完了のイベント取ることはできるのか。

window.open()で開いたintentはコールバックイベントを取得できない

キャンペーンサイトなどでは公式のツイートボタンではなく、よくこんな感じボタンを実装すると思う。

<a href="javascript:void(0);" id="tweetBtn">
 <img src="/images/tweet_button.png" alt="オリジナルデザインのツイートボタン">
</a>
<script>
$('#tweetBtn').on('click', function(e){
  e.preventDefault();
  var url = 'https://twitter.com/intent/tweet?text=' + encodeURLComponent('ツイートテスト');
  window.open(url, '_blank');
});
</script>

実はこの方法では、ツイート完了時のイベントは取得できない。
公式フォーラム上の投稿で、twitterのスタッフが回答している。
window.open()からintentのコールバックを取得する方法

ここはハマりポイントだが、実は単純にブラウザネイティブのtarget="_blank"で新しいウインドウを開いてやった場合は、コールバックイベントを取得できる。

$('#tweetBtn').on('click', function(e){
  var url = 'https://twitter.com/intent/tweet?text=' + encodeURLComponent('ツイートテスト');
  $(this).attr(href, url);
  return true;
});

だが、しかし

IEではイベントを取得できない

Chrome, Firefox, Safariでは、上記のやり方でツイート完了後のイベントを取得できた。
しかし、IEではイベント取得できない。公式ウィジェットのツイートボタンでもダメであった。

どういうことだと、先ほどのtwitterの公式ドキュメント(Scripts:Event)を見ると、

Note that Web Intent events may not function fully in browsers that don’t support the browser postMessage API.
訳:Web Intent イベントはpostMessage APIをサポートしていないブラウザでは十全には機能しないおそれがありますのでご注意ください

あれ、IEは8からpostMessageをサポートしているはずだったけど・・・
http://caniuse.com/#feat=x-doc-messaging
どうも、partial supportedすなわち部分的サポートであるらしい。それがためにIntentのイベントも取得できないのかもしれない。
それにしても、11でもまだ正式サポートではないようだ・・・相変わらず何をやっているのか。

結論

IEではツイート完了を確認できない
したがって、全ユーザーで同じ挙動を期待する場合は使えない。(確実にツイートをした場合にだけ、見返りを提供したいなど)
ただ、参考程度にちゃんとツイート確認しているのか計測したいだけなら、実装してもよいだろう。

所感

SNSでシェアしてくれたら見返りをあげるという仕組みでもって、より多くのユーザーに広告したいという意図からすると、ユーザーがSNSに投稿したのかを確認したいという要望は理解できる。
ただ、正直なところ、報酬で釣って拡散を期待するサプライヤーも報酬欲しさに広告を撒き散らすユーザーも、私はどちらも好きではない。自分が本当に素敵だと感じるモノを、見返りなどなくてもシェアしたいと思うのモノを、シェアすればいい。
売りたい者とタダで欲しい者、内発性ではなく実利に駆動された者たちが跋扈するソーシャルはつまらない。

14
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
18