動的な内容のtwitterシェアボタン作りましょうか。 #JavaScript

参照: https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/parameter-reference1

なんかややこしいことやってる人が多いみたい。シンプルですよ。

完成形

ｃｂａ
ｃｂａ
ｃｂａ
ｃｂａ
ｃ　ａ
ｃ　　
https://t.co/YwBbLDAWX2 #tategaki
— あんあん@ 野良犬 (@lovesaemi) 2019年4月18日

htmlでボタン表示divとjs読み込み

スクリプト読み込みますー

<div id="tweet-area"><!-- ここにボタンができる--></div>
<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

ポイントはasync属性をとること

js

// 任意のタイミングで呼べば狙ったとおりのテキストのボタンつくれる
// 引数増やしていろいろやってもよいですね。
function setTweetButton(text){
  $('#tweet-area').empty(); //既存のボタン消す
  // htmlでスクリプトを読んでるからtwttがエラーなく呼べる
  // オプションは公式よんで。
  twttr.widgets.createShareButton(
    "",
    document.getElementById("tweet-area"),
    {
      size: "large", //ボタンはでかく
      text: text, // 狙ったテキスト
      hashtags: "ハッシュタグ", // ハッシュタグ
      url: "//url" // URL
    }
  );
}

ogpタグとかいれてたらurlの表示もきれいにでるのでしょうね。

以上です。