Monday, 29 February 2016
Creating app with Flickr API in PHP
Using Flickr API you can retrieve plethora of photographs and in turn may create awesome applications. Moreover, you may upload your application to Flickr's marketplace APP Garden and make bucks and recognition too.
In this tutorial we will see how to get started with Flickr API. We will create simple application using Flickr API and in the course we learn some nuances of how to unleash the potential of Flickr's awesome photo sharing services.
Time for some code now. As you have a URL which may return data of your demand, in JSON format here, you have to use a programming language to decode that JSON data and present that to the user. 'https://www.flickr.com/services/api/' page provides you with a list of programming language usage under 'API Kits' section. For this application we will use Jquery to decode the JSON data returned and then append that to the HTML page. We will also collect the size of the photos user want those to be displayed.
So, we have three steps to go. First we have to decode JSON data returned by 'flickr.photos.getRecent' method. Second we have to collect data from browser supplied by user to filter the available photos according to the size user want to see and then display only photos with that size. The code for the job is given below. Download the code, replace the api_key with yours, and play around.
view plaincopy to clipboardprint?
In this tutorial we will see how to get started with Flickr API. We will create simple application using Flickr API and in the course we learn some nuances of how to unleash the potential of Flickr's awesome photo sharing services.
Time for some code now. As you have a URL which may return data of your demand, in JSON format here, you have to use a programming language to decode that JSON data and present that to the user. 'https://www.flickr.com/services/api/' page provides you with a list of programming language usage under 'API Kits' section. For this application we will use Jquery to decode the JSON data returned and then append that to the HTML page. We will also collect the size of the photos user want those to be displayed.
So, we have three steps to go. First we have to decode JSON data returned by 'flickr.photos.getRecent' method. Second we have to collect data from browser supplied by user to filter the available photos according to the size user want to see and then display only photos with that size. The code for the job is given below. Download the code, replace the api_key with yours, and play around.
view plaincopy to clipboardprint?
<html>
<head>
<title>Creating app with Flickr API</title>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
#sq,#lg-sq,#thumb,#small,#mid,#ori {
width: 100%
}
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var apiurl,myresult,apiurl_size,selected_size;
apiurl = "https://api.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=ca370d51a054836007519a00ff4ce59e&per_page=10&format=json&nojsoncallback=1";
$(document).ready(function(){
$("#sq").click(function(){
selected_size=75;
})
});
$(document).ready(function(){
$("#lg-sq").click(function(){
selected_size=150;
})
});
$(document).ready(function(){
$("#thumb").click(function(){
selected_size=100;
})
});
$(document).ready(function(){
$("#small").click(function(){
selected_size=240;
})
});
$(document).ready(function(){
$("#mid").click(function(){
selected_size=500;
})
});
$(document).ready(function(){
$("#ori").click(function(){
selected_size=640;
})
});
$(document).ready(function(){
$('#button').click(function(){
$.getJSON(apiurl,function(json){
$.each(json.photos.photo,function(i,myresult){
apiurl_size = "https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&api_key=ca370d51a054836007519a00ff4ce59e&photo_id="+myresult.id+"&format=json&nojsoncallback=1";
$.getJSON(apiurl_size,function(size){
$.each(size.sizes.size,function(i,myresult_size){
if(myresult_size.width==selected_size){
$("#results").append('<p><a href="'+myresult_size.url+'" target="_blank"><img src="'+myresult_size.source+'"/></a></p>');
}
})
})
});
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Select size of photos (in pixels) you want them to be displayed</h2>
</div>
</div>
<div class="row">
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="sq">Square [75X75]</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="lg-sq">Large Square [150X150]</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="thumb">Thumbnail</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="small">Small</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="mid">Medium</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="ori">Original</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Hit This button to fetch photos</h2>
<button type="button" class="btn btn-success" id="button">Fetch Recent Photos</button>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="results"></div>
</div>
</div>
</div>
</body>
</html>
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment