Tutorialzine » Search Results » YQL

How to use Geolocation and Yahoo’s APIs to build a simple weather webapp

Martin Angelov — Mon, 14 May 2012 09:13:18 +0000

Today we will be using the HTML5 geolocation API to present the user with a personalized weather forecast. Using jQuery, we will issue AJAX request to two of Yahoo’s popular APIs to obtain additional geographical information and a weather forecast. This example also makes use of the wonderful climacons icon set.

Obtaining an Application Key

Yahoo provides a large collection of useful APIs that are free for developers to use. The requirement is that you register your application with through their developer dashboard. The registration is simple and straightforward, and as a result you obtain an application id (look for it under the title of your application). You are going to need this later in the tutorial, but first let’s see how everything would work together.

The Idea

Here is what we need to do in order to display our weather forecast:

First we’ll use the Geolocation API supported by modern browsers. The API will prompt the user to authorize location access and will return a set of GPS coordinates;
Next, we will issue a request to Yahoo’s PlaceFinder API, passing the above coordinates. This will give us the name of the city and country, and a woeid – a special ID used to identify the city in weather forecasts;
Finally, we will issue a request to Yahoo’s Weather API with that woeid. This will give us current weather conditions, as well as a forecast for the rest of the current and the next day.

Great! We are now ready for the HTML.

Weather Forecast Web App

The HTML

We will start with a blank HTML5 document, and we will add a reference to our stylesheet to the head section, along with two fonts from Google’s Webfonts library. In the body we will add a h1 header and markup for the weather forecast slider.

index.html

Weather Forecast with jQuery & Yahoo APIs | Tutorialzine Demo

Weather Forecast

Previous Next

Before the closing body tag we are adding the latest version of jQuery and our script.js file, which we are discussing in the following sections.

The JavaScript

The first step is to define two configuration variables in /assets/js/script.js:

var APPID = '';	// Your Yahoo Application ID
var DEG = 'c';	// c for celsius, f for fahrenheit

These are passed as parameters with the AJAX requests for the location and weather APIs as you will see in a moment.

Following the outline in the idea section, we should now look into using the HTML5 Geolocation API to obtain a set of GPS coordinates. This API is supported by all new browsers including IE9 and mobile devices. To use it, we need to test whether the global navigator object has a geolocation property. If it does, we call its getCurrentPosition method passing two event handling functions for success and failure. Here is the relevant code from script.js that does this:

// Does this browser support geolocation?
if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(locationSuccess, locationError);
}
else{
	showError("Your browser does not support Geolocation!");
}

function locationSuccess(position) {
	var lat = position.coords.latitude;
	var lon = position.coords.longitude;

	// We will make further requests to Yahoo's APIs here
}

function locationError(error){
	switch(error.code) {
		case error.TIMEOUT:
			showError("A timeout occured! Please try again!");
			break;
		case error.POSITION_UNAVAILABLE:
			showError('We can\'t detect your location. Sorry!');
			break;
		case error.PERMISSION_DENIED:
			showError('Please allow geolocation access for this to work.');
			break;
		case error.UNKNOWN_ERROR:
			showError('An unknown error occured!');
			break;
	}

}

function showError(msg){
	weatherDiv.addClass('error').html(msg);
}

The locationSuccess function is where we will be issuing requests to Yahoo’s APIs in a moment. The locationError function is passed an error object with the specific reason for the error condition. We will use a showError helper function to display the error messages on the screen.

The full version of locationSuccess follows:

function locationSuccess(position) {
	var lat = position.coords.latitude;
	var lon = position.coords.longitude;

	// Yahoo's PlaceFinder API http://developer.yahoo.com/geo/placefinder/
	// We are passing the R gflag for reverse geocoding (coordinates to place name)
	var geoAPI = 'http://where.yahooapis.com/geocode?location='+lat+','+lon+'&flags=J&gflags=R&appid='+APPID;

	// Forming the query for Yahoo's weather forecasting API with YQL
	// http://developer.yahoo.com/weather/

	var wsql = 'select * from weather.forecast where woeid=WID and u="'+DEG+'"',
		weatherYQL = 'http://query.yahooapis.com/v1/public/yql?q='+encodeURIComponent(wsql)+'&format=json&callback=?',
		code, city, results, woeid;

	// Issue a cross-domain AJAX request (CORS) to the GEO service.
	// Not supported in Opera and IE.
	$.getJSON(geoAPI, function(r){

		if(r.ResultSet.Found == 1){

			results = r.ResultSet.Results;
			city = results[0].city;
			code = results[0].statecode || results[0].countrycode;

			// This is the city identifier for the weather API
			woeid = results[0].woeid;

			// Make a weather API request (it is JSONP, so CORS is not an issue):
			$.getJSON(weatherYQL.replace('WID',woeid), function(r){

				if(r.query.count == 1){

					// Create the weather items in the #scroller UL

					var item = r.query.results.channel.item.condition;
					addWeather(item.code, "Now", item.text + ' '+item.temp+'°'+DEG+'');

					for (var i=0;i<2;i++){
						item = r.query.results.channel.item.forecast[i];
						addWeather(
							item.code,
							item.day +' '+item.date.replace('\d+$','')+'',
							item.text + ' '+item.low+'°'+DEG+' / '+item.high+'°'+DEG+''
						);
					}

					// Add the location to the page
					location.html(city+', '+code+'');

					weatherDiv.addClass('loaded');

					// Set the slider to the first slide
					showSlide(0);

				}
				else {
					showError("Error retrieving weather data!");
				}
			});

		}

	}).error(function(){
		showError("Your browser does not support CORS requests!");
	});

}

The PlaceFinder API returns its results as plain JSON. But as it is on a different domain, only browsers that support CORS (cross origin resource sharing) will be able to retrieve it. Most major browsers that support geolocation also support CORS, with the exception of IE9 and Opera, which means that this example won’t work there.

Another thing to consider is that the weather API returns only two days of forecasts, which somewhat limits the utility of our web app, but unfortunately there is no way around it.

We are only using the Weather API for temperature data, but it provides additional information that you might find useful. You can play with the API and browse the responses in the YQL console.

After we retrieve the weather data, we call the addWeather function, which creates a new LI item in the #scroller unordered list.

function addWeather(code, day, condition){

	var markup = ''+
		''+
		' '+ day +'
 '+ condition +
		'';

	scroller.append(markup);
}

