Tag Archive > Feed

Ajax Twitter feed with Scriptaculous

» 20 April 2009 » In Ajax Articles » No Comments

This example shows you how to integrate your Twitter on your website. It uses some custom javascript code, and it also uses the scriptaculous library to use a sliding effect. In this example it will show the 5 latest entries from your Twitter account.

You can see a video of how this works, shown in the demovideo of the template “Personal Homepage”.

We will start with the html file, in this case: index.html. You need to add the following code in the head section:

?View Code HTML4STRICT
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset/reset-min.css" />
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script><script type="text/javascript" src="js/ajax.js"></script>

And then, somewhere in the body tag, you need to add this code (this is the code for showing the Twitter feed).

?View Code HTML4STRICT
<body>
<div id="twitter" class="list">
<h1>Twitter</h1>
<img id="spinner-twitter" alt="spinner" src="#" width="16" height="16" />
<div id="list-twitter" style="display: none;"></div>
</div>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/SveinErik.json?callback=twitterCallback2&count=5"></script>
</body>

As you can see in the last line, you can see the name “SveinErik”, that is my Twitter username, so you need to put your own username there. The last thing, the magic, is found in the Ajax.js file (also included in the .zip file), this is where the actual javascript code for both getting the feed from Twitter, and also a function for showing how long ago each status update was written (like 2 days ago etc).

?View Code JAVASCRIPT
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
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);
if (delta < 60) {
return 'less than a minute ago';
} 
else if (delta < 120) {return 'about a minute ago';
}
else if (delta < (60 * 60)) {
return (parseInt(delta / 60)).toString() + ' minutes ago';
}
else if (delta < (120 * 60)) {
return 'about an hour ago';
}
else if (delta < (24 * 60 * 60)) {
return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
}
else if (delta < (48 * 60 * 60)) {
return '1 day ago';}
else {
return (parseInt(delta / 86400)).toString() + ' days ago';
}
}
 
function twitterCallback2(twitters) {
var statusHTML = "";
for (var i = 0; i < twitters.length; i++) {
statusHTML += '<li>' +
twitters[i].text + '&nbsp;<small>(' +
relative_time(twitters[i].created_at) +')</small></li>';
}
 $('list-twitter').innerHTML = '<ul>' + statusHTML + '</ul>';
$('spinner-twitter').hide();
$('list-twitter').slideDown({ duration: 2 });
}

You can download the .zip file, containing a fully working example. This is the same code as used in the template “Personal Homepage”, which also include similiar ajax effects to grab the feed from both Twitter, Delicious and Flickr. It is available for only $9 in the shop.
Good luck!

Continue reading...

Tags: , , , , ,

Json Flickr Feed example

» 31 July 2008 » In Ajax Articles » 5 Comments

In many cases, you want to show pictures on your website. In some of these cases, you’ll want users to upload their own pictures. This could mean that you would have to build an upload system, with lot’s of security issues around it, and it also means that you’ll have to have a lot of webspace available at your webhost. Luckily, there is a really easy and neat solution to this.

Flickr has been the number 1 for storing pictures online for some years, and they are offering developers a nice API, which means that we can use many of their functions in our own solutions. In this case, we are going to use it to grab the latest pictures from a Flickr group. But how? With JSON (JavaScript Object Notation). Jquery is able to transfer data between domains, and this means that with a little code, we can use this to show our pictures from the rss feed from the Flickr group.

I’ve put together an example on how to do this (you can download this as a .zip file at the bottom of the article).

What you need to pull this together is:

  • Jquery
  • A couple of lines in your htm file
  • Another couple of lines in your css document
  • A Flickr rss (doesn’t have to be yours, just a Flickr rss)

This is the code you need to put in your htm file (in the head tag):

?View Code HTML4STRICT
<link rel="stylesheet" type="text/css" title="My style" media="screen" href="jsonstylesheet.css" />
<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>

And put this where you want inside the body tag (change the url to your own Flickr Rss feed):

?View Code JAVASCRIPT
<script type="text/javascript">
$.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=807213@N20&lang=en-us&format=json&jsoncallback=?", function(data){
  $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).appendTo("#images")
      .wrap("<a href='http://www.csstemplatesweb.com/ajax-articles/json-flickr-feed-example/'></a>");
  });
 
  $("#title").html(data.title);
  $("#description").html(data.description);
  $("#link").html("<a href='http://www.csstemplatesweb.com/ajax-articles/json-flickr-feed-example/' target=\"_blank\">Click here to get to the Flickr group</a>");
    //Notice that the object here is "data" because that information sits outside of "items" in the JSON feed
});
</script>

You also need to put this into your body tag (where you want the images to show):

?View Code HTML4STRICT
<p>Only the last 20 pictures added to the Flickr group will show. To check out all the pictures, go to the Flickr group here:</p>
<p id="link"></p> 
<div id="images"></div>

To add some styling, add this in you css file:

?View Code CSS
#images { width: 500px; padding:0; margin:15px 0px 0px 100px; overflow: hidden; }
#images img { border:none; padding-right:5px; padding-bottom:5px;}

That’s it!

Here is a little screenshot on how it will look. Of course, you can style it the way you want with css.

Flickr Feed example with Json

You can download the zip file, containing all you need.

You can also buy the “Personal homepage” css template, containing this function (only a bit more fancy), plus it integrates feeds from both Twitter and Delicious as well.

Continue reading...

Tags: , , , , ,