ネイティブアプリでシェアされない!? Twitterでシェアする内容を動的に変える時の注意点。

某案件で［クイズに答えて正解数に応じてTwitterでシェアする内容を変更するもの］を実装しました。
ここでネイティブアプリ（iPhoneとかに入っているTwitterアプリ）でハマったので記録として記しておきます。

jQueryを使用した話になります。

attrメソッドを使用してのシェア内容の変更はネイティブアプリでは動かない。

そのままですが、attrメソッドを使用しhrefの内容を変更すると、Twitterアプリを立ち上げてシェアした際に変更したシェア内容が継承されず、真っ白になります。

ダメなサンプル例

HTML

<a id="tweetBtn" href="">ツイート</a>

JavaScript

if(count === 1){
  $('#tweetBtn').attr('href','http：//twitter.com/intent/tweet?original_referer=URL&url=URL&text=%e3%81%bb%e3%81%92%e3%81%bb%e3%81%92');
}
// countはクイズの正解数
// %e3%81%bb%e3%81%92%e3%81%bb%e3%81%92 = ほげほげ（エンコード）
// URLの：（全角）を:（半角）に変更してください

PCで検証した場合、Twitterページが立ち上がりうまくシェアできますが、ネイティブアプリがiPhoneなどに入っている場合ツイート内容が消えてしまいます。
※ Androidは試していないのでわかりません(汗)

解決策

HTML

<div id="tweetBtn"><a href="">ツイート</a></div>

JavaScript

if(count === 1){
  $('#tweetBtn').find('a').remove();
  $('#tweetBtn').append('http：//twitter.com/intent/tweet?original_referer=URL&url=URL&text=%e3%81%bb%e3%81%92%e3%81%bb%e3%81%92')
}
// countはクイズの正解数
// %e3%81%bb%e3%81%92%e3%81%bb%e3%81%92 = ほげほげ（エンコード）
// URLの：（全角）を:（半角）に変更してください

一度aタグを消して再度、DOMを生成させています。
こうすることでネイティブアプリでも動的に変更したシェア内容を引き継ぎ、ツイートすることができます。

パフォーマンス的にはその都度、要素を消したり追加したりしているのであまりよくない気がしますが...
jQueryを使用する場合、この方法で良いかと思います。

まとめ

• Twitterでシェアする内容を動的に変える時は必ず実機で確認する！
• jQueryを使用する場合は、attrメソッドを使用しない！
• その都度、DOMを生成させる！
• エンコードは怠るな！

以上です。

一言

試してないですが、ReactやAngularJSだとこんなことしなくてもうまくいけるかもですねー。