"RT @willfrancis: The ultimate near-miss of 2019."

@ashleyford 2 hours ago

"RT @bendhalpern: Client-side validation"

@ashleyford 7 days ago

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

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 = '' + vimeoUserName + '/user_info.json?callback=' + userInfoCallback;
var clipsUrl = '' + 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);

			var h2 = document.createElement('h2');
			h2.appendChild(document.createTextNode(info.display_name + ''s Videos On Vimeo'));
			//Here we inject the data into the respective div ids.
			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');

			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');

				var li = document.createElement('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);

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

		// 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.

Loading videos...


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

Comments 11
  • DDP
    Posted on


    Reply Author


    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 ( 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: ,

    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


    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

    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??


    • 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

    – 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!