jQuery ProQuo

Turn any part of your HTML content into “tweetable” quotes.

Download on Github

Basics

jQuery ProQuo is a quick way to encourage your readers to spread your content through twitter. Simply define the regions in your markup that you would like to make “tweetable” and ProQuo will handle the rest.

For example, click the "Tweet this" link in the quote below:

jQuery ProQuo: Turn any part of your content into “tweetable” quotes.
ProQuo will auto truncate tweets that are longer than 140 characters (includes source link length):
Any intelligent fool can make things bigger and more complex... It takes a touch of genius - and a lot of courage to move in the opposite direction. Albert Einstein
And here's the code for the above examples: 
$('blockquote.tweet').proQuo()
Easy right?

By default ProQuo does a few things for you:

  • Automatically determines proper text length and adds ellipsis in the tweet if the text needs to be truncated
  • Includes a link back to the page that the quote was tweeted from (by default).
    Note: Twitter auto-shortens this link so they aren't taking up more than 20 characters even if they appear longer in the tweet window.
  • Adds a “Tweet this” link to the tweetable element
  • Auto-loads the Twitter widgets script if it's not already available on the page.

Customization examples

All of the default behavior is easily customizable. Here are a few more examples with some customization:

Auto-add curly quotes to tweet

jQuery ProQuo helps you spread your content on Twitter
$('blockquote#curly').proQuo({
    addCurlyQuotes: true
});

Use the official twitter button

“Simplicity is the ultimate sophistication.” - Leonardo da Vinci
The code
$('blockquote#davinci').proQuo({
    useTwitterButton: true
});

Working with a custom design

“Do or do not, there is no try.”

Albus Dumbledore
The custom markup
<div id="custom-quote">
    <img src="images/spock.png">
    <blockquote id="custom">
        <div class="arrow-left-border"></div>
        <div class="arrow-left"></div>
        <p>&ldquo;Do or do not, there is no try.&rdquo;</p>
        <small>Albus Dumbledore</small>
        <a href="#" data-placement="below" rel='twipsy' title='Tweet this!'><img src="images/tweet.png"></a>
    </blockquote>
</div>
The code
$("div#custom-quote").proQuo({
    getTweetText: function() {
        // return the quote and the author
        return $(this).find("p").text() + " - " + $(this).find("small").text()
    },
    createTweetLink: function(twitterUrl, linkLabel) {
        // set the link href to the tweet url
        $(this).find("a").attr("href", twitterUrl);
    },
    getTweetSourceUrl: function(callback) { 
        // no source url for this tweet
        callback("");
    }
});

Override the link-back behavior

“Creativity is allowing yourself to make mistakes. Art is knowing which ones to keep.” - Scott Adams 
var adamsURL = "http://en.wikipedia.org/wiki/The_Dilbert_principle";
$('#scott-adams').proQuo({
    getTweetSourceUrl: function(callback) {
        // set tweet source link to the dilbert principle wiki page
        callback(adamsURL);
    }
});

Using a URL shortner

“Creativity is allowing yourself to make mistakes. Art is knowing which ones to keep.” - Scott Adams 
// using https://github.com/gumayunov/jquery-bitly-plugin
var bitly = new $.Bitly({
    login: bitlyLogin,
    key: bitlyKey
})

$("#url-short").proQuo({
    getTweetSourceUrl: function(callback) {
        // this is using the jquery bitly plugin
        bitly.shorten(adamsURL, function(shortUrl){ 
            callback(shortUrl); 
        });
    }
});
Note: if You are testing ProQuo locally the link-back functionality won't show up in the tweet.

Configuration options

Variables

tweetLabel
The label that will be used in the tweet link. Defaults to “Tweet this”.
addCurlyQuotes
If set to true, curly quotes will be wrapped around the tweet text.
updateUrlLengthFromTwitter
If set to true, ProQuo will call the Twitter configuration API to determine the appropriate short URL length (defaults to false). Used to appropriately truncate longer quotes.
useTwitterButton
If set to true, ProQuo will load Twitter's standard sharing buttons.

Function overrides

getTweetSourceUrl(callback)
Returns the link-back URL via the given callback to be included in the tweet. Defaults to callback(window.location.href).
The callback approach here is to allow for things like link shortening or other asynchronous processing.
getTweetText
Returns the text to be tweeted. Defaults to $(this).text()
getTwitterStatus(text, url)
Returns the actual tweet status text. Defaults to the tweet text + the link-back URL. This function is also responsible for truncating the tweet and adding ellipsis if necessary.
getTweetUrl(status, url)
Returns the twitter share url (default to Twitter Intents format)
createTweetLink(twitterUrl, linkLabel)
Returns the link object to be added to the tweetable area. Defaults to $("<a href='#{twitterUrl}'>#{linkLabel}</a>").
Note: If no link object is returned then placeTweetLink is not called.
placeTweetLink($link)
Given the jQuery link object, this function places the link on the page. Defaults to $(this).append("&nbsp;").append($link);