Now we need to listen for clicks on the previous / next arrows, so we can offset the slider to reveal the correct day of the forecast.

	/* Handling the previous / next arrows */

	var currentSlide = 0;
	weatherDiv.find('a.previous').click(function(e){
		e.preventDefault();
		showSlide(currentSlide-1);
	});

	weatherDiv.find('a.next').click(function(e){
		e.preventDefault();
		showSlide(currentSlide+1);
	});

	function showSlide(i){
		var items = scroller.find('li');

		// Exit if the requested item does not exist,
		// or the scroller is currently being animated
		if (i >= items.length || i < 0 || scroller.is(':animated')){
			return false;
		}

		// The first/last classes hide the left/right arrow with CSS
		weatherDiv.removeClass('first last');

		if(i == 0){
			weatherDiv.addClass('first');
		}
		else if (i == items.length-1){
			weatherDiv.addClass('last');
		}

		scroller.animate({left:(-i*100)+'%'}, function(){
			currentSlide = i;
		});
	}

With this our simple weather web app is complete! You can see everything together in /assets/js/script.js. We won't be discussing the styling here, but you can read through /assets/css/styles.css yourself.

Done!

In this example you learned how to use the HTML5 geolocation with Yahoo's Weather and Places APIs to present a location-aware weather forecast. It works on most modern web browsers and mobile devices.

Timeline Portfolio

Martin Angelov — Mon, 02 Apr 2012 08:16:09 +0000

Timeline is a jQuery plugin specialized in showing a chronological series of events. You can embed all kinds of media including tweets, videos and maps, and associate them with a date. With some design tweaks, this will make it perfect for a portfolio in which you showcase your work and interests.

The HTML

Timeline comes with a light colored theme by default. It is perfectly usable and in most cases would be exactly what you need. However, for our portfolio, a dark design would be a better fit, so we will customize it to our liking.

First, let’s look at the basic layout of the page:

index.html



    
        
        Timeline Portfolio | Tutorialzine Demo

In the head section, we have the plugin’s stylesheet – timeline.css, and styles.css, which will hold our customizations. In the footer we have the jQuery library, timeline plugin and script.js which initializes it.

When we call the plugin, it will search for a div on your page with the ID of timeline. Inside it, it will inserts all the markup it needs to present the timeline:


	
		

			

			
				

					Johnny B Goode
					Designer & Developer

				

				
					
				
			

			
				

					March 2009
					My first experiment in time-lapse photography
					Nature at its finest in this video.

				

				
					
				
			

			
		

        
		
			
			March 2010
			Logo Design for a pet shop
		

        
		
			
			July 2009
			Another time-lapse experiment

As we will be modifying the CSS of the timeline, the fragment above will give you a better idea of the customizations. Note that we won’t be recreating the plugin’s stylesheet from scratch, we will only be overriding some of the rules in our own css file. This has the benefit of making future updates to the plugin straightforward, not to mention that it will be much easier.

Timeline Portfolio with jQuery

Writing the CSS by looking at the markup alone would be a tough undertaking, given that our rules must have precedence over the ones used in timeline.css. Fortunately, there is a much easier way, as you will see in the CSS section of this tutorial.

The jQuery

To initialize the plugin, we need to call the VMM.Timeline() method on document ready:

$(function(){

	var timeline = new VMM.Timeline();
	timeline.init("data.json");

});

The init method takes single argument – the data source. It can either be a json file like above, or a Google spreadsheet (reminiscent of our Spredsheet Powered FAQ Tutorial).

For more information on the supported data sources, see the documentation on the plugin’s site, or browse the data.json file in the zip download for this tutorial.

The CSS

I used Firebug’s HTML Inspector to get the right selectors for the elements that we are about to customize. In the HTML tab, it is easy to see what rules have been applied to each element by timeline.css. To override them, I copied the same selectors to styles.css which is where our modifications will take place. On several occurrences, however, I have used the !important flag to make my work easier.

All the customizations you see below override only a handful of CSS styles. The rest are inherited by the default stylesheet. Let’s begin!

The first thing we will do in styles.css, after styling the page itself, is to change the backgrounds of the timeline:

#timeline{
	background:none;
}

/* The individual events in the slider */
.slider .slider-container-mask .slider-container{
	background:none;
}

/* Setting a custom background image */
#timeline div.navigation{
    background: url('../img/timeline_bg.jpg') repeat;
    border-top:none;
}

Timeline Navigation with a CSS 3D Effect

To create the 3D effect of the timeline navigation, we will need to use additional elements. But the Timeline plugin doesn’t include such in its markup. An easy solution is to use :before / :after pseudo elements. The :after element is the darker top part and it uses a linear gradient to enhance the effect.

#timeline div.navigation:before{
	position:absolute;
	content:'';
	height:40px;
	width:100%;
	left:0;
	top:-40px;
	background: url('../img/timeline_bg.jpg') repeat;
}

#timeline div.navigation:after{
	position:absolute;
	content:'';
	height:10px;
	width:100%;
	left:0;
	top:-40px;
	background:repeat-x;

	background-image: linear-gradient(bottom, #434446 0%, #363839 100%);
	background-image: -o-linear-gradient(bottom, #434446 0%, #363839 100%);
	background-image: -moz-linear-gradient(bottom, #434446 0%, #363839 100%);
	background-image: -webkit-linear-gradient(bottom, #434446 0%, #363839 100%);
	background-image: -ms-linear-gradient(bottom, #434446 0%, #363839 100%);
}

Then we add a dark background to the timeline navigation (the section with the small clickable tooltips that represent the events):

#timeline div.timenav-background{
 	background-color:rgba(0,0,0,0.4) !important;

}

#timeline .navigation .timenav-background .timenav-interval-background{
	background:none;
}

#timeline .top-highlight{
	background-color:transparent !important;
}

Later we style the zoom-in / zoom-out buttons and toolbar:

#timeline .toolbar{
	border:none !important;
	background-color: #202222 !important;
}

#timeline .toolbar div{
	border:none !important;
}

The numeric scale at the bottom comes next:

#timeline .navigation .timenav .time .time-interval-minor .minor{
	margin-left:-1px;
}

#timeline .navigation .timenav .time .time-interval div{
	color: #CCCCCC;
}

The previous and next arrows:

.slider .nav-previous .icon {
	background: url("timeline.png") no-repeat scroll 0 -293px transparent;
}

.slider .nav-previous,.slider .nav-next{
	font-family:'Segoe UI',sans-serif;
}

.slider .nav-next .icon {
	background: url("timeline.png") no-repeat scroll 72px -221px transparent;
	width: 70px !important;
}

.slider .nav-next:hover .icon{
	position:relative;
	right:-5px;
}

.slider .nav-previous:hover, .slider .nav-next:hover {
    color: #666;
    cursor: pointer;
}

#timeline .thumbnail {
	border: medium none;
}

The loading screen:

#timeline .feedback {
	background-color: #222222;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.2) inset;
	border:none;
}

#timeline .feedback div{
	color: #AAAAAA;
	font-size: 14px !important;
	font-weight: normal;
}

