eddorre

Found 3 posts tagged with 'twitter'

Canonical URLs

Tuesday April 14, 2009 02:09 | comment icon 2 Comments

Canonical URLs are all the rage on the Internet nowadays. All one has to do is do a Twitter search for canonical to see the conversations going on.

The problem is this, micro-blogging services such as Twitter only allow a certain number of characters, so a URL like this http://eddorre.com/posts/buildin-the-blog-part-5-refactoring-part-2, is too long. This is where URL shorteners like tinyurl.com come in.

They take a long, but perfectly fine URL, and make it something like this: http://tinyurl.com/Hukjfd (this is an example – not a real link). This is much more useful on Twitter where character space is at a premium. However this has its own problems, one is trust. How can you trust tinyurl.com to actually be delivering you to a URL that you would even want to visit? Short answer, you don’t. Also, what happens if tinyurl.com goes away one day? Any search on Twitter that uses these links immediately becomes less valuable. It’s the opinion of some on the Internet, that a site should take care of its own short urls.

For example, the link http://eddorre.com/posts/buildin-the-blog-part-5-refactoring-part-2, could become http://eddorre.com/s/SQ2BAs. Notice that the domain remains the same and short url is under my control. If the link goes away it’s MY fault not someone else’s. I have a vested interest in making sure that the link doesn’t go away. It doesn’t solve the trust issue, but at least you know that it’s a link coming from eddorre.com instead of anywhere on the Internet.

Enter the debate about canonical URLs and rev=canonical. The theory behind rev=canonical is simple. When I include a link like this: http://eddorre.com/posts/buildin-the-blog-part-5-refactoring-part-2 in Twitter or a similar website, they will then load up the original link and look inside the HTML for markup that looks like this:


<link rev="canonical" href="http://eddorre.com/s/SQ2BAs" />

When Twitter or a similar service finds this tag, they should then replace the long link with the short one. It makes sense but this does have one drawback that will most likely kill its adoption. It’s expensive. Twitter, for every link that is posted, has to connect to the URL, parse the HTML and then return a new link if it supports canonical URLs.

With that in mind, there is a proposed new HTTP header for canonical URLs that a web server could return to a service like Twitter. Something like “X-Rev-Canonical: href=”http://eddorre.com/s/SQ2BAs". This way, Twitter or other services just have to do a GET request to the original URL and it would just return them the short URL. No downloading and parsing the HTML. Whether either of these methods becomes widely adopted remains to be seen.

This past Saturday, after reading comments in Twitter and blogs about short urls, I decided to try coding up my own system for my blog. Turns out it only took me about 15 minutes to code something in Ruby/Rails.

Here is how I did it.

  • I created a migration to my posts table to include a short_url column
  • Created a before_create callback method in my post model to create a short_url.
  • The creation of the short_url is done by randomly mixing 6 characters from the characters available in Base 62 encoding (meaning: 0-9, A-Z and a-z).
  • To create short_urls for all of my older blog posts, I just created a migration that looped through all of the blog posts and generated this random token string for all of those and saved them.

I create a named route similar to the following:


map.short_url "/s/:short_url", :controller => 'posts', :action => 'show'                                   

Next, in my controller I did something similar to this:


    if params[:short_url]
      @post = Post.find_by_short_url(params[:short_url])
      redirect_to post_path(@post), :status => :moved_permanently and return
    else
      @post = Post.find_by_permalink(params[:id])
    end

There you have it. Something quick and dirty in about 15 minutes. Now if I want to post links to my blog on Twitter, I can use my own short url instead of using a service like tinyurl.

I should note that this probably isn’t the best way of doing things and it’s most certainly not the only way, but for a quick hack project on a Saturday afternoon, it fit the bill.

I forgot to mention that the inspiration for this post was Duncan Davidson’s post Everybody Wants Short Links.

Loading Twitter Badge

Saturday August 30, 2008 02:30 | comment icon 0 Comments

I’ve recently become a Twitter user and I’m starting to use the service on a more regular basis. Considering how much I’m using the service now, I wanted to integrate some of the messages posted there onto my blog.

The folks at Twitter have 3 badges for use with custom made blogging engines. The first two are Flash based and I ruled those out quickly. The third was based on HTML and Javascript. This option gives me the most flexibility as far as configuration was concerned so I chose to go that route.

