JSFiddle - React, Tailwind, and code Playground

by Emanuel Vecchio

HTML

<div class="fb-share">like</div>

CSS

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

.fb-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.fbShareable = function(sharedUrl) {
    var fb_login_url='https://www.facebook.com/login.php?ret=login&display=popup&next=';
    var fb_share_url='https://www.facebook.com/sharer/sharer.php?u=';
    sharedUrl = encodeURIComponent(sharedUrl);
    var element = this;

    // handles click envent on 
    this.on('click', function() {        
        var url = fb_share_url + encodeURIComponent(sharedUrl);
        url = fb_login_url + encodeURIComponent(url);    
        popupwindow(url, "Share on Facebook", 600, 500);    
    });
    
    $.getJSON('https://graph.facebook.com/?id=' + sharedUrl + '&callback=?', onLoadFbGraphJSONP);
    
    function onLoadFbGraphJSONP(data) {
        console.log(data);
        if (data && data.shares) {
            element.append('<span>' + data.shares + '</span>');
        }
    }    
};


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

$('.fb-share').fbShareable(sharedUrl);