Then we move on to the slides:

#timeline .slider-item h2,
#timeline .slider-item h3{
	font-family:'Antic Slab','Segoe UI',sans-serif;
}

#timeline .slider-item h2{
	color:#fff;
}

#timeline .slider-item p{
	font-family:'Segoe UI',sans-serif;
}

#timeline .slider-item img,
#timeline .slider-item iframe{
	border:none;
}

Finally, we will customize the appearance of the front page. I am using nth-child(1) to target only the first slider-item, which contains the name and description of the timeline which have been defined in the JSON data source.

/* Customizing the first slide - the cover */

#timeline .slider-item:nth-child(1) h2{
	font:normal 70px/1 'Antic Slab','Segoe UI',sans-serif;
	background:rgba(0,0,0,0.3);
	white-space: nowrap;
	padding:10px 5px 5px 20px;
	position:relative;
	right:-60px;
	z-index:10;
}

#timeline .slider-item:nth-child(1) p i{
	font:normal normal 40px 'Dancing Script','Segoe UI',sans-serif;
	background:rgba(0,0,0,0.3);
	white-space: nowrap;
	padding:5px 20px;
	position:relative;
	right:-60px;
	z-index:10;
}

#timeline .slider-item:nth-child(1) p .c1{
	color:#1bdff0;
}

#timeline .slider-item:nth-child(1) p .c2{
	color:#c92fe6;
}

#timeline .slider-item:nth-child(1) .media-container {
	left: -30px;
	position: relative;
	z-index: 1;
}

#timeline .slider-item:nth-child(1) .credit{
	text-align: center;
}

The only thing left is to open up timeline.psd that is bundled with the download of the plugin, and change the color of some of the icons in photoshop. I have included the necessary files in the zip download for this tutorial. With this our timeline portfolio is complete!

Done!

You can use this portfolio to display not only your recent projects, but also interests and important moments of your career. Share your thoughts and suggestions in the comment section.

Making a Flickr-powered Slideshow

Martin Angelov — Mon, 21 Feb 2011 13:28:24 +0000

Today we will be developing a jQuery plugin that will make it easy to create slideshows, product guides or presentations from your Flickr photo sets. The plugin will be using Flickr’s APIs and YQL to fetch the photos in the sets, after which it will create the markup of the slideshow and listen for events.

Updated on Oct 11th 2011: Due to a change in Flickr’s API, you are now required to provide an API key when requesting the photos in a set. The script and this tutorial were updated to reflect this change. If you have downloaded this script before, replace jqFlick.js and script.js. You will also need to generate a Flickr API key (as explained in the tutorial) and paste it in script.js.

The HTML

Before starting with jqFlick (the name of our plugin), lest first lay down the HTML structure of the underlying document. I am including the plugin’s CSS stylesheet – jqFlick.css, which we will be creating in the next step, and the plugin’s js file – jqFlick.js.

index.html





jqFlick - Flickr Micro Slider Plugin | Tutorialzine Demo









	Flickr Powered Micro Slider

	

	More demos:

Additionally, we have styles.css, which styles the page itself, and script.js, which calls the plugin. Also, we have a select element with demos of three different configurations of the plugin. We will come back to this in a moment.

The other important element in the fragment above is the #flickrSlider div, which is going to be populated with the slider’s HTML by the jqFlick plugin:

Generated Code

The #flickrSlider div is assigned a class name – .flickrSliderHolder, a width and a height. Inside it we have an unordered list with the slides, an arrow div holder with previous and next arrows, and a span for the captions. The unordered list is set to be wide enough to accommodate the LIs side by side. The slide animation is achieved by animating the left property of the UL.

Flickr Slideshow jQuery Plugin

The CSS

We need to provide the plugin with its own stylesheet, so it is easier to include into a website. This stylesheet must only affect the markup generated by the plugin, and we have to make sure it does not corrupt any other elements on the page. To achieve this, we are going to prefix the styles with the .flickrSliderHolder class name, assigned to the slideshow holder by the plugin.

jqFlick.css

.flickrSliderHolder{
	position:relative;
	overflow:hidden;
}

.flickrSliderHolder ul{
	position:absolute;
	height:100%;
	list-style:none;
}

.flickrSliderHolder ul li{
	float:left;
	height:100%;
	background-repeat:no-repeat;
	background-position:center center;
}

.flickrSliderHolder .arrows{
	position:absolute;
	right:0;
	bottom:0;
}

.flickrSliderHolder .arrows a{
	width:22px;
	height:22px;
	float:left;
	background:url('arrows.png') no-repeat top left;
	text-decoration:none;
	outline:none;
	border:none;
}

.flickrSliderHolder a.previous:hover{
	background-position:left bottom;
}

.flickrSliderHolder a.next{
	margin-left:-1px;
	background-position:top right;
}

.flickrSliderHolder a.next:hover{
	background-position:bottom right;
}

.flickrSliderHolder .caption{
	font-size:13px;
	line-height: 22px;
	position:absolute;
	bottom:0;
	left:0;
}

Once called, jqFlick assigns the .flickrSliderHolder class to the slider holder div, and generates the markup that we saw in the previous step. The code above styles the arrows, caption, unordered list and the container.

Perfect for Slideshows, Product Guides and Presentations

The jQuery Code

Starting with the jQuery section, lets first see what a response from the Flickr API looks like:

Sample YQL Response

{
    "query": {
        "count": 3,
        "created": "2011-02-19T20:11:18Z",
        "lang": "en-US",
        "results": {
            "photo": [{
                "farm": "6",
                "id": "5456788328",
                "isprimary": "1",
                "secret": "e9eddccf8e",
                "server": "5213",
                "title": "The title of the image becomes an optional caption."
            }, {
                "farm": "6",
                "id": "5456179165",
                "isprimary": "0",
                "secret": "28bae85307",
                "server": "5216",
                "title": "There are no limits really."
            }, {
                "farm": "6",
                "id": "5456179233",
                "isprimary": "0",
                "secret": "e05287691f",
                "server": "5018",
                "title": "What more do you need.."
            }]
        }
    }
}

Here I’ve selected the photos that are contained in this photoset. The response contains useful information about the images. We are going to use the farm, id, secret, and server properties of these objects to put together the URL at which the photos are located, while the title properties are going to be used as captions.

You can find your photos at the following address, by replacing the keywords with the objects’ values:

http://farm{FARM}.static.flickr.com/{SERVER}/{ID}_{SECRET}.jpg

In our plugin, we will be using Flickr’s API method for listing photos in a photoset. However, to communicate with Flickr’s APIs, we will need to register for an API key.

API key registration

