Create custom "Share on Twitter" and "Share on Facebook" buttons

content.html

<a class="js-share-button" target="_blank" data-button-name="Twitter" href="http://twitter.com/home?status=I%27m%20tweet%20content%20that%20ideally%20should%20be%20encoded">Share on Twitter</a>
<a class="js-share-button" target="_blank" data-button-name="Facebook" href="http://facebook.com/sharer.php?u=http%3A%2F%2Fwww.example.com">Share on Facebook</a>

<!-- set more Facebook info in the OG tags -->

twitter-share.js

// assumes presence of jQuery/Zepto

(function() {
    
    $('.js-share-button').on('click', function(e) {
        e.preventDefault();

        var width      = 575,
            height     = 400,
            $window    = $(window),
            left       = ($window.width()  - width)  / 2,
            top        = ($window.height() - height) / 2,
            url        = this.href,
            buttonName = this.getAttribute("button-name"),
            opts       = 'status=1' +
                         ',width='  + width  +
                         ',height=' + height +
                         ',top='    + top    +
                         ',left='   + left;

        window.open(url, buttonName, opts);
      });

}());