SweetTweets — A Plugin for Anything (Including Mango)
What a whirlwind evening. This afternoon, Rey Bango tweeted about something called "tweetbacks," and had previously written about how you can add them to your blog.
Tweetbacks are like "trackbacks" (which, if you're unfamiliar with those, is when you display a list of links — usually other blog posts — that link to the current post), except instead of being blog posts, they are tweets. See it in action just above the comment form on this very post!
I added them here on my blog; and while I was impressed with the idea and simplicity of adding it (a single line of JavaScript), it was un-acceptably slow. For starters, it was a dynamic JS file hosted on someone else's server (ugh), but it also took several seconds — sometimes as many as 10 — to do its thinking and let the page finish loading. Unacceptable!
So I set about writing my own version in CFML to run locally. What I came out with, several frantic hours later, is SweetTweets. (I still haven't eaten dinner. This is more fun.)
Well, really, I came out with SweetTweets — a Mango plugin — and SweetTweetsCFC, a drop-in CFML replacement for the JavaScript version from Dan Zarella.
It works by looking up the shortened URL for your blog entries from several of the shortening services (is.gd, tinyurl.com, hex.io, bit.ly, and snurl.com) and then using the Twitter Search API to find references to any of those URLs. The shortened versions of the URLs are cached semi-permanently (in Application scope), and the results from twitter searches are cached for 5 minutes, so that you don't overload them if you get lots of traffic or constant refreshing.
Bit.ly and Snurl.com require API keys to do url shortening, so you may want to register with those two sites (both optional) — I'll cover this in a little bit more depth in the instructions below.
I have to give a pair of hat tips to Nathan Mische and Andy Matthews, for their respective projects JSONUtil and shrinkURL, which saved me a lot of time in putting this together.
Due to some heavy use of implicit structure notation, both projects currently require ColdFusion 8. Not to fret, I've already set to work in converting them to work in CF7!
Implementing SweetTweets Mango Plugin
Unfortunately, there are no built-in events that I wanted to piggy-back on. I was almost satisfied with the placement when using the end-of-post-body event, but that would trigger it on the index and archives pages as well, several times a page, which I didn't want; and the placement wasn't exactly where I wanted it. So in the end, I decided to use a custom event name.
What this means for you is that installation is a 4-step process:
- Unzip plugin into place (/components/plugins/user/SweetTweets)
- Activate it in the admin console
- Configure its settings (either go to settings -> SweetTweets, or click the "configure it now" link after activating)
- This is where you'll enter your Bit.ly and Snurl.com API credentials, if you want to use those services.
- The other setting here is the tweet limit, which defaults to 100. This is the maximum number of tweets to display for a given post.
- Add a line of code (below) to your skin wherever you want the tweetbacks to be displayed. (Preferrably on the single-post/single-page template, but hey, that's your call.)
I'm happy to help you over IM, Twitter, or Email if you have any trouble with this.
Implementing SweetTweetsCFC on your Blog/etc
As I said above, you can implement SweetTweetsCFC in a single line of CFML. It does take a little chaining, and it's a little bit of a long line, but it's pretty simple, and technically it's a single line:
Note that all 4 arguments of the init function are optional, and if either of the first two is left blank Bit.ly will not be used, and if either of the last two are left blank… you guessed it… Snurl.com will not be used. If you're not using any of them, you can just do init(), you don't have to do init('','','','').
Lastly, you need to pass in the actual current URL of the blog post / page, and you can optionally set the tweet limit as the 2nd argument to the getTweetbacksHTML function. I hope you're capable of figuring out what your current URL is and plugging that in, but again, if you get stuck, I'm happy to help you over IM, Twitter, or Email.
Posted in Mango | My projects | 13 Responses
For example, if you create a link on bitly while logged in to your account, when I come to generate a link for looking up on Twitter, via my API key, it will be a different link. Try it: shorten a link when logged in, then shorten the same link while not logged in.
This problem also exists, but to a lesser extent, with those services that allow you to customise what the short link will be.
The reason it's all worked in your tests is that at the original shortening, and the shortening performed by the plugin, you're using the same API key, which will produce the same link every time...
1. Change "1 Tweetbacks" to "1 Tweetback"
2. Any reason why you'd cache in the Application scope rather than in the plugin cfc? In my testing I had to write a separate page to clear the cached info, rather than just clear the Mango cache
3. What is the purpose of <a name="tweetbacks"></a> ? If you want to jump to a place on the page, the surrounding div with id="tweetbacks" serves the same purpose.
Good work, though!
For the same reason, I'll probably remove bitly and snurl, as it's a waste of server time to lookup their short urls if nobody else will be generating the same short url.
Caching has been revamped for the next version, with application scope still available for the drop-in solution (for non-mango users) and locally in the plugin for Mango users. (And caching read speed has been drastically improved!)
I also removed the anchor tag w/ name="tweetbacks" in the next version; you're right, it's not needed.
As for the bitly API using login name instead of email (the point is moot if the service is being removed, but for what it's worth...) I'm using shrinkURL.cfc, which uses the email address to access the API. I filed a bug against the project to be updated to use login instead of email, so hopefully Andy will take care of that to future-proof his project.
I did a couple of things a little differently. I have an optional parameter for the cache timeout in minutes, and when the search limit is exceeded, I display "Displaying first #X# tweets" next to the search result number and a link to the search page to "Display all results".
I will probably replace it with your next version, as my BlogCFC host is still CF7, but if anyone wants one that just supports TinyURL and works with CF7 (and probably CFMX!), then drop me a note @robachan.
But I did discover while doing my tests that bitly also delivers different results depending on whether you log in with email or username (both work, though).
All in all, I've rather gone of bitly and am now using is.gd for all my shortening needs!
I understand the Mango side of it, but not sure exactly what I need to do to configure the API / twitter stuff.
Thanks Adam for the explanation.