This step is actually quite simple. You need to have a valid Flickr registration and visit this page. After you choose the type of the registration (non commercial in our case), you fill in the application details. You now get your API key, which you will need in a second.

For more info on the various Flickr APIs you can go to their documentation page. If you would like to know more about the URL addresses of their photos (including info on how to fetch different image sizes) see here. You can also read more about YQL in our previous YQL tutorials.

Now we are ready to write the jQuery code. As you know, encapsulating jQuery functionality in a plugin has many benefits, as you can read from our jQuery plugin tutorial. Lets see what jqFlick.js, the main plugin file, looks like:

jqFlick.js

(function($){

	$.fn.jqFlick = function(options){

		// Default options:

		options = $.extend({
			width:500,
			height:500,
			maxFetch:50,
			captions:false,
			autoAdvance:false,
			advancePeriod:5000,
			apiKey:''
		},options);

		// Using YQL and the flickr.photosets.photos table to query the Flickr API.

		var YQL = 'http://query.yahooapis.com/v1/public/yql?q={QUERY}&format=json&callback=?',
			query = "SELECT * FROM flickr.photosets.photos({MAX}) WHERE photoset_id='{PHOTOSET}'"+
				" AND api_key='{KEY}'";

		// Replacing the "{EXAMPLE}" keywords from the strings:

		YQL = templateReplace(YQL,{
			"query": encodeURIComponent(
				templateReplace(query,{
					photoset : options.photosetID,
					max	: options.maxFetch,
					key	: options.apiKey
				}
			))
		});

		// Template for building Flickr's image URLs:

		var flickrSRC = 'http://farm{FARM}.static.flickr.com/{SERVER}/{ID}_{SECRET}.jpg',
			flickrSlider = this;

		flickrSlider.trigger('jqFlickRemove');

		// Fetching the images using Flickr's API:

		$.getJSON(YQL,function(r){
			if(!r || !r.query || !r.query.count){
				throw "There is no such photoset!";
			}

			var currentPos = 1,
				cnt = r.query.count;

			var caption = $('',{
				className: 'caption'
			}).appendTo(flickrSlider);

			var ul = $('',{
				css:{
					width: options.width*r.query.count,
					height:options.height
				}
			});

			// Looping through the photo results:

			$.each(r.query.results.photo,function(){
				data = this;

				// Creating a new LI element with the photo as its
				// centered background image:

				$('',{
					css : {
						backgroundImage: 'url('+templateReplace(flickrSRC,data)+')',
						width: options.width
					}
				}).appendTo(ul);
			});

			flickrSlider.addClass('flickrSliderHolder')
						.width(options.width)
						.height(options.height+25)
						.append(ul);

			// Binding a custom "slide" event.
			// You can then flickrSlider.trigger("slide",2)
			// to go to the second slide:

			flickrSlider.bind('slide',function(e,slide){
				if(slide < 1 || slide > cnt || ul.is(':animated')){
					return false;
				}

				ul.animate({
					left:-(slide-1)*options.width
				},{
					easing: 'easeInOutCirc',
					duration: 300
				});

				if(options.captions){

					// Animating the transition between
					// the captions (if enabled):

					caption.fadeOut(150,function(){
						caption.html(r.query.results.photo[slide-1].title);
					}).fadeIn(150);
				}

				currentPos = slide;
			});

			var arrows = $('',{
				className: 'arrows'
			});

			// Creating the previous / next arrows, and
			// binding event listeners for the click events:

			var arrowPrev = $('',{
				className: 'previous',
				href: '#',
				click : function(){
					var toShow = currentPos - 1;
					if(toShow < 1){
						toShow = cnt;
					}

					flickrSlider.trigger('slide',[toShow]);
					return false;
				}
			}).appendTo(arrows);

			var arrowNext = $('',{
				className: 'next',
				href: '#',
				click : function(){
					var toShow = currentPos + 1;
					if(toShow > cnt){
						toShow = 1;
					}

					flickrSlider.trigger('slide',[toShow]);
					return false;
				}
			}).appendTo(arrows);

			arrows.appendTo(flickrSlider);

			// Showing the first slide by default:

			flickrSlider.trigger('slide',[1]);

			if(options.autoAdvance){

				// If auto advance is enabled, listen for
				// the load event and schedule a periodic slide change.
				//
				// Read more here:
				// http://tutorialzine.com/2011/01/how-to-make-auto-advancing-slideshows/

				$(window).load(function(){

					$.fn.jqFlick.timeOut = null;

					arrowPrev.add(arrowNext).click(function(e,simulated){
						if(!simulated){
							clearTimeout($.fn.jqFlick.timeOut);
						}
					});

					(function autoAdvance(){
						if($.fn.jqFlick.timeOut){
							arrowNext.trigger('click',[true]);
						}
						$.fn.jqFlick.timeOut = setTimeout(autoAdvance,options.advancePeriod);
					})();
				});
			}
		});

		// This custom event removes all event listeners,
		// and empties the slider holder:

		flickrSlider.bind('jqFlickRemove',function(){
			if($.fn.jqFlick.timeOut){
				clearTimeout($.fn.jqFlick.timeOut);
			}

			flickrSlider.empty().unbind('jqFlickRemove slide');

		});

		return flickrSlider;

	};

	// Helper function for replacing "{KEYWORD}" with
	// the respectful values of an object:

	function templateReplace(template,data){
		return template.replace(/{([^}]+)}/g,function(match,group){
			return data[group.toLowerCase()];
		});
	}

	// A custom easing functon. For more info visit:
	// http://gsgd.co.uk/sandbox/jquery/easing/

	$.easing.easeInOutCirc = function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
		return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
	};

})(jQuery);

jqFlick takes an options object as its only parameter. You are required to specify the id of the photoset (the photosetID property), which you can easily copy from the address bar of your web browser while viewing the photoset. Only public photosets can be shown by the jqFlick.

Now lets see how the plugin is called. At the top of this file, you will need to paste your Flickr API key that we generated above:

js/script.js

$(document).ready(function(){

	// Paste your Flickr API key here
	var apiKey = '';

	// Creating a flickr slider. This is
	// how you would probably use the plugin.

	$('#flickrSlider').jqFlick({
		photosetID: '72157625956932639',
		width:500,
		height:320,
		autoAdvance:true,
		apiKey:apiKey
	});

	// Creating different flickr sliders,
	// depending on the select element value.

	$('select').change(function(){

		var options = {};

		switch(this.value){
			case '1':
				options = {
					photosetID: '72157625956932639',
					width:500,
					height:320,
					captions:true,
					autoAdvance:true,
					apiKey:apiKey
				};
				break;
			case '2':
				options = {
					photosetID:'42296',
					width:500,
					height:500,
					captions:true,
					autoAdvance:true,
					apiKey:apiKey
				};
				break;
			case '3':
				options = {
					photosetID:'72157625961099915',
					width:200,
					height:150,
					apiKey:apiKey
				}
		}

		$('#flickrSlider').jqFlick(options);
	});

});

