use real Twitter badge

I was using a hacked-together API hit before. This won't work with Twitter's
recently-announced API v1.1, which prohibits unauthenticated access.

_layouts/main.html

@@ -126,16 +126,6 @@ or <a href="http://news.ycombinator.com/submitlink?u={{ site.url | cgi_escape }}
 </ul>
 </section>
 <section>
-{% if page.section == 'main' %}
-<h3><a href="http://twitter.com/b33ts">News</a></h3>
-<ul id="twitterStatus" class="newslist">
-</ul>
-{% endif %}
-<p id="twitterFollow">
-    <a href="http://twitter.com/b33ts" class="twitter-follow-button">Follow @b33ts</a>
-</p>
-</section>
-<section>
 <h3><a href="/blog/">Blog</a></h3>
 <ul id="blogSidebar" class="newslist">
 {% for post in site.posts limit:3 %}
@@ -150,6 +140,43 @@ or <a href="http://news.ycombinator.com/submitlink?u={{ site.url | cgi_escape }}
 </p>
 </section>
 <section>
+{% if page.section == 'main' %}
+<h3><a href="http://twitter.com/b33ts">News from @b33ts</a></h3>
+<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
+<script>
+new TWTR.Widget({
+  version: 2,
+  type: 'profile',
+  rpp: 3,
+  interval: 30000,
+  width: 'auto',
+  height: 300,
+  theme: {
+    shell: {
+      background: '#ffffff',
+      color: '#000000'
+    },
+    tweets: {
+      background: '#ffffff',
+      color: '#000000',
+      links: '#0088cc'
+    }
+  },
+  features: {
+    scrollbar: false,
+    loop: false,
+    live: false,
+    behavior: 'all'
+  }
+}).render().setUser('b33ts').start();
+</script>
+{% else %}
+<p id="twitterFollow">
+    <a href="http://twitter.com/b33ts" class="twitter-follow-button">Follow @b33ts</a>
+</p>
+{% endif %}
+</section>
+<section>
 <h3>Contact</h3>
 <p>
     Email <a href="mailto:adrian@radbox.org">Adrian Sampson</a> with comments, questions, and fan mail.

beets.css

@@ -133,3 +133,14 @@ ul, ol {
         -webkit-background-size: 140px 140px;
     }
 }
+
+.twtr-ft, .twtr-hd, .twtr-user {
+    display: none;
+}
+.twtr-tweet-wrap {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+.twtr-widget {
+    margin-bottom: 10px;
+}

beets.js

@@ -23,47 +23,6 @@ function updateBeetsis() {
     });
 }
 
-
-// Fetch and display the latest messages from the Twitter account.
-var NEWS_COUNT = 3;
-var MONTH_NAMES = [ "January", "February", "March", "April", "May", "June",
-    "July", "August", "September", "October", "November", "December" ];
-var urlre = /(http:\/\/([^ \/]+)(\/\S+)?)\b/;
-function getNews() {
-    var twitterUser = 'b33ts';
-    var url = 'http://twitter.com/statuses/user_timeline/'+twitterUser+'.json';
-    $.ajax({
-        url: url,
-        dataType: 'jsonp',
-        success: function(data) {
-            // Find the first non-reply status. This assumes there's at least
-            // one non-reply in this chunk... probably a reasonable assumption.
-            $('#twitterStatus').empty();
-            var count = 0;
-            $.each(data, function(i, status) {
-    			if (status.in_reply_to_screen_name == null) {
-    				// Not a reply.
-
-    				var text = status.text;
-                    text = text.replace(urlre, "<a href=\"$1\">link&nbsp;&raquo;</a>");
-
-                    var date = new Date(Date.parse(status.created_at));
-                    date = MONTH_NAMES[date.getMonth()] + ' ' + date.getDate();
-
-                    $('#twitterStatus').append(
-                        '<li><span class="date">' + date + '</span> ' +
-                        text + '</li>'
-                    );
-                    count++;
-                    if (count >= NEWS_COUNT)
-                        return false; // break
-    			}
-    		});
-        },
-    });
-}
-
 $(function() {
     setTimeout(updateBeetsis, INTERVAL_INITIAL);
-    getNews();
 });