JSFiddle - React, Tailwind, and code Playground
by Todd Levy
HTML
<body>
<div class="social_share">
<a href="https://twitter.com/intent/tweet" data-longurl="http%3A%2F%2Fwww.md.com" class="twitter">Tweet</a>
</div>
</body>JavaScript
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
(function($) {
// DEFINE THE TWEET BUTTON PLUGIN
$.fn.tweetButtonV2 = function() {
this.each(function() {
var that = this;
$(that).unbind('click').on('click', function (event) {
event.preventDefault();
// GET LONG URL FROM DATA-LONGURL ATTRIBUTE
// ATTRIBUTE VALUE SHOULD BE URL ENCODED
var long_url_enc = $(that).data('longurl');
// GET PAGE TITLE FROM TITLE TAG
var page_title = $('title').text();
var page_title_enc = encodeURIComponent(page_title);
// GET PAGE META DESCRIPTION
var page_meta = $('meta[name=description]').attr("content");
var page_meta_enc = encodeURIComponent(page_meta);
if($(that).attr('data-twitterurl')) {
window.open($(that).attr('data-twitterurl'), 'twitter', 'width=800,height=500');
} else {
$.post('https://www.mdsld.com/md_api/bitly/user/link_save', {long_url: long_url_enc, title: page_title_enc, description: page_meta_enc}, function(obj){
if(obj.status == 'success') {
var short_url_enc = obj.url;
var twitter_text = page_title_enc + '%20::%20';
// FORMAT TWITTER ENDPOINT
var twitter_endpoint = 'https://twitter.com/intent/tweet?via=md_dotcom&text='+twitter_text+'&url='+short_url_enc;
// UPDATE LINK URL TO NEW ENDPOINT
$(that).attr('data-twitterurl', twitter_endpoint);
window.open(twitter_endpoint, 'twitter', 'width=800,height=500');
}
}, 'json');
}
});
});
return this; //...