In the switch statement above, I am listening for the change event of the select dropdown. There, depending on the value of the select, I assign different options objects, which are then passed to the plugin. This demonstrates the different options that are available without taking much screen space.

With this our Flickr-powered Slideshow is complete!

Conclusion

You can use this plugin to build slideshows, product guides or presentations. To use the plugin you just need to drop the jqFlickr folder to your website root and include jqFlick.css and jqFlick.js in your HTML documents.

Dynamic FAQ Section w/ jQuery, YQL & Google Docs

Martin Angelov — Wed, 11 Aug 2010 15:22:49 +0000

In this tutorial, we are making a dynamic FAQ section. The script, with the help of jQuery & YQL, will pull the contents of a shared spreadsheet in your Google Docs account, and use the data to populate the FAQ section with questions and answers.

The best aspect of this solution, is that you can change the contents of the FAQ section from within Google Docs – just edit the spreadsheet. You can even leverage the rest of Google Docs’ features, such as collaborative editing. This way, a small team can support the FAQ section without the need of a dedicated CMS solution.

Thanks to Chris Ivarson for designing the Google Docs icon, used in the featured illustration of this tutorial.

Google Docs

Before starting work on the FAQ section, we first need to create a new Google Docs Spreadsheet. As you probably already have an account with Google (if not, create one), we’ll move straight to the interesting part.

In a blank spreadsheet, start filling in two columns of data. The first column should contain the questions, and the second one the answers, that are going to become entries in your FAQ section. Each FAQ goes on a separate line. You can see the one that I created here.

After this, click Share > Publish as webpage and choose CSV from the dropdown list. This will generate a link to your spreadsheet in the form of a regular CSV file, which we will use later.

The HTML

The first step in developing the script is the markup. The #page div is the main container element. It is the only div with an explicit width. It is also centered in the middle of the page with a margin:auto, as you will see in the CSS part of the tut.

faq.html














    
    	Frequently Asked Questions
        Expand

The stylesheet is included in the head of the document, and the jQuery library and our script.js are included at the bottom. All of these are discussed in detail in the next sections of this tutorial.

The #headingSection contains the h1 heading, and the expand/collapse button. After it comes the #faqSection div, where the FAQ entries are inserted after jQuery fetched the contents of your Google Docs Spreadsheet.

The FAQ entries are organized as a definition list structure (dl). This is one of the least used HTML elements, but is perfect for our task. Here is how it looks once jQuery adds it to the page.

faq.html


    How does this FAQ section work?
    With the help of jQuery and YQL, this script pulls the latest data ..

    Can you modify it?
    This is the best part of it - you can change the contents ..

The dl element holds a dt for each question and a dd for each answer. The dd elements are hidden with display:none, and are only shown with a slideDown animation once the respective dt is clicked.

Dynamic FAQ Section

The CSS

The styles, (held in styles.css) are pretty straightforward and self-explanatory. As mentioned above, only the #page div, which acts as the main container, is explicitly assigned a width. It is also centered in the middle of the page with an auto value for the left/right margins.

styles.css – Part 1

#page{
	width:753px;
	margin:50px auto;
}

#headingSection{
	background-color:#7b8b98;
	padding:40px;
	padding-left:60px;
	position:relative;
	border:1px solid #8b9ba7;
	border-bottom:none;
}

#faqSection{
	background:url('img/faq_bg.jpg') repeat-y #fff;
	padding:20px 90px 60px 60px;
	border:1px solid white;
	text-shadow:1px 1px 0 white;
}

h1{
	color:#fff;
	font-size:36px;
	font-weight:normal;
}

/* The expand / collapse button */

a.button{
	background:url('img/buttons.png') no-repeat;
	width:80px;
	height:38px;
	position:absolute;
	right:50px;
	top:45px;
	text-indent:-9999px;
	overflow:hidden;
	border:none !important;
}

a.button.expand:hover{ background-position:0 -38px;}
a.button.collapse{ background-position:0 -76px;}
a.button.collapse:hover{ background-position:0 bottom;}

We are using a single anchor tag for both the expand and the collapse button, by assigning it either the expand or the collapse CSS class. These classes determine which parts of the background image are offset into view. The background image itself is four times the height of the button, and contains a normal and a hover state for both the expand and collapse button versions.

styles.css – Part 2

/* Definition Lists */

dt{
	color:#8F9AA3;
	font-size:25px;
	margin-top:30px;
	padding-left:25px;
	position:relative;
	cursor:pointer;
	border:1px solid transparent;
}

