[Tools] Add a Dynamic Tweet Button to a Webpage

Posted 2021-02-08 Answer1215

To let people easily share the patio11bot, we‘ll add a "Tweet" button to the page. You can easily add a static share button by going to https://publish.twitter.com/ and following the instructions there, but to make a dynamic tweet button is more difficult.

We‘ll use the same share button, but we‘ll dynamically add it to the page with javascript, and then we have to tell the Twitter script to reload it as a widget with: twttr.widgets.load()

Insert the script into the header: 

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 

Add a placeholder in the html:

<div id="tweet-button"></div>

 

In script, we build dynamic message:

document.getElementById("tweet-button").innerHTML = ‘<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false" data-size="large" data-via="chrisachard" data-text="patio11bot.com just told me:

‘+answer.quote+‘

What will it tell you?">Tweet</a>‘

twttr.widgets.load()