init 7
ready to go beyond?
Subscribe to RSS Feeda blog about linux, opensource software, web and technology in general
Clickable links in Twitter html/js badge
In standard Twitter badges, web addresses you write in your posts are not clickable and you need to copy and paste the link in the address bar to visit them. I partly modified the Twitter html/js badge javascript code to automatically recognize the http addresses and change them to proper links.
If you want to use it, you only need to change the code of your html badger, substituting “http://twitter.com/javascripts/blogger.js” in “http://www.soccio.it/code/twitter/blogger.js“.
If you want you can also download the file and place it in another place, or just copy the code and insert it inside your html code.
Magnificent Update!
Alan Hogan made an excellent work on the original script solving a bug and also making the @user clickable as well! Now everytime you address a twit to another user, the script will automatically insert a link to the addressed user twitter page. A great applause to Alan!
The old script has been updated: if you hot-linked it, you won’t need to change anything and it will start working automatically. Otherwise download it again.
Small Update [23 August 2008]
As asked by Jimmy in a comment, the script has been modified to handle links which are written without the classic http://. Now the script also recognizes addresses starting by www. So if you post an address remember to write the www at the beginning (unless there is already a http or other protocols prefix).
This is a quick and dirty edit maybe could be improved. if you hot-linked it, you won’t need to change anything and it will start working automatically. Otherwise download it again.
License [25 October 2008]
Alan and I were asked about the license. We decided the better license for this snippet is the BSD License. This means you can modify and distribute this code in both source and binary form, as long as you keep the copyright notice. A copy of the license is available as standalone file and is also included in the blogger.js file itself.
![[del.icio.us]](http://images.del.icio.us/static/img/delicious.small.gif){kind=small}
38 Responses to “Clickable links in Twitter html/js badge”
Leave a Reply
init 7 by
Michele C. Soccio is licensed under a
Creative Commons Attribuzione-Non commerciale-Condividi allo stesso modo 2.5 Italia License
Thanks very much for sharing this script! I’ve got it hosted on Google Pages and it’s working for me on my blog!
I *do* have a question through — would you know how to enhance the script so that links that appear in the middle of the tweet (rather than at the end) are correctly closed?
For example, when I send a tweet like this:
“Have you seen http://site.com after the redesign?”
… the link starts correctly at http://site.com but extends all the way to the end of the text. It doesn’t use the space after the URL string to close the anchor tag.
Thanks again.
I will try to work on it, but I cannot promise it could be ready shortly.
this is great, thanks!
Because I’m the best, I figured out how to fix the bug mentioned above, and also how to add “@reply” handling.
Change twitterCallback2 to this:
function twitterCallback2(obj) {
var regular = /(https?\:\/\/[^"\s\]*[^.,;'">\:\s\\)\]\!])/g;
var atregular = /\B@([_a-z0-9]+)/ig;
var twitters = obj;
var statusHTML = “”;
var username = “”;
for (var i=0; i<twitters.length; i++){
var posttext = “”;
var addresses = new Array(regular.exec(twitters[i].text));
posttext = twitters[i].text.replace(regular, ‘$1‘);
posttext = posttext.replace(atregular, ‘@$1‘);
username = twitters[i].user.screen_name
statusHTML += (”+posttext+’ ‘+relative_time(twitters[i].created_at)+’‘)
}
document.getElementById(‘twitter_update_list’).innerHTML = statusHTML;
}
Or because it got a bit mangled, you may copy and host my version:
http://asusoda.com/js/soccio-twitter-blogger.js
PLEASE DO NOT HOTLINK IT
I have limited bandwidth! Put the code on your own website!
Also I may change the URL in the future, which would break your site.
Last note – @username becomes a link to twitter.com/username. It does NOT match foo@bar.com (email addresses), just twitter!
Alan, you ARE the best. Thanks for this tweak – I’ve been waiting and waiting for Twitter to do it themselves. Now, if only I can find a way to hack the flash badge as well…
Alan–you really are the best! Congrats!
Great work. I just added it to my site (powered by b2evolution) and it works like a charm.
Thanks a lot.
Edgar.
How do you make the links open in a new windw?
@Butch Deadlift
In the blogger.js file, you can change all the
with
This should easily work. Of course you can change only some of the links to open in a new window: it’s your choice.
Actually I don’t really like those kind of links, since using the mouse middle button, or the CTRL+Click, I could open any link in a new page or in a new tab: I prefer to be the one who decides where to open links.
Thanks michele!
You guys rock!! Thank you SO much!
[...] make links in tweets clickable. After a bit of head scratching and searching around, I found that soccio.it has managed to re-write the original Twitter blogger.js javascript file to make both http:// links [...]
Very helpful, thank you.
One suggestion though – it would be awesome if it would also link URLs lacking the “http://”. I use twitter as a micro blog and update via my cell phone, so being able to save seven keystrokes would be great.
[...] just made a small update to the twitter script hosted on this website. For further details read the original [...]
This is great! I have been unhappy with Twitters HTML badge and wanted to change things but never knew how.
I made a couple changes to the JS file. I made the time that the tweet was posted on it’s own line after the tweet (makes it more clean to me) and I added a couple ‘s after each post to give them room.
I want to try and add a bullet, but the bullet I use throughout the rest of my blog does not work in the JS code. It appears as a ?. On my blog, the bullet I want to use is under my PREVIOUS POSTS on the sidebar (or this: ●)
If anyone knows how to add this bullet, ●, into the JS code before each tweet, that would be awesome.
BUT, I love the way it looks now with the extra line breaks compared to the standard twitter version….THANK YOU ALL WHO WORKED ON THIS!
Dear Patrick,
all the appeareance stuff could be managed by using CSS without touching the JS code.
Insert the twitter badge inside a div (you can specify a class or an id for it) and then use the proper CSS selector.
For example, you can insert the Twitter Badge inside the “twitter” class div like this:
<div id="twitter">
twitter badge code here
</div>
and in your CSS code
#twitter li {
CSS code here
}
Michele,
Yes, I could do that…but none of that made sense to me
I am very CSS illiterate. No qualms though. I think I like how it looks without bullets; it just irked me that I couldn’t put a bullet into the JS.
Thank you though.
Dear Patrick,
you can start by having a look at the code of your blog: you are already use the code you need for other divs (e.g. “sidebar”). I think you can easily get what you want by some copy & paste.
Tnx for this little great app! What if I would like to exclude “@” tweets from my badge?
Tnx for any help … regards!
Alessio, just open the file (you need to download and to host it on your website) and comment the following line:
posttext = posttext.replace(atregular, '@<a href="http://twitter.com/$1">$1</a>');
Hi!,
Good day!,
Hello!,
[...] Fortunately, others made the simple changes required to get the badge to display hyperlinked URLs. I’m using Alan Hogan’s version, which is a slightly modified version of Michele’s changes. [...]
This is amazing—just wanted you to know! Thanks!
Thanks so much for this, it works like a charm!
works like a charm… gunna download it.
hi michelle-great code! quick question- does your version also display all @replies directed to me in addition to my updates? if not, how could i do that so that both show up?
also, being pretty html illiterate how would i “host” or copy this code directly into the html code offered by twitter (other than removing the link to the .js obviously)? Thanks!
Can you make the permissions clear about redistributing this code? Can it be put into a commercial application for instance? We’d like to adapt it if at all possible….
@rpber
since this script gets the lines from your account it is not so easy to make it display also the answers you get.
I will try to modify it, but I cannot promise anything.
@Dan Wood,
I contacted the other author of the script. I will contact you again after we decide. Thanks for your interest.
this is indeed an EXCELLENT post! it proved to be very helpful as i learnt how to customize the look and feel of my twitter feed. i thank you.
however, while i was playing around with it. i noticed you havent added any functionalities to detect hash tags.
figured it wasnt much different from the @ tags, so ive added in these two lines which allows for a search on any hash tag found.
var hashregular = /\B#([_a-z0-9]+)/ig;
posttext = posttext.replace(hashregular, ‘#$1‘);
now its perfect!
sorry, forgot the code tags
var hashregular = /\B#([_a-z0-9]+)/ig;
posttext = posttext.replace(hashregular, '#$1');
enjoy!
I am trying to remove all @ tweets from my twitter blog. I followed what you told Allesio to do on August 25th, but It just removed the linking function. Do you know of a way to make the whole @tweet disappear from my badge? BTW thankyou for your information
Has anybody found a way to alternate the color of the list items?
@jameez, I added the # trick. Beautiful.
Thanks for this code!!…
BTW @Alan link : http://asusoda.com/js/soccio-twitter-blogger.js
is broken….Please fix it.