dt:hover{ color:#5f6a73;}

dt .icon{
	background:url('img/bullets.png') no-repeat;
	height:12px;
	left:0;
	position:absolute;
	top:11px;
	width:12px;
}

dt.opened .icon{ background-position:left bottom;}

dd{
	font-size:14px;
	color:#717f89;
	line-height:1.5;
	padding:20px 0 0 25px;
	width:580px;
	display:none;
}

When a definition title (dt) is clicked, its respective dd is expanded into view (as you will see in the next section). With this, the dt is also assigned an opened class. This class helps jQuery determine which FAQ’s are opened, and in the same time affects the styling of the small bullet on the left of the title.

FAQ expanded

The jQuery

Moving to probably the most interesting part of the tutorial. If you’ve been following the tutorials on this site, you’ve probably noticed that YQL finds its way into a lot of the tutorials here. The main reason behind this, is that YQL makes possible for developers to use it as a proxy for a wide range of APIs, and implement a diverse functionality entirely in JavaScript.

Today we are using YQL to fetch our Google Spreadsheet as CSV and parse it, so that it is available as a regular JSON object. This way, we end up with a free and easy to update data storage for our simple app.

script.js

$(document).ready(function(){

	// The published URL of your Google Docs spreadsheet as CSV:
	var csvURL = 'https://spreadsheets.google.com/pub?key='+
			'0Ahe1-YRnPKQ_dEI0STVPX05NVTJuNENhVlhKZklNUlE&hl=en&output=csv';

	// The YQL address:
	var yqlURL =	"http://query.yahooapis.com/v1/public/yql?q="+
			"select%20*%20from%20csv%20where%20url%3D'"+encodeURIComponent(csvURL)+
			"'%20and%20columns%3D'question%2Canswer'&format=json&callback=?";

	$.getJSON(yqlURL,function(msg){

		var dl = $('');

		// Looping through all the entries in the CSV file:
		$.each(msg.query.results.row,function(){

			// Sometimes the entries are surrounded by double quotes. This is why
			// we strip them first with the replace method:

			var answer = this.answer.replace(/""/g,'"').replace(/^"|"$/g,'');
			var question = this.question.replace(/""/g,'"').replace(/^"|"$/g,'');

			// Formatting the FAQ as a definition list: dt for the question
			// and a dd for the answer.

			dl.append(''+
			question+'
'+answer+'');
		});

		// Appending the definition list:
		$('#faqSection').append(dl);

		$('dt').live('click',function(){
			var dd = $(this).next();

			// If the title is clicked and the dd is not currently animated,
			// start an animation with the slideToggle() method.

			if(!dd.is(':animated')){
				dd.slideToggle();
				$(this).toggleClass('opened');
			}

		});

		$('a.button').click(function(){

			// To expand/collapse all of the FAQs simultaneously,
			// just trigger the click event on the DTs

			if($(this).hasClass('collapse')){
				$('dt.opened').click();
			}
			else $('dt:not(.opened)').click();

			$(this).toggleClass('expand collapse');

			return false;
		});

	});
});

It may not be clear from the code above, but jQuery sends a JSONP request to YQL’s servers with the following YQL query:

SELECT * FROM csv
WHERE url='https://spreadsheets.google.com/...'
AND columns='question,answer'

CSV is a YQL table, which takes the URL of a csv file and a list of column names. It returns a JSON object with the column names as its properties. The script then filters them (stripping off unnecessary double quotes) and inserts them as a definition list (DL) into the page.

With this our dynamic FAQ section is complete!

Customization

To use this script with your own spreadsheet, you only need to edit the csvURL variable in script.js, and replace it with the CSV URL of your spreadsheet. You can obtain this address from Share > Publish as webpage > CSV dropdown. Also, be aware that when you make changes to the spreadsheet, it could take a few minutes for the changes to take effect. You can speed this up by clicking the Republish now button, found in the same overlay window.

Obtaining the CSV URL

Final Words

You can use the same technique to power different kinds of dynamic pages. However, this implementation does have its shortcomings. All the content is generated with JavaScript, which means that it will not be visible to search engines.

To guarantee that your data will be crawled, you can take a different route. You could use PHP, or other back-end language, to fetch and display the data from YQL in a fixed interval of time – say 30 minutes (or even less frequently, if you don’t plan to update the data often).

Be sure to share your suggestions in the comment section below.

Making Your First Google Chrome Extension

Martin Angelov — Wed, 09 Jun 2010 12:53:55 +0000

The Google Chrome web browser is slowly growing in popularity. This is no surprise, as it is a great browser, and is backed by no other than Google. It also provides great tools for web developers and I find myself using it more and more (actually Firebug is the only thing keeping me from crossing to the other side).

With the introduction of extensions, Google Chrome became even more agile and powerful.

In this tutorial, we are going to create a simple extension, which puts a small icon next to Chrome’s address bar, and, when clicked, will fetch Tutorialzine’s RSS feed and display a fancy preview of our latest tutorials.

[By the way, we just launched ZineScripts! Use this Promo Code for a 10% discount: google-chrome-tut-93a2]

First a few words about extensions.

How Extensions Work

Extensions in Google Chrome are basically webpages. You have javascript files, stylesheets and images. You can even use JavaScript libraries like jQuery.

The extensions are, however, treated a bit differently than your regular webpage, which is displayed in the browser. You can have access to all the opened tabs, to the user’s browsing history, you can manipulate all the pages that are opened, send AJAX requests to any website and much more.

You also have the benefit (or the limitation) that your extension runs only on one browser. You can forget all compatibility issues and embrace Google Chrome’s hot new HTML5 features.

Tutorialzine's Google Chrome Extension

Developing extensions

Extension are packed in a .crx file (arenamed zip file) but during development, you can map your working folder as an extension. This way you can quickly change and deploy code without the need of repackaging.

This is done by opening the extension page (type chrome://extensions/ in the address bar, or click Wrench icon > Extensions), and clicking Developer mode > Load unpacked extension.. on the page. After you make a change to the extension, just hit the Reload link below it.

After you’re done developing, click Pack extension.. and a crx file will be created for you. You can serve this file from your site and enable your site’s visitors to install it.

Google Chrome is by far the easiest browser to make extensions for, as you will see from the steps below.

A note about debugging: To debug your extension, right-click on your extension’s icon, next to the address bar, and choose Inspect popup. You can also check out this tutorial.

Step 1 – Manifest.json

The first step in creating an extension, is mapping a folder on your hard drive as an extension (as explained the above). You are going to put all your files in this folder.

The only thing required from your extension by Chrome, is the manifest.json file. This is a text file, which holds configuration settings in the form of a json object.

Here is the one we are going to use:

manifest.json

{
	"name": "Tutorialzine Extension",
	"version": "1.0",
	"description": "Making your first Google Chrome extension.",
	"browser_action":	{
		"default_icon": "icon.png",
		"popup": "tutorialzine.html"
	},

	"icons":{
		"128":"icon_128.png"
	}
}

In this file we are specifying the name of the extension and a number of other options, such as browser actions and permissions.

In browser_actions, we put settings that are in relation with the browser window. The popup property tells Chrome, that we are going to show tutorialzine.html as a popup. There are a number of settings you can put in browser_actions. You can read more on Google Chrome’s Extension documentation.

For this extension we do not need access to currently opened pages, nor manipulating tabs and windows. If we needed those, however, we would need to include a permissions property, with the addresses of the pages.

For more information about the manifest file, refer to Google Chrome’s documentation.

Step 2 – HTML 5

As mentioned above, we told Chrome that tutorialzine.html is going to be opened as a popup. This is a regular html file, complete with stylesheets and js files.

And as Google Chrome has a really good support for HTML5, we can code tutorialzine.html in it. You could, however, use any HTML version you normally code your sites with.

tutorialzine.html

 

 


 
 





Latest Tutorials on Tutorialzine

As you can see, we are addressing the css and js files directly. Chrome will include them for us. Just as if we are working on a regular webpage.

Step 3 – CSS3

As the extension is rendered Google Chrome, we do not need to limit ourselves with the least common denominator when it comes to CSS3 support. This is why we can afford to use fancy rules like -webkit-box-reflection and -webkit-gradient.

styles.css – Part 1

*{
	margin:0;
	padding:0;
}

body{
	/* Setting default text color, background and a font stack */
	font-size:12px;
	color:#666;

	/* A webkit gradient: */
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEE), to(#DDD));

	text-shadow:1px 1px 0 white;
	font-family:Arial, Helvetica, sans-serif;
	overflow-x:hidden;
}

.tutorial{
	width:500px;
	padding:10px 20px;
	margin-bottom:10px;
}

img{
	width:100px;
	height:100px;
	float:left;

	/* Webkit CSS3 Reflection */
	-webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.75, transparent), to(rgba(255, 255, 255, 0.3))) 0 0 0 0 stretch stretch;
}

-webkit-box-reflect creates a pure CSS reflection under the thumbnail images. It takes a number of parameters to generate the reflection – position of the reflection, offset from the bottom of the image, and a mask (which is defined with a gradient).

styles.css – Part 2

p,a{
	padding:10px 0 0 120px;
	display:block;
}

a,a:visited{
	color:#09F;
	text-decoration:none;
}

a:hover{
	text-decoration:underline;
}

h1{
	/* Webkit gradient: */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEE), to(#DDD));

	border-bottom: 1px solid #F0F0F0;
	font-size: 24px;
	font-weight: normal;
	margin-bottom: 30px;
	padding: 30px 0px;
	text-align: center;
	text-shadow: white 0px 1px 1px;
}

h2{
	font-size:24px;
	font-weight:normal;
	right:40px;
	padding-left:120px;
}

h1,h2{
	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}

In the second part of the code we are also using a gradient, but this time as a background for the h1 element.

CSS3 Reflections & Text Shadows

Step 4 – jQuery

The JavaScript is executed as if it was part of a regular web page. This means that we can include the jQuery library and define a $(document).ready() function as we would normally do in a web project.

Clicking the extension icon has the same effect for the scripts on the page, as opening the page in a browser.

Inside $(document).ready(), we fetch the latest results from Tutorialzine’s RSS feed, with the help of Yahoo’s YQL API. We’ve used this API a couple of times before, here on Tz. It allows us to use an SQL-like syntax to fetch data in a JSON format.

After fetching the data, we generate the HTML markup and include it in tutorialzine.html. We also save it to localStorage as a simple caching solution. localStorage is a simple way to save persistent data (it survives between page loads). This makes the experience of using the extension a lot faster.

script.js

$(document).ready(function(){

	var query = "SELECT * FROM feed WHERE url='http://feeds.feedburner.com/Tutorialzine' LIMIT 2";

	// Storing the seconds since the epoch in now:
	var now = (new Date()).getTime()/1000;

	// If there is no cache set in localStorage, or the cache is older than 1 hour:
	if(!localStorage.cache || now - parseInt(localStorage.time) > 1*60*60)
	{
		$.get("http://query.yahooapis.com/v1/public/yql?q="+encodeURIComponent(query)+"&format=json&callback=?",function(msg){

			// msg.query.results.item is an array:
			var items = msg.query.results.item;
			var htmlString = "";

			for(var i=0;i\
								'+tut.description+'\
								Read more\
								';
			}

			// Setting the cache
			localStorage.cache	= htmlString;
			localStorage.time	= now;

			// Updating the content div:
			$('#content').html(htmlString);
		},'json');
	}
	else{
		// The cache is fresh, use it:
		$('#content').html(localStorage.cache);
	}
});

In localStorage we also store a timestamp. We use it to determine how old the cache in localStorage is. If it is older than an hour, we ignore it and fetch the data again.

Here is a sample of the data that is returned from YQL.

{
	"query": {
		"count": "1",
		"created": "2010-06-09T12:02:33Z",
		"lang": "en-US",
		"results": {

			"item": {
				"title": "Neon Text Effect With jQuery & CSS",
				"link": "http://feedproxy.google.com/..",

				"comments": [
					"http://tutorialzine.com/2010/06/neon-text-effect..",
					"11"
				],

				"pubDate": "Tue, 01 Jun 2010 20:11:54 +0000",
				"creator": "Martin Angelov",

				"category": [
					"CSS",
					"jQuery"
				],

				"guid": {
					"isPermaLink": "false",
					"content": "http://tutorialzine.com/?p=925"
				},

				"description": "In this combined design and coding tutorial..",
				"commentRss": "http://tutorialzine.com/2010/06/neon-text-e..",
				"origLink": "http://tutorialzine.com/2010/06/neon-text-eff.."

			}
		}
	}
}

This structure is made available to us in the msg variable on line 11 of script.js.

With this your first Google Chrome extension is complete!

Conclusion

You can read more about extensions (including advanced features not covered in this tutorial) on Google Chrome’s Extension documentation page. I hope that this tutorial has given you a great start in extending the browser’s functionality.

What do you think? Would you make a Chrome extension for your website?

Combined Facebook, Twitter & RSS Social Stats with jQuery, PHP & YQL

Martin Angelov — Wed, 19 May 2010 21:50:43 +0000

As we increasingly depend on more and more social services, there rises the need to provide a simple way to let our website visitors take part of our diverse social presence.

In this tutorial we are going to create a simple widget, which combines the number of your RSS readers, twitter followers, and fans of your facebook fan page, to give a rough estimate of your social popularity.

We are using jQuery and the tipTip plugin, object-oriented PHP, and Yahoo’s YQL, while demonstrating a number of interesting web development techniques.

Update: Facebook has made a minor change in their API which prevented this script from fetching the page fan count. This is now fixed and you can download the script again.

Step 1 – PHP

YQL is a free Yahoo web service, which enables us to communicate with numerous third-party APIs through a consistent SQL-like language (and hence the name). It is basically a gateway that sits between you and the other APIs.

This is especially important here, as we are using Yahoo’s YQL for three very different tasks:

Fetch your RSS subscriber count with FeedBurner’s awareness API (which comes in the form of an XML file that has to be parsed).
Note: You have to enable the awareness API to use this widget with your own feed. This is done from the Publicize Tab on your feed settings page;
Use twitter’s API to get your number of followers;
Use Facebook’s new Graph API (link) to get information about the number of fans of your facebook fanpage.

If it weren’t for YQL, we’d have to research and implement three very different solutions, which would slow us down significantly.

includes/subscriber_stats.class.php

class SubscriberStats{

	public	$twitter,$rss,$facebook;
	public	$services = array();

	public function __construct($arr){

		$this->services = $arr;

		$yqlQueries = array();

		// Forming the Feedburner Awaraness API URL from the passed feed URL:
		$feedBurnerAwarenessAPI = 'http://feedburner.google.com/api/awareness'.
		'/1.0/GetFeedData?uri='.end(split('/',trim($arr['feedBurnerURL'],'/')));

		// Building an array with queries:

		if($arr['feedBurnerURL'])
			$yqlQueries[] = '
				SELECT * FROM xml
				WHERE url=\''.$feedBurnerAwarenessAPI.'\'
			';

		if($arr['twitterName'])
			$yqlQueries[] = '
				SELECT * FROM twitter.user.profile
				WHERE id=\''.$arr['twitterName'].'\'
			';

		if($arr['facebookFanPageURL'])
			$yqlQueries[] = '
			SELECT likes FROM facebook.graph
			WHERE id=\''.end(split('/',trim($arr['facebookFanPageURL'],'/'))).'\'
			';

		// Combing them into a YQL multiquery:
		$multiQuery =
		'SELECT * FROM query.multi WHERE queries = "'.join(';',$yqlQueries).'"';

		// Executing the query:
		$result = json_decode(
			file_get_contents('http://query.yahooapis.com/v1/public/yql?q='.
			urlencode($multiQuery).'&format=json&diagnostics=false&'
			'amp;env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys')
		)->query->results->results;

		// The results from the queries are accessible in the $results array:

		$this->rss = $result[0]->rsp->feed->entry->circulation;
		$this->twitter = $result[1]->item->meta[5]->content;
		$this->facebook = $result[2]->json->fan_count;
	}

	public function generate(){

		$total = number_format($this->rss+$this->twitter+$this->facebook);

		echo '
			
				'.$total.'

				
					
					
				

				
					
					
				

				
				
					
				
			
		';
	}
}

When we create an object of this class, the construct method is called, and a YQL query is created and executed.

To request the data from YQL’s servers, we just use file_get_contents() with the query passed as a parameter of the URL address. This returns a JSON object (basically a JavaScript object) which we can decode into a native PHP array with the in-build json_decode() function.

The results of these queries are saved locally and are made available for use in the generate() method which renders all the needed markup.

And now lets see how this class is used:

subscriber_count.php

require "includes/subscriber_stats.class.php";

$cacheFileName = "cache.txt";

// IMPORTANT: after making changes to this file (or the SubscriberStats class)
// remeber to delete cache.txt from your server, otherwise you wont see your changes.

// If a cache file exists and it is less than 6*60*60 seconds (6 hours) old, use it:

if(file_exists($cacheFileName) && time() - filemtime($cacheFileName) > 6*60*60)
{
	$stats = unserialize(file_get_contents($cacheFileName));
}

if(!$stats)
{
	// If no cache was found, fetch the subscriber stats and create a new cache:

	$stats = new SubscriberStats(array(
		'facebookFanPageURL'	=> 'http://www.facebook.com/smashmag',
		'feedBurnerURL'			=> 'http://feeds.feedburner.com/Tutorialzine',
		'twitterName'			=> 'Tutorialzine'
	));

	// Serialize turns the object into a string,
	// which can later be restored with unserialize():

	file_put_contents($cacheFileName,serialize($stats));
}

//	You can access the individual stats like this:
//	$stats->twitter;
//	$stats->facebook;
//	$stats->rss;

//	Output the markup for the stats:

$stats->generate();

Sending a query to YQL’s servers and receiving a response is a relatively slow process and would be unwise to request the same information on every page load (not to mention that we could get banned from the API for abuse).

This is why we implement a simple caching system. The idea is simple: if a cache file does not exist (or is older than 6 hours), connect to YQL, create a new cache file and output the XHTML markup. Otherwise, just read the cache and output directly. This way we send a request to the API only once every six hours which is perfect for any practical purposes.

Combined Social Media Followers Count

Step 2 – XHTML

As mentioned in the PHP section above, the generate() method renders all the XHTML markup used to display the stats. Here is what the generated code looks like:

sample code

This code is fetched via AJAX and displayed on the page. Notice the title attributes. They are used as the contents of the fancy tooltips which are created by jQuery and the tipTip plugin, which we will discuss in a moment.

Step 3 – CSS

The CSS code is also quite simple and straightforward. The subscriberStats is the main outer div, inside it we have a number of .socialIcon divs and the subscrberCount.

css/styles.css

.subscriberStats{
	height:35px;
	padding:5px;
	width:220px;
}

.socialIcon{
	float:left;
	height:32px;
	width:32px;
}

a img{
	border:none;
}

.subscriberCount{
	border-bottom:1px dotted #CCCCCC;
	color:#999999;
	float:left;
	font-size:28px;
	line-height:32px;
	margin-right:10px;
}

#main{
	height:100px;
	margin:140px auto 50px;
	position:relative;
	width:200px;
}

