Copy and paste the code below into the body of your external Appliation document.
---------------------------------------------------------

<!DOCTYPE = html>
<html lang="en">
   <head>
       <meta charset="UTF-8" />
       <title>Flickr Search</title>
       <style>
           #EX_body {
               font-family: Verdana, sans-serif;
               font-size: 12px;
           }
                   
            #EX_Body h1, #EX_Body legend, #EX_Body label {
               color:#0072AA;
                margin-left: 15px;
               margin-top:40px;
           }
           #name {
               font-weight: bold;
               font-size: 14px;
           }
       
            #EX_content {
               margin-left: 15px;
               width: 500px;
           }
           
            #timg {
               height: 100px;
               float: left;
               border: 2px solid #0072AA;
           }
           
            #flickerform {
               padding-bottom: 15px;
           }
       
            #imgContent {
               height : 500px;
                overflow: auto;
            }
       </style>
    </head>
   </div>
   <body>
       <div id = "EX_Body">
       <h1>Flickr Search</h1>
       <div id="EX_content">
           <form id="flickerform">
               <fieldset>
               <legend>Flickr Search</legend>          
                <label>Key Word:</label>
               <input type="text" id="tags" name="tags" />
               <label>Number:</label>
               <input type="text" id="count" name="count" value="5" size="5"/>
               <button type="submit">Search</button>           
                </fieldset>
           </form>     
            <div id="imgContent"></div>
       </div>
       <script>
           $(function(){
               $('#flickerform').submit(function(){        
                    GetFeed($('#tags').val(),parseInt($('#count').val()));
                   return false;
               });
                           function GetFeed(tag,count) {
               var html = "";
               if (isNaN(count) | count <=0 ) {
                   count = 5;
               };
       
                $.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?tags=" + tag + "&tagmode=any&format=json&jsoncallback=?",function(data) {
                   $.each(data.items, function(i,item){
                       if ( i == parseInt($('#count').val(),10) ) return false;
                       html += "<img src='" + item.media.m + "' id = 'timg'/>"
                   });
                   $("#imgContent").empty().append(html);
                   });
               };
           });
       </script>
   
    </body>
</html>