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"));


// IMMEDIATELY INVOKED FUNCTIONS
(function($) {
 	// DEFINE THE TWEET BUTTON PLUGIN
	$.fn.tweetButton = function() {
	      
		this.each(function() {
		        
			var that = this;
				          
			$(that).unbind('click').on('click', function (event) {
			      
				// 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);

				// RETRIEVE ENCODED SHORT URL FROM PLUGIN FUNCTION
				var short_url_enc = getBitlyURL(long_url_enc, page_title_enc, page_meta_enc);
				
				// FORMAT TWITTER TEXT  
				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).prop('href', twitter_endpoint);                            
			
			});   	
			        
			        
			function getBitlyURL(long_url_enc, page_title_enc, page_meta_enc){     
				 
				// RETURN RESULT FROM AJAX CALL
				// DEFAULT TO LONG_URL ON AJAX ERROR
				var bitly_ajax_result = 'http://j.mp/14uClg'
				return bitly_ajax_result;   
				               
			}	          
	          
	          
		});	
	      
		return this; // CHAINABLE	
	      
	} // END $.fn.tweetButton    
        
       ...