Admin Admin
Mensajes : 36 Fecha de inscripción : 17/09/2011
| Tema: Mostrar una lista de entradas recientes de un blog Miér Oct 12, 2011 11:19 am | |
| Para leer las últimas entradas de un blog o sitio web utilizamos una vez más la amplia oferta de códigos fuente que hace google para los desarrolladores. En este caso, nos ofrece la posibilidad de leer las últimas entradas de un feed que designemos. 1.php - Código:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google AJAX Feed API</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="2.js"></script> <script type="text/javascript">
google.load("feeds", "1");
function executeSearch() { var url = document.getElementById("urltextbox"); if (!url.value) { url.focus(); return false; } var blog = new BlogPreview(document.getElementById("blog")); blog.show(url.value); return false; }
function initialize() { var url = document.getElementById("urltextbox"); url.value = "http://www.rincondelcodigo.com/rss.php"; executeSearch(); } google.setOnLoadCallback(initialize);
</script>
<style type="text/css">
body { background-color: white; color: black; font-family: Arial, sans-serif; font-size: small; }
.blog h2 a, .blog h2 a:visited { text-decoration: none; color: black; }
.blog .entry { margin-bottom: 1.5em; }
.blog .title { font-size: medium; }
.blog .author { color: gray; margin-bottom: 0.5em; }
</style> </head> <body> <form action="" onsubmit="return executeSearch()"> <input id="urltextbox" type="text" name="url" size="70"/> <input type="submit" value="Leer ultimos posts"/> </form> <div id="blog"></div>
</body> </html>
2.js - Código:
-
function BlogPreview(container) { this.container_ = container; }
BlogPreview.prototype.show = function(url, opt_noTitle) { var feed = new google.feeds.Feed(url); var preview = this; feed.load(function(result) { preview.render_(result, opt_noTitle); }); }
BlogPreview.prototype.render_ = function(result, opt_noTitle) { if (!result.feed || !result.feed.entries) return; while (this.container_.firstChild) { this.container_.removeChild(this.container_.firstChild); }
var blog = this.createDiv_(this.container_, "blog"); if (!opt_noTitle) { var header = this.createElement_("h2", blog, ""); this.createLink_(header, result.feed.link, result.feed.title); }
for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = this.createDiv_(blog, "entry"); var linkDiv = this.createDiv_(div, "title"); this.createLink_(linkDiv, entry.link, entry.title); if (entry.author) { this.createDiv_(div, "author", "Posted by " + entry.author); } this.createDiv_(div, "body", entry.contentSnippet); } }
BlogPreview.prototype.createDiv_ = function(parent, className, opt_text) { return this.createElement_("div", parent, className, opt_text); }
BlogPreview.prototype.createLink_ = function(parent, href, text) { var link = this.createElement_("a", parent, "", text); link.href = href; return link; }
BlogPreview.prototype.createElement_ = function(tagName, parent, className, opt_text) { var div = document.createElement(tagName); div.className = className; parent.appendChild(div); if (opt_text) { div.appendChild(document.createTextNode(opt_text)); } return div; }
| |
|