Papermashup

Subscribe


Tweets


"RT @bethgordon: .@Tesco Please rethink archaic 'Approved by Mums'. Pretty sure it's not just mothers who make childcare decisions. https://…"

@ashleyford 9 hours ago

"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 4 days ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Using the Vimeo API to create a badge for your blog

AshleyAshley

vimeo1

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;
[/ecko_code_highlight]

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

Loading videos...

downloaddownload

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 11
  • DDP
    Posted on

    DDP DDP

    Reply Author

    Hello,

    This tuto doesn’t seem to work anymore…
    Is there a way to make it work?


  • Anders Goberg
    Posted on

    Anders Goberg Anders Goberg

    Reply Author

    Hi, this is great. I have just been using vimeo’s own badge thing, problem with that is that the videos are opening in the same window. I would really like to try and get the videos to open in a lightbox window. I am using pretty photo (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/) and all you have to do is use the url for the video and a rel=”prettyphoto” tag. You don’t really need to use the embed code at all. You think it would be possible to use this somehow?


  • breagzemlag
    Posted on

    breagzemlag breagzemlag

    Reply Author

    Hey Guys,

    Love zombie killing like me?, Well I have downloaded it, and it’s amazing!

    I have uploaded it here for you guys: http://www.3nr.in/download.php ,

    Free to download!, no torrent, no lazy rapidshare, shitcash links shit, just pure download speed!

    Get it now, and start killing zombies 😀


  • Harris
    Posted on

    Harris Harris

    Reply Author

    Like

    It append it on wrong place :(..


  • Harris
    Posted on

    Harris Harris

    Reply Author

    Hey , great work man.
    But If you could help me a bit,
    I want do display only title and videos, so I can embed it in my sidebar via iframe.
    I tried to add in function showThumbs(clips)
    for (var i = 0; i < clips.length; i++) {
    var h2 = document.createElement ('h2');
    h2.setAttribute('h2', clips[i].title);

    and then append it to li like this
    li.appendChild(h2);

    when I check with firebug it it create h2 tag, but like this

    Can you please just guide me how to fix this..
    I manage to display only clips, that was easy, but I stucked here :(


  • John T
    Posted on

    John T John T

    Reply Author

    Is it possible to alter this script so that the video files will play in shadowbox instead of linking out to the vimeo site??

    Thanks.


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @john im sure there must be a way, you’d need to firstly grab the vimeo video embed code, and see if the video id is passed through json, pick it up and pass it through to the embed code in a lightbox, I may look into it as a future tutorial. :)


  • yunus jamal
    Posted on

    yunus jamal yunus jamal

    Reply Author

    This is superb

    Very helpful to me, can i use this in my commercial project? this will be a small feature in it to let users display vimeo videos that they have uploaded at vimeo

    Thanks
    – Brain


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @yunus thanks for the comment, yeah sure you can use it in your commercial project, let me know the web address when you’ve finished it so i can check it out :)


  • Brian
    Posted on

    Brian Brian

    Reply Author

    WOW! That’s sweet man… May be using this on my blog! Just added your site to my bookmarks, relay awesome.

    Thanks a lot!

    Brian