Twitter: Display Latest Tweets & Follow Me Button

Tweet URLs are styled & linked

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<div id="tweet"></div>

<!-- Chenge the href URL to your Twitter User Name - ie. https://twitter.com/yourtwitterusername -->
<a href="https://twitter.com/jenniferdperrin" class="twitter-follow-button" data-show-screen-name="true" data-show-count="false">Follow Me</a>

CSS

#tweet {
  background: #ececec;
  color: #555;
  font-family: 'Yanone Kaffeesatz';
  font-size: 1.1em;
  margin: 10px 10px 0 10px;
  padding: 15px 20px;
  position: relative;
  text-align: center;
  width: 200px;
  border: #cccccc 1px solid;
  border-radius: 3px;

  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

a {
    color: #5a7c87;
    text-decoration: none;
    font-size: .9em;
}

.twitter-follow-button {
  margin:10px;
}

hr {
  border: 0; 
  height: .05em; 
  background: #ccc; 
  background-image: -webkit-linear-gradient(left, #e8e8e8, #ccc, #e8e8e8); 
  background-image: -moz-linear-gradient(left, #e8e8e8, #ccc, #e8e8e8); 
  background-image: -ms-linear-gradient(left, #e8e8e8, #ccc, #e8e8e8); 
  background-image: -o-linear-gradient(left, #e8e8e8, #ccc, #e8e8e8);
}

JavaScript

// Twitter Latest Tweets
$(document).ready(function() {
    // Your Twitter Username
    var user = 'shivittech';
    // The amount of Tweets you want to display
    var count = '2';

    $.getJSON('http://twitter.com/statuses/user_timeline.json?screen_name=' + user + '&count=' + count + '&callback=?', function(data) {
        var tweet = "";
        for (i = 0; i < data.length; i++) {
            tweet += data[i].text + "<hr />";
        }
        tweet = tweet.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, function(url) {
            return '<br /><a target="_blank" href="'+url+'">'+url+'</a>';
        }).replace(/B@([_a-z0-9]+)/ig, function(reply) {
            return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
        });
        $("#tweet").html(tweet);
    });
});

// Twitter Follow Me Button
!function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (!d.getElementById(id)) {
        js = d.createElement(s);
        js.id = id;
        js.src = "//platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);
    }
}(document, "script", "twitter-wjs");