Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

My Story With Flickr


Published on

Just a simple story-mode how to work with the flickr api using the phpflickr class

Published in: Technology, Sports
  • Be the first to comment

My Story With Flickr

  1. 1. Using the flick r API to please my wife Background images downloaded from: My wife loves to take pictures, she also loves photo albums. Long time ago I wrote a little script for her that adds the original date to a photo using ImageMagick / This is the story of how to do the same in flick r Note: flick r automatically presents this info at the right side of any image – if it contains this EXIF info -, but I really want to try to do it by myself
  2. 2. Why Flickr? / Which language <ul><li>Because its a very cool web application, supported for one of the most talented team into the Web Development scene. Also because it offers an open API that allows to do it. </li></ul><ul><li>JAVA for a desktop app sounds really sweet
  3. 3. PHP for a web app sounds good too </li></ul>
  4. 4. What does this app going to do? <ul><li>Using a previously uploaded image get its original date (the date it was taken) and add it as a Tag / comment </li></ul>
  5. 5. How does it will look like?
  6. 6. This time I chose PHP <ul><li>I want to put this as a simple on-line application, so I chose PHP as my language and start looking for a class that actually implements the flickr API ( ). On the flickr page I found phpflickr ( ) a very complete class, without special requirements (ie: you don't need to have PHP compiled with or without specific extensions), so you just need to download it to start using it </li></ul>
  7. 7. Flowchart – kind of <ul><li>When the user loads the web application (from now on referred as just4fun) he/she will be required to start his/her flickr session. The reason for this is we want to gain access to all their images, and also, we want to write some info on them.
  8. 8. Once the user has logged into flickr is redirected to just4fun, when he/she can see a list of their albums.
  9. 9. The user click on any of their albums and gain access to the images inside of its selection.
  10. 10. The user click on any of the photos presented and just4fun add the date when the picture was taken as a comment and a tag inside flickr. </li></ul>
  11. 11. First Step: HTML Interface <ul><li>Nothing special here, just one (kind of) cool trick, for my logo I used this: an on-line application that creates logos with your text that looks like the flickr one. In my code I call the result as the source for my image: </li></ul><img style=&quot;height: 84px; width: 369px;&quot; alt=&quot;just4fun - a simple app using flickr API&quot; src=&quot;; align=&quot;left&quot; hspace=&quot;3&quot; vspace=&quot;1&quot;> <ul><li>The rest of the code is just a couple of divs floating side by side </li></ul>
  12. 12. phpflickr – lets begin the magic! <ul><li>The first great thing with this class is you don't really need to take care about the authentication process in flickr and how your user would be redirected. Phpflickr includes a callback script called auth.php that could serve you as the backbone for this process. You only need to configure it using your api key and your secret </li></ul>
  13. 13. auth.php $api_key = &quot; copy and paste your api key here &quot;; $api_secret = &quot; copy and paste your api secret here &quot;; $default_redirect = &quot;/&quot;; $permissions = &quot;read&quot;; $path_to_phpFlickr_class = &quot;./&quot;; <ul><li>You don't need to change anything else in this file </li></ul>
  14. 14. In flickr ... <ul><li>Now, assuming your application will be located on and you'll be using a lib subdirectory to store all the phpflickr files, you must define your callback url as: </li></ul>
  15. 15. And the index.php <ul><li>Now let's take care of the index.php file, basically the only one the final user would see. First we need to call the class and use the auth.php script: </li></ul><?php require_once(&quot;./lib/phpFlickr.php&quot;); require_once(&quot;./constants.php&quot;); $f = new phpFlickr(&quot;api_key&quot;,&quot;secret&quot;); $f->auth('write'); … <ul><li>At this point we have a phpflicker object we could use for the rest of the steps </li></ul>
  16. 16. Get the albums <ul><li>You can get all the albums for the authenticated user just using this: $albums = $f->photosets_getList();
  17. 17. Easy isn't?
  18. 18. And you can paint a list of albums with this couple of lines: </li></ul>foreach($albums['photoset'] as $album) echo &quot;<a href='&quot;.$_SERVER['PHP_SELF'].&quot; ?id_album =&quot;.$album['id'].&quot;'>&quot;.$album['title'].&quot;</a><br/>&quot;; <ul><li>Look how I'm defining an href for every album than actually reloads the same page but passing an extra parameter id_album </li></ul>
  19. 19. For this album -> get the photos <ul><li>Now, when the user selects an album, the index.php reloads and use the next lines to get all the pictures for this album: </li></ul>if($_GET['id_album']) $pictures = $f->photosets_getPhotos($_GET['id_album']); <ul><li>And you going to paint all this pictures using something like this: </li></ul>$i = 0; foreach($pictures['photoset']['photo'] as $photo){ echo &quot;<a href='&quot;.$_SERVER['PHP_SELF'].&quot;?id_photo=&quot;.$photo['id'].&quot;'><img src='&quot;.$f->buildPhotoURL($photo, &quot;Square&quot;).&quot;' border='0'></a>&quot;; if($i>=3){ //only needed if you want rows of 4 photos each echo &quot;<br/>&quot;; $i=0; } else $i++;
  20. 20. For this photo -> get the date and use it as a comment/tag <ul><li>At this point the user has selected a picture, and we have its id as a the parameter: id_photo, so for this photo we're going to get its EXIF date taken field and then we're going to use this date as a comment and a TAG
  21. 21. Step 1: get the information for this photo: </li></ul>$photo_info = $f->photos_getInfo($_GET['id_photo']);
  22. 22. For this photo -> get the date and use it as a comment/tag <ul><li>Step 2: extract the date taken and use it as comment/tag </li></ul>$date_taken = $photo_info['dates']['taken']; $f->photos_addTags($photo_info['id'],$date_taken); $f->photos_comments_addComment($photo_info['id'],&quot;Taken on: &quot;.$date_taken);
  23. 23. Verify if everything works as expected if($f->getErrorCode()) echo $f->getErrorMsg(); else echo &quot;<a href='&quot;.$photo_info['urls']['url'][0]['_content'].&quot;' target=_blank title='Click on the image to open it on flickr'><img src='&quot;.$f->buildPhotoURL($photo_info,&quot;Small&quot;).&quot;' border='0'></a><br/><em>Your image was sucessfully Commented/Tagged</em>&quot;;
  24. 24. Original photo (real snapshot)
  25. 25. Process finished (real snapshot)
  26. 26. Commented Photo (real snapshot)
  27. 27. And that is – pretty much – all folks! <ul><li>You can test this app on-line here:
  28. 28. And if you're interested you can download and take a look of the full code of this app here:
  29. 29. You can reach me via twitter: @lacucaramacara </li></ul>
  30. 30. Thanks for your attention Jose Andres Martinez S. @lacucaramacara