text_areaの内容をtwitterにシェアする

Question

text_areaの内容をtwitterをシェアすることを考えています。
あまりやり方が載っていなく

stackoverflowの質問

などを参考にして実装したのですが、

一度textareaの内容を取り出すコードを挟まなければいけないので、このサイトのように二度取り出さなくてはなりません。

どうにかして、機能を一つにまとめることはできないでしょうか？
知恵のほどをお貸しいただけたら幸いですm()m

aタグの中のdata-textが実際にツイートに入る内容です。

<textarea id="txtbox" style="width:600px; height: 50px"; class="content2"></textarea><br />
<button class="btn btn-primary" onClick="quotes()">２</button>
<hr />
<div class="tweet_button">
  <a href="https://twitter.com/share" class="twitter-share-button tweet_button"{count} data-url="goo.gl/udj2qQ" data-text="blabla" data-size="large">ツイート</a>
</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<br>

<script>
  
function quotes() {
  var txt = document.querySelector('.content2').value;
  var tbutton = document.querySelector('.twitter-share-button');
  
  tbutton.parentNode.removeChild(tbutton);
  
  var newA = document.createElement('a');
  newA.setAttribute('href', 'https://twitter.com/share');
  newA.setAttribute('class', 'twitter-share-button');
  newA.setAttribute('data-url', 'goo.gl/udj2qQ');
  newA.setAttribute('data-text', txt);
  newA.setAttribute('data-size', 'large');
  document.body.appendChild(newA);
  twttr.widgets.load();
}
</script>

Comments

[m.ts10806]

>quiitaの質問
Qiita ですし、そもそもリンク先はstackoverflowですよ。

[ninginnn]

間違えました。修正いたします。

[退会済みユーザー]

スタックオーバーフローはQIITAではないです

[wwbQzhMkhhgEmhU]

twitter javascript shareでググったらこんなページが見つかりました。
https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview
頑張ってください。

[ninginnn]

ご返信のほどありがとうございます。そのページのaタグはすでに実装されています

[wwbQzhMkhhgEmhU]

一体何が問題なのでしょう？

[ninginnn]

Textareaの内容をワンクリックで共有するページに飛ばしたいのですが、
内容を取得するコードと、それを共有する二段階に分けなければ実装できなくて、どうにか解決できないかと悩んでいます。

[wwbQzhMkhhgEmhU]

今内容読んだ。
ボタンを押すとポップアップが開くんだけど、その内容に元からあるテキストエリアの内容をコピーするのが嫌ってこと？

[ninginnn]

ありがとうございます。そういう認識でございます。
Textareaの内容を開いた時点で入れることは可能でしょうか？
aタグの中のtext-dataが入る内容なのですけれども。

[wwbQzhMkhhgEmhU]

ポップアップが開くこと自体はいいの？

[wwbQzhMkhhgEmhU]

またボタン押さないといけないからワンクリックにはならないけど

[ninginnn]

ポップアップが開いても大丈夫でございます。

[wwbQzhMkhhgEmhU]

1) ツイッターのボタンを見えないようにしておく
2) 別のボタン押下でツイッターのボタンにテキストエリアの内容を埋め込む(URLエンコードが必要？)
3) そのままツイッターのボタンクリックイベント発火
で行けるのでは？
他は、
1) テキストエリアからのフォーカスアウトでツイッターのボタンにテキストエリアの内容を埋め込む
でもいいけど

[ninginnn]

返信遅れて申し訳ございません。ありがとうございます。
三つとも試させていただきます。

Answer 1

待っていたのですが、なかなか回答が出ないので、サンプルだけ書いておきます。
結局、URLさえあってれば後はどうでもいいようだったので、元のサイトのコードを見て適当にポップアップにしておきました。

<textarea id="txtbox" style="width:600px; height: 50px" ; class="content2"></textarea><br />
<button id="tweet">tweet</button>
<hr />
<script>
    document.getElementById("tweet").addEventListener('click', function(event) {
        event.preventDefault();
        var left = Math.round(window.screen.width / 2 - 275);
        var top = (window.screen.height > 420) ? Math.round(window.screen.height / 2 - 210) : 0;
        window.open(
            "https://twitter.com/intent/tweet?text=" + encodeURIComponent(document.getElementById("txtbox").value),
            null,
            "scrollbars=yes,resizable=yes,toolbar=no,location=yes,width=550,height=420,left=" + left + ",top=" + top);
    });
</script>

ライブラリは何を使えるのか分からなかったので、素のJavaScriptで書いています。本当はそのライブラリに合わせた方がいいです。ポップアップの出し方も原始的ですしね。
使うときには多分大幅修正されると思いますが、URLEncodingするのだけは忘れないでくださいね(現状空白は+でなく%20だったり、正確な仕様とは若干ずれてます)。
HTMLのエンコーディングはUTF-8でないとダメですよ。

Comments

[ninginnn]

ありがとうございますm()m
丁寧に回答していただき大変助かりました。
解決策もいくつも出していただき勉強になりました。
本当にありがとうございます。