Social networking is big. Twitter and Facebook are taking over their respective social niches in awe inspiring volume and speed. I’ve seen a fair amount of copy cat websites as well but they kind of fade away in the shadow of the well established giants. With this trend in mind and in the spirit of keeping web design and seo techniques up to date here is a little twitter widget you can add to your website or offer as a add on to a clients website.
This Twitter widget uses the powerful JavaScript library jQuery. JavaScript libraries are very cool because all the messy stuff is done and all you have to do is call functions. One of the nice things about jQuery is that Google keeps all versions posted and available for you to link to saving you from keeping track of the script and FTPing it around every time you need it. Instead you just call it from the Google API directory. You can even make a call to “recent” so you will always get the most recent release. Keep in mind though that this isn’t always the best way to go because the function you are calling could have been changed or improved in a way that makes your script break.
Here are the sections of code you will need.
The Styles go in the head of the web document, that is, somewhere after <head> and before </head>
<style type="text/css">
body {
background-color: #FFF;
font-family: 'Trebuchet MS',Helvetica,Verdana,Arial,sans-serif;
font-size: 85%;
}
#tweet {
border: 2px solid #666;
width: 20em;
}
#tweet p {
margin: 0;
padding: 0.5em;
}
#tweet p.odd {
background-color: #ddd;
}
</style>
Next would be the call to jQuery which also goes in the head.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
Next, in the body, you make a div with an id=”tweet”
<div id="tweet"> </div>
And also in the body, we’ll need our JavaScript that puts it all together
<script>
$(document).ready(function(){
var tweeturl = "http://twitter.com/status/user_timeline/yourtwitterid.json?count=5&callback=?";
$.getJSON(tweeturl, function(data){
$.each(data, function(i, item) {
var txt = item.text
.replace(/(https?://[-a-z0-9._~:/?#@!$&'()*+,;=%]+)/ig,'<a href="$1">$1</a>')
.replace(/@+([_A-Za-z0-9-]+)/ig, '<a href="http://twitter.com/$1">@$1</a>')
.replace(/#+([_A-Za-z0-9-]+)/ig, '<a href="http://search.twitter.com/search?q=$1">#$1</a>');
$('<p></p>').addClass(i%2 ? 'even' : 'odd').html(txt).prependTo('#tweet');
});
});
});
</script>
Replace “yourtwitterid” with… your twitter id. Tweak the styles and put it somewhere on your website.
———————
Thanks to N.Kahn of Home Business Opportunities I discovered some flaws in the solution above. The the Twitter widget solution below seems to be a bit easier to manage
———————
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title*>Twitter Thing</title>
<style type="text/css">
#twitter_div {
font:12px Arial,sans-serif;
padding:15px;
line-height:normal;
width:300px;
border:1px solid #333;
}
#twitter_div ul {
margin:0; padding:0;
}
#twitter_div li {
padding:6px 0; list-style:none;
}
#twitter_div a {
color:#CC0000;
}
</style>
</head>
<body>
<div id="twitter_div">
<ul id="twitter_update_list"></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline
/YOURID.json?callback=twitterCallback2&count=5"></script>
</div>
</body>
</html>
replace: YOURID
set: count=5 to however many tweets you want to display
May 17th, 2009 at 12:00 pm
Nice work Norman,
I’ll give this a spin on the blog tomorrow.
October 11th, 2009 at 12:19 am
I copied your code into a new page, replaced yourtwitterid with mine but nothing happens.
Help!
October 11th, 2009 at 10:48 am
Clearly this script is no longer compatible…
go here
http://twitter.com/goodies/widgets
October 11th, 2009 at 10:57 am
Thanks Norman but the script at http://twitter.com/goodies/widgets keeps looping / scrolling which I don’t like. Any other ideas? There are plenty of widgets for blogs but I haven’t found one for a regular website.
October 11th, 2009 at 11:35 am
STYLE:
#twitter_div{ font:12px Arial,sans-serif; padding:15px; line-height:normal; width:300px; border:1px solid #333; }
#twitter_div ul { margin:0; padding:0; }
#twitter_div li { padding:6px 0; list-style:none; }
#twitter_div a { color:#CC0000; }
BODY:
< *div id="twitter_div"*>
< *ul id="twitter_update_list"*>< */u*>
< *script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"*>< */script*>
< *script type="text/javascript" src="http://twitter.com/statuses/user_timeline/YOURID.json?callback=twitterCallback2&count=5"*>< */script*>
< */div*>
(delete all the *)
replace: YOURID
set: count=5
October 11th, 2009 at 11:47 am
Norman I am sorry you are assuming that I know where to place the code. Would you mind explaining what part to place in the header and what to place in the body. Is there any other code necessary besides this?
October 12th, 2009 at 6:57 pm
sorry, here’s a demo page to show what section the elements go in.
—————————————-
< *html*>
< *head*>
< *meta http-equiv="Content-Type" content="text/html; charset=utf-8" /*>
< *title*>Twitter Thing< */title*>
< *style type="text/css"*>
#twitter_div{ font:12px Arial,sans-serif; padding:15px; line-height:normal; width:300px; border:1px solid #333; }
#twitter_div ul { margin:0; padding:0; }
#twitter_div li { padding:6px 0; list-style:none; }
#twitter_div a { color:#CC0000; }
< */style*>
< */head*>
< *body*>
< *div id="twitter_div"*>
< *ul id="twitter_update_list"*>< */u*>
< *script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"*>< */script*>
< *script type="text/javascript" src="http://twitter.com/statuses/user_timeline/YOURID.json?callback=twitterCallback2&count=5"*>< */script*>
< */div*>
< */body*>
< */html*>
————————-
delete all the *, if I don’t put them in WordPress thinks I’m adding actual html.
replace: YOURID
set: count=5 to however many tweets you want to display
October 13th, 2009 at 4:06 pm
Norman I posted the code but it comes up as just code.
See
part-time-work-at-home.net/temp/test4.htm
What am I doing wrong?
October 13th, 2009 at 5:52 pm
remove the spaces after the < symbols
Read this post – how to make a website for beginners
October 13th, 2009 at 9:28 pm
It works! It works!
Thank You so much.
I’ll post a link to this post so others can benefit too.
October 15th, 2009 at 5:18 pm
Problem:
I tried to place tweets from two different Twitter Accounts on the same page. I changed the Twitter Account IDs in the sample code and pasted it twice with different IDs on the page. But no matter what I do, only one account’s tweets are displayed. The code for the second is on the page but it does nothing.
What do do?
October 16th, 2009 at 9:09 am
hmmm, I’ve never attempted that. If I was going to I would start by Googling “display twitter on a blog.” There are several WP plugins that display tweets but I only have one acct. so I’ve never traveled down that alley.
March 8th, 2010 at 6:57 am
The idea of Twitter is quite simple: bring the notion of mobile SMS to the internet. The cell phone market was detecting a steep decline in voice communication and a massive increase in text messaging and instant messaging.That’s why people today are immediately taking advantage of Twitter by advertising their products or to advertise their businesses. You can even use Twitter to promote your web page or site in order for you to get targeted traffic flowing into your site and start making some money.
May 19th, 2010 at 10:45 am
It works! It works!
Thank You so much.
I’ll post a link to this post so others can benefit too.
August 18th, 2010 at 5:13 pm
For some reason this works perfect in all browsers except safari. Am I doing something wrong?
August 18th, 2010 at 9:03 pm
@Jack, Probably nothing. It’s old code and there are many, many better solutions out there now. Start here http://twitter.com/goodies/widgets