Using the Giphy API

What's more fun than putting LOLCATS on your page? And getting a random, different animated cat every time? We can easily do this using the awesome Giphy API!

In this case, we're telling Giphy to give us:

One image
Chosen at random
"G" rated
Search keywords "funny cat"
And we provide the "public beta" API key (See their notes about usage)

Try reloading this page a few times

Here’s a way to fetch, parse, and render the GIF using Javascript’s awesome Fetch API and jQuery for presentation. (Assume we have a div on our page called #fetch-result). Note that Fetch API’s support isn’t yet that great, so we’re using a polyfill to extend support across browsers.

jQuery(function($) {
	fetch('http://api.giphy.com/v1/gifs/random?tag=funny+cat&rating=g&api_key=dc6zaTOxFJmzC&limit=1').then(function(response) { 
		return response.json();
	}).then(function(my_result) {
		$('#fetch-result').html('<img src="'+my_result.data.image_url+'">');
	});
});

And, here’s an easy way to do it using PHP’s json_decode() and file_get_contents() functions.

<?php
	$giphy = json_decode(file_get_contents('http://api.giphy.com/v1/gifs/random?tag=funny+cat&rating=g&api_key=dc6zaTOxFJmzC&limit=1'));
	$gif = $giphy->data->image_url;
	if(!empty($gif)){
		echo '<img src="'.$gif.'">';
	}
?>