CODEWITHSUNDEEP
javascripthtmlbuttontwitter
Mahas
Mahas

Reputation: 21

Different Twitter share buttons for randomly generated content

I need to create a page with randomly generated content. Each content will have a different Twitter share button for each, using a JavaScript file. I used the Twitter generated button for sharing, but it does not work in my JavaScript file.

Code:

if (randomNumber === 0){
     shareContent.innerHTML ='
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large" data-text="THIS IS THE FIRST TEXT TO SHARE" data-url="http://ecosdevrindavana.com/quotes/index.html" data-related="AvatarDorado" data-lang="es" data-show-count="false">Tweet</a> ${async src="https://platform.twitter.com/widgets.js" charset="utf-8"}';
    
}else if(randomNumber == 1){
     shareContent.innerHTML ='
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large" data-text="THIS IS THE SECOND TEXT TO SHARE" data-url="http://ecosdevrindavana.com/quotes/index.html" data-related="AvatarDorado" data-lang="es" data-show-count="false">Tweet</a> ${async src="https://platform.twitter.com/widgets.js" charset="utf-8"}';
}

The original "share" button:

<a href="twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large" data-text="TEXT TO SHARE" data-url="ecosdevrindavana.com/quotes/index.html" data-related="AvatarDorado" data-lang="es" data-show-count="false">Tweet</a> <script async src="platform.twitter.com/widgets.js" charset="utf-8"></script>

Upvotes: 1

Views: 119

Answers (1)

Mahas
Mahas

Reputation: 21

I've found the solution thanks to @SalomonHenao:

 var script = document.createElement("script");
        script.setAttribute("src", "https://platform.twitter.com/widgets.js");
        document.head.appendChild(script);

        let buttonHtml = `
            <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large" data-text="` + quotes[randomNumber] + `" data-url="http://ecosdevrindavana.com/quotes/index.html" data-related="AvatarDorado" data-lang="es" data-show-count="false">Tweet<//a>`;

        document.getElementById('completo').innerHTML = buttonHtml;
    ```

Upvotes: 1

Related Questions