The Naked Technologist

After having to build out the URL structure from the Yahoo! Query Language (YQL) results returned by the flickr.photos.search table yet again, I’ve decided to actually document how to generate Flickr URLs using the results returned from YQL.

When we use YQL the structure of results returned by a Flickr photo search contains all of the pieces that you will need to generate a whole series of author and photo links with Flickr, but it does not go the extra step of returning these links back to you. For instance, if we run a Flickr photo search query within the YQL (e.g. http://developer.yahoo.com/yql/console/?q=select%20*%20from%20flickr.photos.search%20where%20has_geo%3D%22true%22%20and%20text%3D%22san%20francisco%22) the result set that is returned back from YQL from flickr.photos.search looks something like this:

    
true
        
        445
        444
        5275
    
    










    

Now let’s take a look at how to do something with those data pieces.

Generating an image source
Using the farm, server, id and secret parameters from the result set, we can generate an image source that will display the searched image. The structure of the source using these parameters will look like:

<img src='http://farm{$farm}.static.flickr.com/{$server}/{$id}_{$secret}.jpg' alt='{$title}' />

Generating a link back to the photo page on Flickr
Under the terms of service, all photos that you use from Flickr will need to link back to the Flickr photo page of the owner. Using the owner and id parameters from the result set, we can generate a link back to the Flickr page for the searched image. Building upon the image source that we built above, we can wrap the image with a link that sends the user back to the original image page on Flickr:

<a href='http://www.flickr.com/photos/{$owner}/{$id}' target='_blank'>
<img src='http://farm{$farm}.static.flickr.com/{$server}/{$id}_{$secret}.jpg' alt='{$title}' />
</a>

Generating a link back to the photo owner’s profile
It’s always nice to provide a credit for the photo by linking back to the root profile of the photo owner (instead of just the photo page that we saw above). By using the owner variable in the photo return data, we can easily create a link back to the profile of the photo owner and give him/her credit. Building upon our current linked photo example, we can add in one more piece to do this:

<a href='http://www.flickr.com/photos/{$owner}/{$id}' target='_blank'>
<img src='http://farm{$farm}.static.flickr.com/{$server}/{$id}_{$secret}.jpg' alt='{$title}' />
</a>
<a href="http://www.flickr.com/photos/{$owner}" target="_blank">Photo Owner</a>

Now let’s see how to code a script in PHP that will output the photos wrapped in links back to their original sources (as seen in the second example above listed as “Generating a link back to the photo page on Flickr”). What we do in the code below is generate the YQL query URL, capture the results into a variable using simplexml_load_file, then pass the array of photos through to a function to build the HTML for us.

<?php
$yql_url = 'http://query.yahooapis.com/v1/public/yql?';
$query = 'SELECT * FROM flickr.photos.search WHERE has_geo="true" AND text="san francisco"';
$query_url = $yql_url . 'q=' . urlencode($query) . '&format=xml';

$photos = simplexml_load_file($query_url);
$result = build_photos($photos->results->photo);
echo $result;

function build_photos($photos){
    $html = '';
    if (count($photos) > 0){
        foreach ($photos as $photo){
            $html .= "<a href='http://www.flickr.com/photos/{$photo['owner']}/{$photo['id']}' target='_blank'><img src='http://farm4.static.flickr.com/{$photo['server']}/{$photo['id']}_{$photo['secret']}.jpg' width='75' height='75' alt='{$photo['title']}' /></a>";
        }
    } else {
        $html .= 'No Photos Found';
    }
    return $html;
}
?>

These are easy ways of displaying Flickr photos and links based on the results returned from the flickr.photo.search table in YQL. They’re simple examples but worth documenting so that you don’t need to go through the hassle of pieces the URL structures together on your next project.

- Jonathan LeBlanc

2 Comments | In: YQL | tags: Flickr, PHP, YQL. | #

One of the biggest issues that many people have with the small view of a YAP open application is that the view is cached on Yahoo! servers and can only be updated with manual intervention from either the application owner or the application user. In the past, application owners had a few options for updating this small view. The most common were:

• When the user visited the canvas view of the application the owner would have a setSmallView call set up to refresh the small view of the user (process described here: http://www.nakedtechnologist.com/?p=181. The problem with this is that it requires the user to go to the canvas view. Many users would just view their small view on My Yahoo! so the content of the app was either generic or stale.
• The owner would set up a cron job to update the small view of their app users on regular intervals (process described here: http://www.nakedtechnologist.com/?p=220). The issue with this one is that the content will only be updated at regular times and will be stale for a user in between those times.
• The owner would implement a yml:a tag to call a server-side script to update the small view of the user when the user clicked on the link (process described here: http://www.nakedtechnologist.com/?p=204). This relied on user interaction to function and in many cases links on the small view would need to be added just for this requirement.

Many developers, myself included, opted for a mix of all of the options above. This worked fairly well to mimic a dynamic small view, but having three solutions for a single problem was unwieldy.

Enter the yml:include tag
The purpose of this tag is to dynamically load content onto a page. This tag can be used in both the canvas and small views, but the real benefit to its use is the small view.

I would recommend looking over the documentation for yml:include as there is quite a lot of detail that a developer would find useful: http://developer.yahoo.com/yap/guide/include.html

The features that are most important to note here are:

• insert – if a node id is specified in the insert parameter, the content of the include request will load into that node.
• delay – the amount of time to delay the loading of the content (in milliseconds)

These parameters will help in setting up a dynamic small view for the user. Using these, I’ll go through two examples on how to use yml:include. The first will cover a simple single load case and the second will display how to build a continually updating small view set to update on a specific delay.

Simple Use Case – Single Dynamic Load
This first example will display a simple use case for yml:include. We will use the setSmallView call to insert an include tag into the small view of the current user.

The PHP layer to this is just to insert that yml:include tag the first time, and is only needed once. This will replace the cached small view of the user with the include tag. For my applications, I ran this in a cron job to update the small view for all users at once. Doing so replaced my need to constantly update the small view of my users on a daily basis.

The full details for setting up this example can be found here: http://www.nakedtechnologist.com/?p=181. This piece is the PHP layer that just sets the small view of the user with a yml:include tag and the div node that the content will be inserted into.

$html = '<yml:include params="training_sdk.php" insert="loadHere"></yml:include><div id="loadHere">REPLACE</div>';
if (!$yahoo_user->setSmallView($html)){
	echo "NO SMALL VIEW";
}

When the dropzone (my.yahoo) and application load, an AJAX GET request will be made to training_sdk.php. This file will return the content of the small view and then be inserted into the div with the id of “loadHere” (as denoted by the insert parameter). This allows us to generate whatever content we want within training_sdk.php and the small view will reflect that change as soon as the user loads the application.

Extended Use Case – Updating the Small View Every x seconds on a delay
Now we’re going to look into an extended use case for yml:include. This version will extend upon the basic example to refresh the small view automatically every 5000 milliseconds (every 5 seconds). We will start off with the same code that we insert into the small view to include the yml:include tag. From that point we take a look at the file that we capture the content of the small view from, training_sdk.php.

<yml:include params="training_sdk.php" insert="loadHere" delay="5000"></yml:include>
<?= time(); ?>

What we’re doing here is inserting another yml:include tag onto the page. Just like the first tag we are calling the same file, training_sdk.php, and inserting it into the same DOM node. The difference here is that we are delaying the load of this request by 5 seconds with the delay parameter. Following that all we do is display the current UNIX timestamp. What’s going to happen when this content is inserted into the small view is that the new yml:include will count down 5 seconds and then make an AJAX call to the same file and insert another UNIX timestamp and yml:include tag (which is delayed 5 seconds). So there we have it, we now have a small view that will update itself automatically every 5 seconds.

There’s only one catch here. There is a limit on the number of times you can call yml:include within a span of time. If too many consecutive yml:include calls are made, you will see the following error message:

error-243: maxIncludes limit hit for appid XXX

If you see this message, you have made too many yml:include calls within the particular dropzone. Currently the front page will allow unlimited yml:include calls and http://my.yahoo.com will allow 10 calls per session. My Yahoo! is looking into this at the moment so keep checking back to see if there have been changes with this tag. If you see this error, increase the delay on your yml:includes and that should solve the issue.

- Jonathan LeBlanc

2 Comments | In: PHP, Programming, Yahoo! Application Platform (YAP) | tags: PHP, Yahoo!, YAP, YML. | #

I’m sitting here hacking away at this custom visual HTML editor that I put together through some extensible JavaScript libraries – all the while the system is becomming more complex and…I must admit…I let it get a little out of control. In an effort to build as quickly as possible I broke some of my own rules and built this thing in a way that isn’t condusive for debugging or integrating new features.

So it’s a good thing I didn’t dump too much time into this project right? . Now I’m broadening my research a little bit and seeing what else may be out there on the interwebs that would be a good solution. What I just found and configured is FCKEditor (http://www.fckeditor.net/)…and I was hoping that it was available in PHP because that’s what I am currently building in. Well, kudos to this team because this is available in a bunch of languages – well done indeed. Configuration took no time at all and it seems to have excellent UTF8 support. UTF8 support…something that should be fairly trivial right? Well, it’s not something that many developers take into account when putting something together.

I’m not going to tout this tool as the be all end all of this project just yet, but I’ll explore it a bit more and see where it takes me. I’ll still need some custom file upload and file loading tools but I have those already thanks to the awesomeness of YUI. I’ll post more if this thing does everything I need of it.

- Jonathan LeBlanc

1 Comment | In: PHP, Programming, Reviews | tags: PHP, Programming, Reviews. | #

One of the tasks that I have been working on lately has been to create front-end JavaScript visualizations of YQL query results. What I ended up doing was creating a generic JavaScript include that uses YUI for some of the data parsing. Using this method, I set up a system where a developer could just include this JavaScript file, set up a few configuration variables and then a nice visualization widget would be displayed.

You can see a sample of the widget by going here: http://www.liquidmediatech.com/php_widget/yql_php_widget.html

Here’s what the full configuration for the widget looks like:

<!-- widget file include -->
<script type="text/javascript" src="yql_php_widget.js"></script>

<style>
div#badgeContainer{ padding:0 5px; font:bold 14px arial,helvetica,sans-serif; color:#f0f0f0; }
div#badgeContainer img{ float:left; margin-right:8px; margin-top:3px; border:0; }
div#badgeContainer span{ font-weight:normal; font-size:12px; }
div#badgeContainer a{ text-decoration:none; color:#f0f0f0; }
div#badgeContainer a:hover{ text-decoration:underline; }
div#widgetContainer{ background-color:#474747; width:300px; padding:5px 0; }
div#widgetContainer div.iconBox{ width:17px; height:16px; float:left; }
div#widgetContainer div.widgetRow{ padding:5px; background-color:#509cd1; border:1px solid #8fc5eb; margin:5px; overflow:hidden; }
div#widgetContainer div.widgetRow, div#widgetContainer div.widgetRow a{ color:#f0f0f0; font:11px arial,helvetica,sans-serif; }
div#widgetContainer div.widgetRow a{ font-weight:bold; }
</style>

<div id="widgetContainer"></div>

<script type="text/javascript">
var config = {'badge':true, 'num_results':10, 'debug':true};
var format = '<div class="widgetRow"><a href="{link}" target="_blank"><div style="background-color:#fff;border:2px solid #8fc5eb;width:20px;height:20px;float:left;margin-right:4px;"><img src="{loc_iconURL}" width="16" height="16" style="border:0;padding:2px;" /></div></a> <a href="{link}" target="_blank">{loc_longForm}</a><br />' + '{lastUpdated}</div>';
var yqlQuery = 'select lastUpdated, link, loc_iconURL, loc_longForm, profile_nickname, profile_profileUrl, publishedTime from social.updates where guid=me | sort(field="lastUpdated") | reverse()';
var insertEl = 'widgetContainer';
yqlWidget.push(yqlQuery, config, format, insertEl);
yqlWidget.render();
</script>

I have full documentation and the code base to set up this example on my github account at http://github.com/jonleblanc/yql-utilities/tree/master.

For a more in depth explanation of what was built out with this tool take a look at my post on the YUI blog at http://www.yuiblog.com/blog/2009/06/17/yui-and-yql/

- Jonathan LeBlanc

No Comments | In: Programming, YQL, YUI | tags: PHP, Programming, widgets, YQL, YUI. | #

In my last post I provided code to update the small view for an application on the Yahoo! Application Platform. The only current dropzone for these applications is on http://my.yahoo.com. In this tutorial I want to provide a method for developers to automatically update the small view for every user of their application without their interaction. With this script in place, you can run it within a cron job nightly so you can let technology do all the work for you.

Here’s a little overview of the application that I tied this functionality to (to see the application in action go to: http://apps.yahoo.com/-Oob7ZC78). I built out a weather application that allows users to set their city and get a simple weather forecast. On the small view I display a 4 day forecast and the current weather for the day. Since most users will only set their city on an infrequent basis and only interact with the small view regularly, I needed a way to update that cached small view on a daily basis. This would normally be done when a user goes to the large view of the application, but that was not acceptable in this case.

I have a basic mysql table that contains the GUID of the user to identify them, as well as their city search criteria to rebuild the user views with their selected city criteria. The basic table looks like this:

Now let’s take a look over the code that updates the small views based on the table data above. Here are the steps I’m taking:

• Include the PHP SDK (Yahoo.inc), define your keys and application id, then instantiate a 2-legged OAuth session using new YahooApplication(…)
• Set your database information, initialize the mysql database connection, set the SQL query and make the query using the mysql_query method
• Set up the while loop to keep capturing the specific row as long as there are still hows to capture
• Create your small view HTML using the data from the database – store it to a variable ($html)
• Set the small view for the user GUID using the created small view HTML. Echo out a status message for some detail.

Let’s take a look at the code for this:

Now that we have the script ready, just set up a cron job to run through this script whenever you want to update the user content and that’s it…you now have an automated script that will keep the small view for all of your users up to date.

– Jonathan LeBlanc

No Comments | In: PHP, Yahoo! Application Platform (YAP) | tags: Guides, mysql, PHP, Programming, Small View, Tutorial, YAP, YOS. | #

For the second installment in the dynamic small view using yml:a talks, I wanted to take you through another implementation of the yml:a tag created during some head pounding platform work.

The Problem
The My Yahoo! small view of an application can’t automatically refresh itself with fresh content. If a user never goes to the large view of your application, they will always see the same stale content in the small view on their My Yahoo! page. If your application relies on fresh content being presented to the user, you need a way of updating the small view content from the small view.

The Solution
Basically, what you are trying to do to make this happen is to find a way to make a request to a server side script which will, in turn, instantiate a new Yahoo! session and set the small view content. Again, because of the AJAXian behavior that can be accomplished using the yml:a tag, it’s the perfect candidate for our needs.

There are two methods that we’ve used for this task. The first one uses the tab example I spoke about in my last post. Each time a tab (which is a stylized yml:a tag) is clicked, yml:a will call a server side script to rebuild the tab group. While this is occurring, new content can be cached for the user’s small view.

The second method, and the one that I’ll go over in depth, is to includ a yml:a link on your small view to “Update Small View”. I like the idea of updating the small view automatically using the tab method, but I also like having this option available to users so that if they see something that is out of the ordinary they can refresh to update their view at will. Let’s look at a code implementation behind this example.

First things first, when the large view of your application loads, you’ll need to set the small view. For our needs, all we’re going to insert in the small view (from PHP) is the yml:a link to update:


<?php
require_once('Yahoo.inc');

//define constants to store your API Key (Consumer Key) and Shared Secret (Consumer Secret)
define(“API_KEY”,“YOUR KEY”);
define(“SHARED_SECRET”,“YOUR KEY”);

//initializes session and current user

$yahoo_session = YahooSession::requireSession(API_KEY, SHARED_SECRET);
$yahoo_user = $yahoo_session->getSessionedUser();

//set the small view
$uid = $yahoo_user->guid;
$yml = “<div id=’containerHolder’></div><yml:a params=\”updateSmall.php?uid=”.$uid.“\” replace=\”containerHolder\”><span style=\”color:#fff;\”>Click Here to Refresh Your View</span></yml:a>”;

$yahoo_user->setSmallView($yml);
?>

As we can see, the small view will now have a refresh link on it which in turn calls updateSmall.php through an AJAX request with the user id of the person that clicked on the link, then replaces the DOM element with the id of containerHolder. In updateSmall.php, we’ll capture the user id passed in to us, instantiate a 2-legged OAuth session, then use that id to update the small view cache of the user and finally dump out the new small view content that will be replaced. This would look something like:


<?php
require_once('Yahoo.inc');
define("API_KEY","YOUR KEY");
define("SHARED_SECRET","YOUR KEY");

$uid = $_REQUEST['uid'];

$yahoo_session = new YahooApplication(API_KEY, SHARED_SECRET);
$small_view = ‘Hey, this is my new small view!’;

if (!$yahoo_session->setSmallView($uid, $small_view)){
echo “ERR: $uid <br />”;
}
echo $small_view;
?>

That’s it, you should now have an easy method for updating the small view for the user using yml:a, as well as updating their small view cache so that they will see the new small view if they refresh the page.

– Jonathan LeBlanc

1 Comment | In: Yahoo! Application Platform (YAP) | tags: PHP, Tutorial, YAP, YML. | #

My Yahoo!’s implementation of the Yahoo! Application Platform (YAP) is usually perceived as a mixed bag with the developers and partners we’ve been working with.  On the one hand this is the implementation of the platform on Yahoo! and on the other developers feel restricted because the small view that displays on My Yahoo! only allows HTML, CSS and YML.  Some developers have gone the route of just placing glorified ads or static content on their small views.  Enter the yml:a tag…one of the most powerful tools at a developer’s disposal on the platform.

The yml:a tag can be seen as a replacement to the normal HTML anchor tag, but it is much more than that.  Including AJAX functionality with DOM insert / replace techniques, this tag can mimic a dynamic environment to allow developers a greater degree of flexibility.

So, I can spout off all of the promotional material I want, but what use is it without examples to back it up.  This code sample will provide all of the functionality of a dynamic tab set within the small view, where the tabs are defined as yml:a tags:


<?php
require_once('Yahoo.inc');

    return $tabCode;
}
?>



Let’s break the code down into the pertinent parts and explain what the heck is going on. This code can be placed as the landing page for your application full view. What will happen is that it will generate a new small view which will display the tabs as yml:a tags. When a tab is clicked, yml:a will send an AJAX request to this same file, but will pass in a numeric query parameter (defined as ‘tabNum’) which will signal which tab has been clicked. The if / else statement at the top will control that flow. If tabNum is not defined, the core container and CSS will be created and the small view will be set using setSmallView. If tabNum is set, just the build_tabs function will be called to recreate the tab container and return it. Essentially, the yml:a tag is just replacing its own container with a new tab view in order to make it look like a new tab has been clicked, without refreshing the page, resetting the css or re-encoding the small view.

Let’s look specifically at the yml:a tag within the build_tabs function, where each tab is defined as:
<yml:a params=”?tabNum=$i” replace=”tabContainer”>Tab $i</yml:a>

The params attribute specifies that the same file will be called (since no file is defined) and will pass one query parameter, the tab number. The replace attribute specifies the id of the DOM element that will be replaced in the small view once the AJAX request successfully returns. In this case we are replacing the entire tab container, the div with the id of “tabContainer”.

That’s all there is to it. That’s one of the many dynamic things you can do with the yml:a tag.

Links:
- Tab tutorial on YDN
- yml:a tag description and samples

– Jonathan LeBlanc

3 Comments | In: PHP, Yahoo! Application Platform (YAP) | tags: PHP, Tutorial, YAP, YML. | #

I recently came across a problematic warning within PHP that I felt the need to get to the bottom of, instead of just throwing a band-aid on top of it. This warning stated that “Call-time pass-by-reference has been deprecated” when I was attempting to pass an array to a function by reference within an object oriented class program structure. Since this is a deprecation warning just finding a way of suppressing the warning was not an option as that functionality may be gone at any time. So, after some research I came across a few ways of solving this problem:

Turn off warnings
PHP offers several different ways of turning off error reporting within your code blocks. Both of these solutions will work but, as I started above, deprecation warnings in your code should never be ignored or suppressed as a long term solution as you never know when a future version of PHP will no longer support this functionality. In any event, these methods are:

• Turn off error reporting for the entire program by setting error_reporting(0); at the top of your script. This works but it really isn’t a good idea. If you turn off error reporting you wont be able to see any program control / syntax errors on page.
• Use an error control operator to suppress warnings for that one line of code – this is detailed here: http://us3.php.net/operators.errorcontrol. Basically, if you prepend any statement with the @ operator, error reporting will be suppressed for that statement. Again, you’re just masking the problem.

Allow call-time pass-by-reference in your php.ini file
If you set allow_call_time_pass_reference = on in your php.ini file, this functionality will be allowed in your program structure without those warning messages. Again though, this is a deprecation warning so any functionality to support this may be gone in the next revision.

Embed the object reference within a passed-by-value array
I know this solution is a hack and that PHP should never have deprecated this feature in the first place, but this is at least a functional hack that I could live with. In addition, since this method does not fall in the same deprecation arena as the previous ones, this hack will continue to work even if the deprecated feature is removed. This is the functionality we’ve stuck with:

What we wanted to do with our program is to take some raw friend data obtained from MySpace and convert it into an associative array indexed by user id.

Here are the takeaways from this code block. The way you’ll now pass your object reference in is by wrapping it in a passed-by-value array
array(&$friendObj)

The argument that your function accepts will now be passed by reference
create_function(‘$friendObjRaw,$key,$friendObjFinal‘

When you want to access the passed-by-reference object from within the new function, access it by the array selector:
$friendObjFinal[0]

Happy Coding!

– Jonathan LeBlanc

4 Comments | In: PHP | tags: bugs, Pass by Reference, PHP. | #