All of these are floated to the left. Also notice that we disable the borders on the icon images on line 14, which are displayed by default and ruin your design.

Step 4 – jQuery

After including the jQuery library to the page, we just need to listen to the $(document).ready event, which is executed when all the markup of the page is accessible (this happens before things like images are loaded and comes earlier than the onload event).

js/script.js

$(document).ready(function(){

	// Using the load AJAX method to fetch the subscriber markup
	// from subscriber_count.php:

	$('#main').load('subscriber_count.php',function(){

		// Once loaded, convert the title attributes to tooltips
		// with the tipTip jQuery plugin:

		$('.subscriberStats div').tipTip({defaultPosition:'top'});
	})

});

#main is the div where we want to insert the stats. This could be your sidebar or website header. The load method fetches the markup from suscriber_count.php and displays it on the page. The callback function is called after this and all the div titles are replaced with fancy tooltips by the tipTip plugin.

With this our combined social stats widget is complete!

Conclusion

With services like YQL working with third party APIs is a charm. Not only it provides a common interface to a sea of technologies, but it also guarantees that you will be able to access to the services you want even as the underlying APIs change overtime.

What do you think? How would you improve this code?

Making a Sleek Feed Widget With YQL, jQuery & CSS3

Martin Angelov — Tue, 09 Feb 2010 16:08:21 +0000

