Skip to content

Instantly share code, notes, and snippets.

@zoerooney
Last active July 9, 2016 12:01
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save zoerooney/755226cc8271f468037e to your computer and use it in GitHub Desktop.
Save zoerooney/755226cc8271f468037e to your computer and use it in GitHub Desktop.
Code to add inline click-to-tweet links in WordPress while using the text editor. Full tutorial here: http://zoerooney.com/blog/tutorials/inline-click-to-tweet-functionality/
function add_tweet_quicktag(){ ?>
<script>
// create a new quicktag button labeled "tweet"
QTags.addButton( 'quicktweet', 'tweet', selection_callback );
// on click, it triggers this callback:
function selection_callback(e, c, ed) {
// we want to grab the selected text and we're going to get a URL as well
var selection, postURL, t = this;
if ( ed.canvas.selectionStart !== ed.canvas.selectionEnd ) {
// if there's selected text, grab it
selection = ed.canvas.value.substring (ed.canvas.selectionStart, ed.canvas.selectionEnd);
// trigger the prompt for URL
postURL = prompt('Enter URL to include in Tweet');
// if there's no URL that's ok, it'll just be blank
if ( postURL === null ) return;
// generate the tag that will go before the selection
// include the selected text and the URL, if one was given
t.tagStart = '<span class="twitterHighlight" data-tweet="' + selection + '" data-shorturl="' + postURL + '">';
// generate the tag that will go after the selection
t.tagEnd = '</span>';
} else {
// if there's no selected text, show an alert message
alert('Please select the text you\'d like to tweet');
return false;
}
QTags.TagButton.prototype.callback.call(t, e, c, ed);
};
</script>
<?php
} // end the function
add_action( 'admin_print_footer_scripts', 'add_tweet_quicktag' );
(function() {
// This first block generates the link markup from the data attributes
// This is very heavily influenced by code from https://github.com/tevko/WP-Tweetable-Text
var wpt = window.wpt = window.wpt || {};
wpt.TweetHighlight = {
init: function() {
var s = this.settings;
// this next bit loops through each ".twitterHighlight" selector,
// so that they each get the link markup with their own data
Array.prototype.forEach.call(document.querySelectorAll('.twitterHighlight'), function(el, i){
var thisEl = el, // this is grabbing the current span element
content = thisEl.textContent, // for this element, grab the text within
tweet = thisEl.getAttribute('data-tweet'), // also grab the data-tweet content
postURL = thisEl.getAttribute('data-shorturl'), // and the URL
filteredTweet = encodeURIComponent(tweet), // encode the tweet for URL use
filteredURL = encodeURIComponent(postURL), // encode the URL
// the next line creates the markup for the link
// note that it's adding the Twitter icon from Font Awesome http://fortawesome.github.io/Font-Awesome/
template = '<a target=_blank href="http://twitter.com/share?text=' + filteredTweet + '&via=zoe_rooney&url=' + filteredURL + '">' + content + ' <i class="fa fa-twitter"></i></a>',
// the next line actually generates the markup on the selected element
link = thisEl.innerHTML = template;
});
}
};
wpt.TweetHighlight.init();
})();
jQuery(document).ready(function($){
// This block handles the click action on those generated links
$('.twitterHighlight a').click(function(e){
e.preventDefault; // first, don't do the default link action
var link = $(this).attr('href'); // get the link href attribute (the URL)
popup = window.open(
// pop open a little window with that link
link, 'tweet', 'height=450, width=750'
);
popup.focus(); // put the focuson that window so user can send the tweet
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment