GissiSim.com

As many of you that read my blog already know, I am in love with twitter. It has opened up a world for me that I just didn’t know existed, really given me the love I once had for the internet back. Since I’ve gotten so much from it, I’ve decided to give something back to the community. Since not everyone is a big coder, I want to give those of you that want a live twitter feed on your page the code to accomplish that.

Please feel free to use this code for your own personal use. However if you want to sell this or use it on a corporate site, please talk to me for permission. Also if you guys want to give me some expert tips on how to make things better in the code, please comment on what can be changed or added! Thank you.

Link straight to example.

The Code

<script type="text/javascript">
      $(
          function()
          {
              setInterval("getSearch()",10000);
          getSearch();

          }
      );

    TwitterCache = {};

  function getSearch()
  {

            var url = "http://search.twitter.com/search.json?q=%22in+love%22&callback=?";
            // Change %22in+love%22 to your search. %22 is a qoute
            $.getJSON
            (
                url,
            function(data)
            {
                if( data.results ) // Checks to see if you have any new tweets
                {
                    var i = -1, result, HTML='', HTML2='';
                    while( (result = data.results[++i]) && !TwitterCache[result.id] )
                    {
                        TwitterCache[result.id] = result.from_user;
                        HTML += '<li id="TwitterId'+ result.id +'"><img src="' +
                        result['profile_image_url']+'" alt="Profile Image" />
                        <strong class="User">'+ result.from_user + '</strong>' +
                        FormatIt(result.text) + ' <span class="created_at">' +
                        relative_time(result.created_at) + '</span> via ' +
                        linkup(result.source) + '</li>';

                    }
                    if( HTML !== '' )
                        $("#tweets ul").prepend( HTML ).find('li:hidden').slideToggle('slow');

                    $("li:gt(14)").remove(); // Removes everything past the 15th tweet

                    $("li:even").css  // Simple Styling of the boxes START
                        ({
                            "background": "#DFDFDF",
                            "border-color": "#DFDFDF",
                            "border-style": "solid",
                            "border-width": "2px"
                        });
                    $("li:odd").css
                        ({
                            "background": "grey",
                            "border-color": "grey",
                            "border-style": "solid",
                            "border-width": "2px"
                        });
                    $("li").hover(
                      function () {
                        $(this).addClass("hover");
                        $(this).animate({
                            opacity: 1.0
                            }, 10);

                      },
                      function () {
                        $(this).removeClass("hover");
                        $(this).animate({
                            opacity: 0.2
                            }, 10);
                      }
                    ); // STYLING ENDS

                }
            }
        )

  }

    function FormatIt(text_results)  // Formats the text. Makes In Love become bold
    {
        text_results = text_results.replace(/(in love)/ig,
        '<strong class="inlove">$1</strong>');
        return text_results.linkify();
    }

    function linkup(link) // Makes the links linkable
    {
        link = link.replace('&lt;a href=&quot;','<a href="');
        link = link.replace('&quot;&gt;','">');
        link = link.replace('&lt;/a&gt;','</a>');
        return link;
    }

      String.prototype.linkify = function() {  //Also makes links linkable
            return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/~.=]+/,
            function(m) {
        return m.link(m);
      });
    };

  function relative_time(time_value) { //Makes the time thing happen
        var values = time_value.split(" ");
        time_value = values[2] + " " + values[1] + ", " + values[3] + " " + values[4];
        var parsed_date = Date.parse(time_value);
        var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
        var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
        delta = delta + (relative_to.getTimezoneOffset() * 60);

        var r = '';
        if (delta < 60) {
          r = 'a minute ago';
        } else if(delta < 120) {
          r = 'couple of minutes ago';
        } else if(delta < (45*60)) {
          r = (parseInt(delta / 60)).toString() + ' minutes ago';
        } else if(delta < (90*60)) {
          r = 'an hour ago';
        } else if(delta < (24*60*60)) {
          r = '' + (parseInt(delta / 3600)).toString() + ' hours ago';
        } else if(delta < (48*60*60)) {
          r = '1 day ago';
        } else {
          r = (parseInt(delta / 86400)).toString() + ' days ago';
        }

        return r;
}
function twitter_callback ()
{
      return true;
}

</script>

The Example

This is probably the best way to see how you should make this work. Just look at the code and you should get a fairly good idea what I’m doing. I’ve put comments next to the things that can be changed in the jQuery code. It’s all in one HTML file to make it easier to see all at once.

Link to exmaple.

No related posts.