JSFiddle - React, Tailwind, and code Playground

by Taqi_Shah

HTML

<button class="tweet-this">Tweet this!</button>

JavaScript

var tweetUrlBuilder = function(o){
    return [
        'https://twitter.com/intent/tweet?tw_p=tweetbutton',
        '&url=', encodeURI(o.url),
        '&via=', o.via,
        '&text=', o.text
    ].join('');
};

$('.tweet-this').on('click', function(){
    var url = tweetUrlBuilder({
        url : 'http://bit.ly/OChT65',
        via : 'ProJavaScript',
        text: 'How to make a custom share tweet button and know when the user tweeted'
    });
    window.open(url, 'Tweet', 'height=500,width=700');
})

// Called by the Twitter, many times during it's
// life-cycle. We only want to know when the user
// has tweeted, so the following filters are required.
var callback = function(e){
    if(e && e.data){
        var data;
        try{
            data = JSON.parse(e.data);
        }catch(e){
            // Don't care.
        }
        if(data && data.params && data.params.indexOf('tweet') > -1){
            alert('Thanks for the tweet!');
        }
    }
};

window.addEventListener ? window.addEventListener("message", callback, !1) : window.attachEvent("onmessage", callback)