You will be surprised at how much data is made available on the web through RSS or ATOM feeds – twitter searches, your latest diggs, Google Search alerts, your own blog categories and so much more. You just have to look for that orange icon and you’ll surely find a lot more precious data, just waiting to be put into use.

Today we are making a sleek feed widget, that will fetch any feed and display it in your blog sidebar. You can set it up to show the latest posts from the different categories of your blog, your latest stumbles, or even people mentioning you on twitter.

So go ahead, download the demo archive from the button above, and keep on reading..

Problem Solving

Before stepping into development, we have to clarify for ourselves what we are aiming for, discuss some potential problems, and their solutions.

Problem 1 – Fetching Feeds

The widget is entirely front-end based, so we have to find a way to fetch the feeds directly with JavaScript. AJAX is a great technology, but there are security restrictions that limit it to fetching data only from the current domain. This means we cannot access feeds directly and display them.

This is where YQL comes along. It fetches the feed we want, and makes it available to our script as a regular JSON object that we can later loop and print to the page.

YQL is a free API service from Yahoo, with which you can do much more than just download feeds. It acts as a gateway between you and other API’s and lets you manipulate them with a quick to learn SQL-like syntax (hence the name).

You can reed more about it in this tutorial on nettuts, or go to the official YQL page.

Setting up YQL to work is tricky though (we have to dynamically include a