JSFiddle - React, Tailwind, and code Playground

by Uday Hiwarale

HTML

<p class="ssc" site="fb">fb : <span class="count"></span></p>
<p class="ssc" site="tw">tw : <span class="count"></span></p>
<p class="ssc" site="li">li : <span class="count"></span></p>

JavaScript

//Load jquery before
$.fn.ssc = function(url){
    return this.each(function(){
        var $this = $(this);
        var site = $this.attr('site');
        var api_url;
        var count_container;
        
        if(site == 'fb'){
            api_url = 'http://graph.facebook.com/?id=' + url;
            count_container = 'shares';
        }
        else if(site == 'tw'){
            api_url = 'http://cdn.api.twitter.com/1/urls/count.json?url=' + url;
            count_container = 'count';
        }
        else if(site == 'li'){
            api_url = 'http://www.linkedin.com/countserv/count/share?url=' + url;
            count_container = 'count';
        }
        else{
             console.log('This site is not valid.');
        }
        
        //Get counts
        $.ajax({
            url : api_url,
            dataType: "jsonp",
            type : 'GET',
            success : function(data){
                $this.find('.count').text(data[count_container]);
            }
        });
        
        //Open Popup
        var left = (screen.width / 2) - (600 / 2);
        var top = (screen.height / 2) - (350 / 2);
        var share_url;
        $this.click(function (){
            if (site == 'fb'){
                shareUrl = 'https://www.facebook.com/sharer/sharer.php?u=' + url;
            } else if (site == 'tw'){
                shareUrl = 'https://twitter.com/home?status=' + url;
            } else if (site == 'li'){
                shareUrl = 'https://www.linkedin.com/shareArticle?url=' + url;
            }

            window.open(shareUrl, 'FrameInn Share', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + 600 + ', height=' + 350 + ', top=' + top + ', left=' + left);
        });
    });
};

$('.ssc').ssc('https://www.frameinn.com');