Hide
Search Results

Canvas Tutorial

This tutorial walks you through the key steps to getting your app up and running. This tutorial creates an app that calls the flickr API method flickr.photos.getRecent to get a list of the latest public photos uploaded to flickr.

Create a YAP App

  1. Start by going to the My Apps page.
My Apps page
  1. Click “Create New App”.

Note: If you are not already logged in to Yahoo!, you will be prompted to log in or create a new Yahoo! account.

The Create New App page appears.

create new app basic info page
  1. Fill in the fields as follows:

    • App Title: Enter “Flickr App”.

      This is the title of the app as it will appear in the Game Gallery.

    • App Content: Select “Externally Hosted”.

      • Externally Hosted: App will be hosted on the developer server.
      • Inline: Short HTML stub that calls your hosted App and shown to user while App loads.
    • App Content URL: Enter the hosted URL “http://www.yap-apps.com/sample/flickr.php

      URL address of the hosted App.

    • User Signin: Select “Not required”.

      • Required: Select for social Apps where user must sign in to allow access to their contacts, and other personal details.
      • Not Required: Select for non-social Apps.
    • HTTP Method: Select “GET”.

      Type of HTTP Request YAP should make to the hosted App.

    • Dimensions: Enter “960” for Width, and “600” for Height. This is the default.

    • Description: Enter “Get a list of the latest public photos uploaded to Flickr.”

      This is the description of your app Gallery as it will appear to users.

  2. Click the “Create App” button. The App is created and the Edit App page appears.

Edit App page
  1. Click Save.

    This saves the App to the “My Projects” page.

  2. Click Preview.

The Preview page appears:

Preview Flickr App

Configure Your App

Before submitting your app for approval

  1. Verify Basic Information.
  2. Enter Developer Information. See How is authentication and authorization handled? for more information.
  3. Fill in the fields under Image Information as follows:

There are three buttons:

  • Save: Saves your App and publishes it (makes it live). You can link to it and run it.
  • Preview: Opens your App so you can preview it.
  • Submit for Approval: Sends a request to YDN to make your App available in the Yahoo! Games and/or Yahoo! Messenger galleries.
  1. Click “Save”.
  2. Click “Submit for Approval”.

The App now appears under “Approval Pending” on the “My Apps” page. You can expect to have your App approved in approximately one business day.

Approval Pending on My Apps page

Hosted PHP Source

<?php
Class Flickr{
	const MAX_PHOTOS_PER_REQUEST = 10;	
	const REST_API_URL = 'http://flickr.com/services/rest/';
	
	function __construct(){
		$this->_apiKey = 'af47bcb1b7e19b9a69e0792d1c8539f2';
		$this->_apiSecret = '4a5089e5ce45bb08';
	}
		
	function buildParams(){
		$api_sig_needed = 1;
		$params = array();
		$params['api_key'] = $this->_apiKey;
		$params['method'] = 'flickr.photos.getRecent';
		$params['perms'] = 'read';
		
		foreach($params as $key => $value) {
			$signing .= $key . $value;
			$values[] = $key . '=' . urlencode($value);
		}
		if($api_sig_needed == "1") {
			$values[] = 'api_sig=' . md5($this->_apiSecret . $signing);
		}
	
		return implode('&', $values);
	}
		
	function makeCurlCall(){
		$postFields = $this->buildParams();
		
	    $ch = curl_init();
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($ch, CURLOPT_URL, self::REST_API_URL);
        curl_setopt($ch, CURLOPT_POST, true);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $postFields);

        // Get the contents.
        $curlResult = curl_exec($ch);
		//var_dump($curlResult);        
        curl_close($ch);		
        return $curlResult;
    }
	function buildImgUrl($photoData, $size = "") {
        $type = 'jpg';
        $sizeStr = "_$size";

        switch ($size) {
        case '-':
            $sizeStr = '';
            break;
        }

        $rawUrl = "http://farm" . "%s" . ".static.flickr.com/" . "%s/%s_%s%s.%s";

        $url = sprintf($rawUrl, $photoData['farm'], $photoData['server'], $photoData['id'],
                $photoData['secret'], $sizeStr, $type);

        return $url;

    }
	function parseXMLData($curlResult){
		$xmlObj = simplexml_load_string($curlResult, null, LIBXML_NOERROR | LIBXML_NOWARNING);
		if ($xmlObj === false) {
			Logger::error(-1, Constants::STATUS_ERROR_XML_PARSE, "XML parsing failed!");
			return false;
		}
		$string = '';
		$cnt = 1;
		$img = array();
		foreach($xmlObj->xpath('//rsp//photos//photo') as $photoDetail){
			if($cnt++ > self::MAX_PHOTOS_PER_REQUEST ){
				break;
			}
			//var_dump($photoDetail);
			$imgpath = $this->buildImgUrl($photoDetail,'m');
			$img[] = $imgpath;
					
		}
		return $img;
	}
}
$flickr = new Flickr();
$curlResult = $flickr->makeCurlCall();
$imgs = $flickr->parseXMLData($curlResult);
function render($imgs){
	$mkArr = array();
	$mkArr[]='<ul>';
	foreach($imgs as $img){
		$mkArr[] = "<li class='flimg'><img src='".$img ."' /></li>";
	}
	$mkArr[] = '</ul>';
return implode($mkArr);
}
$imgList = render($imgs);
?>
  <head>
    <style>
      h1{
        color:red;
        font-weight:normal;
       }
      ul{
	width:750px;
	}
	ul li{
	float:left;
	list-style:none;
	}
	ul li img{
	margin-left:1em;
	border:1px solid yellow;
	}
    </style>
  </head>
  <body>
    <h1> Flickr Randomg Photos
    </h1>
	<div id='container'>
<?php
echo $imgList;
?>
	</div>
  </body>
<script>
 var YUE = YAHOO.util.Event;
 var YUD = YAHOO.util.Dom;
YUE.addListener('container','mouseover',fnover);
YUE.addListener('container', "mouseout", fnOut);
fnover = function(e){
var con = YUD.get('container');
con.style.opacity = 0.5;
}
fnOut = function(e){
var con = YUD.get('container');
con.style.opacity = 1;
}

</script>
</html>

Table of Contents