Skip to content

Commit

Permalink
'Say again?' 'We have a T-Rex!'
Browse files Browse the repository at this point in the history
  • Loading branch information
holman committed Feb 13, 2010
0 parents commit 4bc58ca
Show file tree
Hide file tree
Showing 4 changed files with 158 additions and 0 deletions.
42 changes: 42 additions & 0 deletions boastful.css
@@ -0,0 +1,42 @@
.boastful {
display: inline;
}
.boastful img{
margin: 3px;
border: 0;
-webkit-border-top-left-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-bottomright: 7px;
}
.boastful .boastful_pointer{
position: absolute;
z-index: 999;
left: -9999px;
opacity: .7;
display: none;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000;
border-top: 0;
}
.boastful .boastful_tweet{
position: absolute;
z-index: 999;
left: -9999px;
background-color: #222;
opacity: .8;
padding: 5px;
width: 250px;
font-size: 11px;
text-shadow: 1px 1px 0 #000;
color: #eee;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
}
.boastful .boastful_handle{
font-size: 13px;
font-weight: bold;
}
48 changes: 48 additions & 0 deletions jquery.boastful.js
@@ -0,0 +1,48 @@
(function ($) {
$.fn.boastful = function(){
var output = $(this)

function format_tweetback(tweetback) {
formatted = ''
formatted += '<div class="boastful">'
formatted += '<a href="'+tweetback.permalink_url+'">'
formatted += '<img src="'+tweetback.author.photo_url+'" />'
formatted += '</a>'
formatted += '<div class="boastful_pointer"></div>'
formatted += '<div class="boastful_tweet" style="display: none">'
formatted += '<div class="boastful_handle">@'+tweetback.author.url.split('/').pop()+'</div>'
formatted += '<div class="boastful_content">'+tweetback.content+'</div>'
formatted += '</div>'
formatted += '</div>'
return formatted
}

var parse_request = function(data){
$.each(data.response.list, function(i,tweetback){
output.append(format_tweetback(tweetback))
$('.boastful').mouseover(function(){ $(this).children('.boastful_tweet, .boastful_pointer').show() })
$('.boastful').mousemove(function(kmouse){
$(this).children('.boastful_tweet').css({
left:$(this).position().left-105,
top:$(this).position().top+25
})
$(this).children('.boastful_pointer').css({
left:$(this).position().left+18,
top:$(this).position().top+15
})
})
$('.boastful').mouseout(function(){ $(this).children('.boastful_tweet, .boastful_pointer').hide() })
});
}

$.ajax({
url:'http://otter.topsy.com/trackbacks.js',
data:
{url: location.href},
success:parse_request,
dataType:'jsonp'}
);

return this
}
})(jQuery);
11 changes: 11 additions & 0 deletions license.markdown
@@ -0,0 +1,11 @@
Copyright (c) 2009 Zach Holman

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. No attribution is required by products that make use of this software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Except as contained in this notice, the name(s) of the above copyright holders shall not be used in advertising or otherwise to promote the sale, use or other dealings in this Software without prior written authorization.

Contributors to this project agree to grant all rights to the copyright holder of the primary product. Attribution is maintained in the source control history of the product.
57 changes: 57 additions & 0 deletions readme.markdown
@@ -0,0 +1,57 @@
# Boastful is the best tweetback library.
### Lovingly crafted by [Zach Holman](http://zachholman.com). ([@holman](http://twitter.com/holman)).

## So what's a tweetback?

Once upon a time there were [trackbacks](http://en.wikipedia.org/wiki/Trackback). If you wrote a blog post, and I thought it was interesting so I blogged about your blog post, trackbacks were the way for my blog to let your blog know I'm talking about it. Usually, your blog software would then link to mine as a way of telling your own readers "hey, here's some more people talking about this topic".

A few services have started to do the same for Twitter- a "tweetback", if you will. Write your blog post, and then these services would search Twitter for whoever would link or discuss it.

Here's the main problems with that approach:

- **The content usually sucks**. I've seen a lot of systems — Disqus, for one — simply print out the tweet verbatim and try to integrate it into your regular blog comments. This assumes that each and every tweet offers some compelling unique viewpoint. It doesn't. Usually you end up with a bunch of tweetbacks coming in saying "RT @someone RT @someoneelse RT @originaldude Hey a blog post http://example.com".
- **Most only search Twitter**. Twitter search is cool, quick, and painless, but it doesn't offer full archival access, so older tweets might not show up. It's nice to have a full list.
- **URL shorteners are confusing**. You shouldn't just search for your main blog post URL; very few on Twitter actually do the whole thing, since characters are money, people. You'd have to search for every short URL that translates to your main post URL.

Luckily, this tiny jQuery plugin tries to solve all those:

- **Avatars only**. James Cameron's dream: only avatars. The full content is available through a tooltip, but really you shouldn't expect the tweet content to contribute much anyway.
- **Uses Topsy**. [Topsy](http://topsy.com) handles both the archival problem and the URL shortener problem. They crawl Twitter for who's linking to who, translating short URLs to full URLs as they go.

You end up with little heads on the footer of your blog, which acts as nifty encouragement to get others to tweet and promote your content. People love seeing their face.

## Example

I hate readmes without a pretty picture to explain everything. Here's a current snapshot of [the footer](http://zachholman.com/2010/02/the-future-of-itunes/) from [my blog](http://zachholman.com). Feel free to style away, you mad little CSS scientist you.

![boastful screenshot](http://files.droplr.com/files/11322372/oO5q.jquery.boastful.png)

## Installing

1. Rock your jQuery, like:

`<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>`

2. Deviously load up [jquery.boastful](http://github.com/holman/boastful/tree/master/jquery.boastful.js):

`<script type="text/javascript" src="jquery-boastful.js"></script>`

3. Lock and load into your `$(document).ready()`:

`$(document).ready(function() {
$('#boastful').boastful();
});`

4. Tell it where to go:

`<div id="boastful"></div>`

5. Style accordingly. For a starting point, check out [boastful.css](http://github.com/holman/boastful/tree/master/boastful.css).

6. High-five your girlfriend.

## Found an issue?

Fork it and fix it. Or [file an issue](http://github.com/holman/boastful/issues). Or ping me on twitter (I'm [@holman](http://twitter.com/holman)). Or high-five your girlfriend some more.

Thanks for checking out [boastful](http://github.com/holman/boastful); hope you enjoy it!

0 comments on commit 4bc58ca

Please sign in to comment.