JSFiddle - React, Tailwind, and code Playground

by Emanuel Vecchio

HTML

<div class="in-share" data-title="Data Title">linkedin</div>

CSS

.in-share {
    text-transform: uppercase;
}

.in-share 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.inShareable = function(sharedUrl) {
   
    var in_share_url='https://www.linkedin.com/shareArticle?mini=true&url=';
    sharedUrl = encodeURIComponent(sharedUrl);
    var title = this.data('title');
    
    var element = this;

    // handles click envent on 
    this.on('click', function() {        
        var url = in_share_url + sharedUrl;
        url += '&title=' + encodeURIComponent(title);
        popupwindow(url, "Share on LinkedIn", 600, 500);    
    });
    
    $.getJSON('http://www.linkedin.com/countserv/count/share?url=' + sharedUrl + '&callback=?', onLoadInGraphJSONP);
    
    function onLoadInGraphJSONP(data) {
        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';

$('.in-share').inShareable(sharedUrl);