JavaScript
Twitter

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

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

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


完成形

a.mov.gif

スクリーンショット 2019-04-19 0.41.21.png


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の表示もきれいにでるのでしょうね。

以上です。