Last active
July 9, 2016 12:01
-
-
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/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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