JSFiddle - React, Tailwind, and code Playground

by Emanuel Vecchio

HTML

<div class="tw-tweet" data-text="Hola Mundo!!" data-via="azure" >tweet</div>

CSS

.tw-tweet {
    text-transform: uppercase;
}

.tw-tweet span {
    margin-left: 10px;
}

JavaScript

// common funtion to all community buttons. (opens popup)
function popupwindow(url, title, w, h) {
  var left = (screen.width/2)-(w/2);
  var top = (screen.height/2)-(h/2);
  return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
} 

$.fn.twShareable = function(sharedUrl) {
    var tw_share_url='https://twitter.com/intent/tweet?url=';
    sharedUrl = encodeURIComponent(sharedUrl);
    var text = this.data('text');
    var via = this.data('via');
    var element = this;

    // handles click envent on 
    this.on('click', function() {        
        var url = tw_share_url + sharedUrl;
        url += '&text=' + encodeURIComponent(text);
        url += '&via=' + encodeURIComponent(via);
           
        popupwindow(url, "Share on Twitter", 600, 500);    
    });
    
    $.getJSON('https://cdn.api.twitter.com/1/urls/count.json?url=' + sharedUrl + '&callback=?', onLoadTwGraphJSONP);
    
    function onLoadTwGraphJSONP(data) {
        console.log(data);
        debugger;
        if (data && data.count) {
            element.append('<span>' + data.count + '</span>');
        }
    }    
};


var sharedUrl = 'http://www.neowin.net/news/microsofts-new-edge-browser-has-a-password-manager-heres-how-it-works';

$('.tw-tweet').twShareable(sharedUrl);