Retrieve tweets using jQuery

Posted on Sep 27, 2009

Hey all,

As many of you out there, I’m a Twitter user too. As most of you have, I too have spent quite some time reading the Twitter API and understanding it.

I stumbled upon a forum message (in Hebrew) asking how can you retrieve your (or anybody else’s) tweets using JavaScript only and no server side.

Well, there’s a way to accomplish that and it is not that complicated at all.

Change the twitterUsername var in the code to fit your username or the username you want to retrieve, please notice I took the “text” property only but the jSON result returns many more like:

Application used, profile image, time and more.

Here’s the code, enjoy!

<p>
  <!--CRLF-->
</p>

<pre style="border-style: none; margin: 0em; padding: 0px; overflow: visible; text-align: left; line-height: 12pt; background-color: #f4f4f4; width: 100%; font-family: 'Courier New',courier,monospace; direction: ltr; color: black; font-size: 8pt;"><span id="lnum2" style="color: #606060;">   2:</span>     <span style="color: #0000ff;">var</span> twitterUsername = <span style="color: #006080;">'KensoDev'</span>;</pre>

<p>
  <!--CRLF-->
</p>

<pre style="border-style: none; margin: 0em; padding: 0px; overflow: visible; text-align: left; line-height: 12pt; background-color: white; width: 100%; font-family: 'Courier New',courier,monospace; direction: ltr; color: black; font-size: 8pt;"><span id="lnum3" style="color: #606060;">   3:</span>     <span style="color: #0000ff;">var</span> twitCount = 50;</pre>

<p>
  <!--CRLF-->
</p>

<pre style="border-style: none; margin: 0em; padding: 0px; overflow: visible; text-align: left; line-height: 12pt; background-color: #f4f4f4; width: 100%; font-family: 'Courier New',courier,monospace; direction: ltr; color: black; font-size: 8pt;"><span id="lnum4" style="color: #606060;">   4:</span>     $.getJSON(</pre>

<p>
  <!--CRLF-->
</p>

<pre style="border-style: none; margin: 0em; padding: 0px; overflow: visible; text-align: left; line-height: 12pt; background-color: white; width: 100%; font-family: 'Courier New',courier,monospace; direction: ltr; color: black; font-size: 8pt;"><span id="lnum5" style="color: #606060;">   5:</span>         <span style="color: #006080;">'http://search.twitter.com/search.json?callback=?&rpp='</span> + twitCount + <span style="color: #006080;">'&q=from:'</span> + twitterUsername,</pre>

<p>
  <!--CRLF-->
</p>

<pre style="border-style: none; margin: 0em; padding: 0px; overflow: visible; text-align: left; line-height: 12pt; background-color: #f4f4f4; width: 100%; font-family: 'Courier New',courier,monospace; direction: ltr; color: black; font-size: 8pt;"><span id="lnum6" style="color: #606060;">   6:</span>         <span style="color: #0000ff;">function</span>(data) {</pre>

<p>
  <!--CRLF-->
</p>

<pre style="border-style: none; margin: 0em; padding: 0px; overflow: visible; text-align: left; line-height: 12pt; background-color: white; width: 100%; font-family: 'Courier New',courier,monospace; direction: ltr; color: black; font-size: 8pt;"><span id="lnum7" style="color: #606060;">   7:</span>             $.each(data, <span style="color: #0000ff;">function</span>(i, userTweets) {</pre>

<p>
  <!--CRLF-->
</p>

<pre style="border-style: none; margin: 0em; padding: 0px; overflow: visible; text-align: left; line-height: 12pt; background-color: #f4f4f4; width: 100%; font-family: 'Courier New',courier,monospace; direction: ltr; color: black; font-size: 8pt;"><span id="lnum8" style="color: #606060;">   8:</span>                 <span style="color: #0000ff;">for</span> (<span style="color: #0000ff;">var</span> tweet = 0; tweet &lt; userTweets.length; tweet++) {</pre>

<p>
  <!--CRLF-->
</p>

<pre style="border-style: none; margin: 0em; padding: 0px; overflow: visible; text-align: left; line-height: 12pt; background-color: white; width: 100%; font-family: 'Courier New',courier,monospace; direction: ltr; color: black; font-size: 8pt;"><span id="lnum9" style="color: #606060;">   9:</span>                     <span style="color: #0000ff;">if</span> (userTweets[tweet].text !== undefined) {</pre>

<p>
  <!--CRLF-->
</p>

<pre style="border-style: none; margin: 0em; padding: 0px; overflow: visible; text-align: left; line-height: 12pt; background-color: #f4f4f4; width: 100%; font-family: 'Courier New',courier,monospace; direction: ltr; color: black; font-size: 8pt;"><span id="lnum10" style="color: #606060;">  10:</span>                         $(<span style="color: #006080;">'body'</span>).append(<span style="color: #006080;">'&lt;p&gt;'</span> + userTweets[tweet].text + <span style="color: #006080;">'&lt;/p&gt;'</span>);</pre>

<p>
  <!--CRLF-->
</p>

<pre style="border-style: none; margin: 0em; padding: 0px; overflow: visible; text-align: left; line-height: 12pt; background-color: white; width: 100%; font-family: 'Courier New',courier,monospace; direction: ltr; color: black; font-size: 8pt;"><span id="lnum11" style="color: #606060;">  11:</span>                     }</pre>

<p>
  <!--CRLF-->
</p>

<pre style="border-style: none; margin: 0em; padding: 0px; overflow: visible; text-align: left; line-height: 12pt; background-color: #f4f4f4; width: 100%; font-family: 'Courier New',courier,monospace; direction: ltr; color: black; font-size: 8pt;"><span id="lnum12" style="color: #606060;">  12:</span>                 }</pre>

<p>
  <!--CRLF-->
</p>

<pre style="border-style: none; margin: 0em; padding: 0px; overflow: visible; text-align: left; line-height: 12pt; background-color: white; width: 100%; font-family: 'Courier New',courier,monospace; direction: ltr; color: black; font-size: 8pt;"><span id="lnum13" style="color: #606060;">  13:</span>             });</pre>

<p>
  <!--CRLF-->
</p>

<pre style="border-style: none; margin: 0em; padding: 0px; overflow: visible; text-align: left; line-height: 12pt; background-color: #f4f4f4; width: 100%; font-family: 'Courier New',courier,monospace; direction: ltr; color: black; font-size: 8pt;"><span id="lnum14" style="color: #606060;">  14:</span>         }</pre>

<p>
  <!--CRLF-->
</p>

<pre style="border-style: none; margin: 0em; padding: 0px; overflow: visible; text-align: left; line-height: 12pt; background-color: white; width: 100%; font-family: 'Courier New',courier,monospace; direction: ltr; color: black; font-size: 8pt;"><span id="lnum15" style="color: #606060;">  15:</span>     );</pre>

<p>
  <!--CRLF-->
</p>

<pre style="border-style: none; margin: 0em; padding: 0px; overflow: visible; text-align: left; line-height: 12pt; background-color: #f4f4f4; width: 100%; font-family: 'Courier New',courier,monospace; direction: ltr; color: black; font-size: 8pt;"><span id="lnum16" style="color: #606060;">  16:</span> }</pre>

<p>
  <!--CRLF-->
</p>

You can of course change the tags being created, you can change the object the tags are being appended into, you can change the code to better suit your needs that’s for sure.

If you need any help feel free to comment on this post and I will help you as much as I can.