Using the Vimeo API to create a badge for your blog

Over the last few weeks i’ve been looking into various Application interfaces including Vimeos which is fairly easy to get to grips with. Using JSON we can easily get a users profile details and latest videos uploaded on the site.

This is the code that gets the users details. First off we set the variable for the username in this case ‘ashleyford’ which is my account. We then need to set the variables to tell Vimeo which functions to call, and finally setup the urls for the callback functions.

 var vimeoUserName = 'ashleyford';
var userInfoCallback = 'userInfo';
var clipsCallback = 'showThumbs';
var userInfoUrl = 'http://www.vimeo.com/api/' + vimeoUserName + '/user_info.json?callback=' + userInfoCallback;
var clipsUrl = 'http://www.vimeo.com/api/' + vimeoUserName + '/clips.json?callback=' + clipsCallback;

Now we create the function to display the users information including getting the element ids to inject the content into the respective divs etc. Next we create the image tag for the users profile picture and the H2 tag for the the users name

	function userInfo(info) {
			var stats = document.getElementById('stats');

			var img = document.createElement('img');
			img.setAttribute('id', 'portrait');
			img.setAttribute('src', info.thumbnail_small);
			img.setAttribute('alt', info.display_name);
			stats.appendChild(img);

			var h2 = document.createElement('h2');
			h2.appendChild(document.createTextNode(info.display_name + ''s Videos On Vimeo'));
			stats.appendChild(h2);
			//Here we inject the data into the respective div ids.
			document.getElementById('bio').appendChild(document.createTextNode(info.bio));
			document.getElementById('videos').appendChild(document.createTextNode(info.total_videos_uploaded  +  ' Videos'));
			document.getElementById('likes').appendChild(document.createTextNode(info.total_videos_liked  + ' Likes'));
			document.getElementById('contacts').appendChild(document.createTextNode(info.total_contacts  + ' Contacts'));
		}

The rest of the code is pretty self explanatory and uses the same principle as the above, this just gets the images for the users videos.

	// This function goes through the clips and puts them on the page
		function showThumbs(clips) {
			var thumbs = document.getElementById('thumbs');
			thumbs.innerHTML = '';

			var ul = document.createElement('ul');
			thumbs.appendChild(ul);

			for (var i = 0; i < clips.length; i++) {
				var thumb = document.createElement('img');
				thumb.setAttribute('src', clips[i].thumbnail_medium);
				thumb.setAttribute('alt', clips[i].title);
				thumb.setAttribute('title', clips[i].title);

				var a = document.createElement('a');
				a.setAttribute('href', clips[i].url);
				a.setAttribute('target', clips[i], '_blank');
				a.appendChild(thumb);

				var li = document.createElement('li');
				li.appendChild(a);
				ul.appendChild(li);
			}
		}

		// This function loads the data from Vimeo
		function init() {
			var head = document.getElementsByTagName('head').item(0);

			var userJs = document.createElement('script');
			userJs.setAttribute('type', 'text/javascript');
			userJs.setAttribute('src', userInfoUrl);
			head.appendChild(userJs);

			var clipsJs = document.createElement('script');
			clipsJs.setAttribute('type', 'text/javascript');
			clipsJs.setAttribute('src', clipsUrl);
			head.appendChild(clipsJs);
		}

		// Call the function on page load
		window.onload = init;

The final piece of code to add to the page is the HTML in the Body section which contains our holder divs.

	<div id="vimeo">
  <div id="stats"></div>
  <p id="bio"></p>
  <div id="videos"></div>
  <div id="likes"></div>
  <div id="contacts"></div>
  <div class="clear"></div>
  <div id="thumbs">Loading videos...</div>
</div>