JSFiddle - React, Tailwind, and code Playground

by Adam Azad

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<a class="fsl fsl-facebook" href="#" id="facebook-share">
                        <span class="fa-facebook fa-icons fa-lg"></span>
                        <span class="sc-label">Share on Facebook</span>
</a>

<div id="fb-root"></div>

CSS

* {
    margin: 0px;
    padding: 0px;
    text-decoration:none;
}
body {
    background:rgb(249, 249, 249);
    font-family:"Lato", Calibri, Arial, sans-serif;
}
.fsl {
    display: table;
    margin:40px auto;
    padding: 6px;
    border-radius: 2px;
    opacity: 0.6;
}
.fsl-facebook {
    background:#14A0E9;
}
.fsl span {
    color: #FFF;
}
.fa-icons {
    font-family: FontAwesome;
    font-size: 20px;
    color: #FFF;
}
.fsl:hover {
    opacity: 1;
}

JavaScript

window.fbAsyncInit = function () {
    FB.init({
        appId: '553435274702353',
        status: false,
        xfbml: false,
        logging: false
    });
};

$('#facebook-share').click(function (e) {
    e.preventDefault();
    FB.ui({

        method: 'feed', // feed method! 
        name: 'Retrogram', // overwrites "og:title"
        link: 'https://www.facebook.com/Retrogram', // required param
        picture: 'http://i.imgur.com/SKwsQM2.png?1', // overwrites "og:image"
        caption: 'My caption', // overwrite caption
        description: 'My description' // overwrites "og:description"

    });
});

// Load JS-SDK               
(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {
        return;
    }
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));