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!
REXML could not parse this XML/HTML:
<div id="codeSnippetWrapper" style="border: 1px solid silver; margin: 20px 0px 10px; padding: 4px; overflow: auto; text-align: left; line-height: 12pt; background-color: #f4f4f4; width: 97.5%; font-family: 'Courier New',courier,monospace; direction: ltr; max-height: 200px; font-size: 8pt; cursor: text;">
<div id="codeSnippet" style="border-style: none; 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;">
<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="lnum1" style="color: #606060;"> 1:</span> <span style="color: #0000ff;">function</span> getuserTweets() {</pre>
<!--CRLF-->
<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>
<!--CRLF-->
<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>
<!--CRLF-->
<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>
<!--CRLF-->
<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>
<!--CRLF-->
<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>
<!--CRLF-->
<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>
<!--CRLF-->
<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 < userTweets.length; tweet++) {</pre>
<!--CRLF-->
<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>
<!--CRLF-->
<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;">'<p>'</span> + userTweets[tweet].text + <span style="color: #006080;">'</p>'</span>);</pre>
<!--CRLF-->
<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>
<!--CRLF-->
<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>
<!--CRLF-->
<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>
<!--CRLF-->
<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>
<!--CRLF-->
<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>
<!--CRLF-->
<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>
<!--CRLF-->
REXML could not parse this XML/HTML: </div>
REXML could not parse this XML/HTML: </div>
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.
