Se poi l'inclusione di queste informazioni aggiuntive non rallenta in nessun modo il caricamento del resto della pagina, abbiamo trovato una buona soluzione.
Quella che vediamo in questo articolo la sto usando per il sito web personale che sto rinnovando e sarà presentato a breve.
Gli strumenti utilizzati sono HTML, CSS, e JavaScript con l'uso di due librerie: JQuery e Twitter.js.
La pagina inizialmente si presenta in un modo simile a questo (in questo caso lo stile è piuttosto semplice, per pure dimostrazione):
L'HTML sarà qualcosa come:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lorenzo Sfarra :: Latest 5 tweets</title>
<!-- CSS -->
<link rel="stylesheet" href="style.css" type="text/css" />
<!-- JS -->
<!-- JQuery -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
/* */
</script>
<!-- Twitterjs -->
<script type="text/javascript"
src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js">
/* */
</script>
<!-- Custom JS -->
<script type="text/javascript"
src="custom.js">
/* */
</script>
</head>
<body>
<!--
Author: Lorenzo Sfarra
Copyright: (c) 2009 Lorenzo Sfarra <lorenzosfarra@ubuntu.com>
Twitter - latest 5 tweets -->
<h1>Latest 5 tweets</h1>
<div id="latesttweets">
<p>Please wait while my latest 5 tweets load <img src="images/indicator.gif" alt="loading..."/></p>
<p>If you can't wait or you haven't javascript enabled, go to my <a href="http://twitter.com/lrnzsfr">Twitter page</a>.</p>
</div>
</body>
</html>
dove style.css è:
/* CSS for the latest tweets in your HTML page.
*
* Author: Lorenzo Sfarra (lorenzosfarra@ubuntu.com)
*/
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-family: Arial, Helvetica, Tahoma, sans-serif;
background: #000000;
color: #dddddd;
font-size: 11px;
}
h1 {
padding-left: 100px;
font-size: 18px;
color: #aaa;
}
li a, li a:visited {
color: #aaaaaa;
text-decoration: none;
font-weight: bold;
font-size: 11px;
}
li a:hover {
color: #dddddd;
}
#latesttweets ul {
list-style-type: none;
width: 300px;
}
#latesttweets ul li {
background: url(images/twitter_footer.png) no-repeat left 20%;
margin-top: 10px;
padding: 5px 0px 10px 32px;
border-bottom: 1px dotted #333333;
}
#latesttweets ul li a, #latesttweets ul li a:visited {
color: #888888;
text-decoration: none;
}
#latesttweets ul li a:hover {
color: #aaaaaa;
border-bottom: 1px solid #aaaaaa;
}
#latesttweets p {
padding-left: 50px;
}
Quando il DOM è caricato, tramite JavaScript caricheremo i nostri tweets:
/* That's the javascript to display the latest N tweets in you HTML page.
*
* Author: Lorenzo Sfarra (lorenzosfarra@ubuntu.com)
* Requires: JQuery, TwitterJS
*/
$(document).ready(function() {
/* We are going to use the TwitterJS function 'getTwitters' with the
* following settings:
* - the css id target element
* - id: your user's (or the user you want to display) id on twitter
* - count: number of tweets to display
* - enableLinks: makes links clickable, including @replies and #hastags
* - ignoreReplies: skips over tweets starting with '@'
* - clearContents: clear the container div
* - template: html template to use for each element
*
* For the complete reference and for all the info required, visit the
* project's website at http://remysharp.com/twitter/, Twitter.js
*/
getTwitters('latesttweets', {
id: 'lrnzsfr',
count: 5,
enableLinks: true,
ignoreReplies: true,
clearContents: true,
template: '"%text%" %time%'
});
});
con il seguente risultato:
È possibile vedere un demo dal quale vedere poi il sorgente.
Nessun commento:
Posta un commento