JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Shopping Cart</h2>
<ul class="products">
    <li id="product-1">
        Awesome Snacks 
        <a class="sharer" href="http://www.yoursite.com/some/url/to/product-1" data-title="Awesome Snacks on Website!">
            <span class="liketext">Share</span>
        </a>
    </li>
    <li id="product-2">
        Shirts
        <a class="sharer" href="http://www.yoursite.com/some/url/to/product-2" data-title="Shirts on Website!">
            <span class="liketext">Share</span>
        </a>
    </li>
        <li id="product-1">
        Toys
        <a class="sharer" href="http://www.yoursite.com/some/url/to/product-3" data-title="Toys on Website!">
            <span class="liketext">Share</span>
        </a>    
    </li>
</ul>

CSS

.sharer {
    background-color: #ECEEF5;
    border: 1px solid #CAD4E7;
    border-radius: 3px 3px 3px 3px;
    padding: 2px 4px;
    font-size: 11px;
    text-decoration: none;
    font-family: "lucida grande",sans-serif;
    font-weig

}

.sharer .liketext {
    background: url("http://static.ak.fbcdn.net/rsrc.php/v1/z7/r/ql9vukDCc4R.png") no-repeat scroll -1px -48px transparent;
    color: #3B5998;
    padding-left: 17px;
    white-space: nowrap;
}

JavaScript

$('.sharer').click(function(e) {
    e.preventDefault();
    
    var title = $(this).data('title');
    var url = $(this).attr('href');    
    var fbSharerUrl = 'http://www.facebook.com/sharer.php?';
    var params = {
        u: url,
        t: title
    };
    var fbSharerConfig = 'toolbar=0,status=0,width=600,height=400';
    
    window.open(fbSharerUrl + $.param(params), 'sharer', fbSharerConfig);
});