The process of getting the Twitter badge/updates to render on my site is fairly simple. Include some HTML and the following Javascript files:


<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" 
src="http://twitter.com/statuses/user_timeline/eddorre.json?callback=twitterCallback2&amp;count=5">
</script>

Usually Javascript files are loaded from the HEAD section of an HTML file, but the Twitter page specifically suggests to move the Javascript lines to the bottom of the page. The rationale behind this is simple; if Twitter is down and the their Javascript files are in the HEAD section then your page won’t load! In theory, by moving the Javascript lines to the bottom of the page they will be activated last after your page has already loaded.

Unfortunately, different browsers render Javascript and the DOM differently and there is no guarantee that a failure of the Twitter service will result in your page loading. The solution is to wait until the DOM is fully loaded before including or calling those Javascript files.

With any modern Javascript library such as Prototype (it’s what I use), jQuery, YUI, etc., it’s simple to interrogate the DOM to find out if it’s been loaded or not. The solution that I wanted was to display a “loading” graphic while the Twitter updates were loading and once they were finished, then the “loading” graphic would disappear; a standard ajax-y interface.

My solution was to render the “loading” graphic, wait until the DOM was loaded and then append the Javascript to the end of the BODY element.

Here is my implementation:


//Wait for DOM to fully load
Event.observe(window, 'load', function () {
	loadTwitterJSFiles("http://twitter.com/javascripts/blogger.js");
        	loadTwitterJSFiles("http://twitter.com/statuses/user_timeline/eddorre.json?callback=twitterCallback2&count=5");

//Hide twitter_spinner div
$('twitter_spinner').hide();
});

function loadTwitterJSFiles(url) {
      var urlRef = document.createElement('script');
      urlRef.type = "text/javascript";
      urlRef.src = url;

      if (typeof urlRef != "undefined")
          document.body.appendChild(urlRef);
};

There were a couple of adjustments that I had to make in order for it to work right. First off, notice the second Javascript line that Twitter gives you. In it, it refers to & where my code just has the & symbol. I had to make this change because I noticed when using the appendChild method it would insert a double & and therefore breaking the URL.

The second thing that I had to modify was the original DOM checking mechanism. In the Prototype documentation it says that you can observe the DOM loading by the following:


document.observe("dom:loaded", function () {
Your code here
});

This never worked out for me as it would never display the “loading” graphic even while getting the updates from Twitter was slow. I’m not sure if it hid it immediately or not, but I changed it to the code above that waits for the “window” to load and it’s worked out for me.

So that’s it. This works in IE7, Safari 3, and Firefox 3.

Say It Isn't So

Wednesday June 11, 2008 23:21 | comment icon 2 Comments

Like many, when I first heard of the concept of Twitter, I was skeptical about the merits of the service. Ok, ok it’s more on the side of violently opposed than skeptical. I mean, we could already read the details of people’s lives on blogs, did we need more intimate up-to-the-minute updates in between blog posts? Is our attention span so diminished that we can only take the time to read information in 140 character chunks?

I could just imagine the monotonous minutiae that people would be “tweeting” about. I could literally imagine someone becoming a Twitter Shitter.

Then something happened that would change my mind completely. I started attending geek/tech social events in and around Portland and I met a ton of cool people most of which use Twitter in some fashion or another. After a while I observed that the community and the conversation that was held in person would continue and/or morph into a conversation in the Twitter-verse. So I created an account and started following people that I was getting to know at these meet-ups.

Ever since then Twitter has become increasingly useful. I think that I found it most useful at the wonderful WebVisions conference in Portland. Beyond the usefulness at conferences (where it first gained an absurd amount of popularity), I’ve discovered new TV shows via Twitter, learned about new local events, and I’ve even reduced my digg reading by a measurable amount. No reason to drink from the fire hose of news when your friends tweet about the stuff that you care about. It’s like a built in news filter.

It’s easy to get carried away with Twitter and follow thousands of people that you’ll never meet and you’ll never have a connection with (not that there is anything wrong with that). Honestly I’m not sure how one would keep up with all of the updates if that’s the route that you chose. For me, I’m starting small. Just following a select number of people here and there and increase when I feel like I have an attention surplus.

For those of you that are so inclined you can read my updates and follow me at http://twitter.com/eddorre.

end kanji