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

<html>
<head>
   <meta charset='UTF-8' />
   <title>My Bookmarks</title>
   <style>
       #App_Content{
           font-family: "Trebuchet MS", Helvetica, sans-serif;
           margin-left: 10px;
       }
       
        #App_Header {
           padding: 3px 16px;
           margin-top: 5px;
           width: 390px;
           height: 25px;
           background-color: #0073ad;
           color: white;
       }
       .even_RowSmall, .odd_RowSmall {
           clear: both;
           margin-left: -15px;
       }
       
        .even_RowSmall, .odd_RowSmall {
           height: 40px;
           padding-top: 5px;
        }
       
        .odd_RowSmall {
           background: -webkit-linear-gradient(top, #d3dce3, #ecf0f0);
           background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#d3dce3), to(#ecf0f0));
           background-image: -webkit-linear-gradient(#d3dce3, #ecf0f0);
           background-image: -moz-linear-gradient(#d3dce3, #ecf0f0);
           background-image: -o-linear-gradient(#d3dce3, #ecf0f0);
           background-image: linear-gradient(#d3dce3, #ecf0f0);
           background-position-x: initial;
           background-position-y: initial;
           background-size: initial;
           background-repeat-x: initial;
           background-repeat-y: initial;
           background-attachment: initial;
           background-origin: initial;
           background-clip: initial;
           background-color: initial;
           padding-bottom: 5px;
        }
       
        .small_Container, {
           margin-left: 5px;
       }
       
        .smallImg {
           width: 32px;
           height: 32px;
           float: left;
           padding-right: 5px;
           padding-left: 10px;
           padding-bottom: 8px;
        }
       
        .BMSubject {
           font-size: 10pt;
           color: #555;
       }
               
        a.webLink:link, a.webLink:visited, a.webLink:hover {
           text-decoration: none;
           color: #0073ad;
       }
       
        a.webLink:hover {
           font-weight: bold;
           color: #555;
       }
        
        #parsedText {
           border: 1px dotted #0f0f0f;
           padding: 10px 10px;
           background-color: rgba(147,146,169,0.1);
           height : 550px;
            width: 400px;
           overflow : auto;
        }
   </style>
</head>
<body>
   <div id = "App_Content">
        <div id = 'App_Header'>My Bookmarks</div>
       <div id = 'parsedText'></div>
   </div>
   <script>
       $(function () {
           var GetURL = '/FCP/?TypedFolder=16&ReplyAsJSON';
           $.ajax({
               url: GetURL,
               type: 'GET',
               dataType: 'jsonp',
               success: function (data, textStatus, jqXHR) {
                   var dataReceived = JSON.stringify(data, null, 4);
                   parseData(data);
               },
               error: function (data, textStatus, jqXHR) {
                   alert('textStatus:' + textStatus + '\njqXHR:' + jqXHR);
               }
           });
           
            function parseData(data) {
               var pText = '';
               var webobjID = data.MYMLITEM.webid;
               var ServerAddr = '';
               var i=0;
                $.each(data.MLDS, function(i,v){
                    pText += (i%2==1 ? '<div class = "odd_RowSmall">' : '<div class = "even_RowSmall">');
                   pText += '<div class = "small_Container"><a href = "' + v["8012"] + '" target = "_blank">' + '<img src = "' + ServerAddr + '/images/icons/' + v.ShortInfo.iconID + '.png" class = "smallImg"></a></div>';
                    pText += '<a href = "' + v["8012"] + '" class = "webLink" target = "_blank">' + v["8010"] + '</a><br />';
                   pText += '<span class = "BMSubject">' + v["9"] + '</span>';
                   pText += '</div>';  
                });
               closeObject(webobjID);
               $('#parsedText').html(pText);
           } /* end of ParseData */
           
            function closeObject(objWebId) {  
                var GetURL="/FCP/" + objWebId + '?Close&ReplyAsJSON';
               $.ajax({
                   url: GetURL,
                   type: 'GET',
                   dataType: 'jsonp',
                   success: function (data, textStatus, jqXHR) {
                       /*Nothing to do*/
                   },
                   error: function (data, textStatus, jqXHR) {
                       alert('textStatus:' + textStatus + '\njqXHR:' + jqXHR);
                   }
               });
           } /* End of CloseObject */
       });
   </script>
   </body>
</html>