Primeros pasos con Buzz (segunda parte): Un widget de Buzz para Wordpress
En el articulo anterior analizábamos la API de acceso a Buzz. Una vez analizada ya podemos ver como integrar Buzz en nuestra pagina. Para eso vamos a utilizar la API de Google para leer feeds y un script propio que lo que hará es mostrarnos el código HTML de los comentarios en in iframe refrescándolo cada 1 segundo. De este modo es posible crear un widget de Buzz para nuestro wordpress.
Antes de nada hay que tener en cuenta dos aspectos importantes:
- Al estar usando librerías Ajax de Google es necesario que solicites una clave API propia:
- En el lector de RSS debes indicar el RSS de tu cuanta de Buzz en el articulo anterior te explicamos como obtenerla.
sample.html
<head>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAMGph6fpNzf-ET0oBGVVHJxRpfcICevY5tQgqnPHEJCivekQnPxSD1FOWXFY6-VJtM6TmsT-tOJc9mg"></script>
<script type="text/javascript" src="buzz.js"></script>
</head>
<body>
<div id="buzz" style="width:300px;background-color:#e1f3fa;">
<h1 style="font:20px Verdana;Color:#2193c5;margin:7px;">Iker.perez</h1>
<hr style="border: 1px dotted #CCCCCC;margin:5px 7px 0px 7px;">
<iframe id="buzz_msg_box" style="margin:0px 7px 0px 7px;border:0px; width:286px; height:450px;background-color:#ffffff;"></iframe>
<hr style="border: 1px dotted #CCCCCC;margin:0px 7px 0px 7px;">
<img src="buz.png" style="margin: 7px" width="100px">
</div>
</body>
</html>
buzz.js
var Editor;
window.onload = function()
{
Editor = document.getElementById(‘buzz_msg_box’).contentWindow.document;
Editor.designMode = "on";
}
function initialize() {
var feed = new google.feeds.Feed("http://buzz.googleapis.com/feeds/111738004311961586383/public/posted");
feed.setNumEntries(20);
feed.load(function(result) {
if (!result.error) {
var alltest = "";
var simplepost = "";
for (var i = 0; i < result.feed.entries.length; i++) {
simplepost = "";
var entry = result.feed.entries[i];
simplepost +’ <div id="message" style="font: 12px Verdana;"><b>’+entry.publishedDate.split(" -")[0]+’:</b><br/>’+entry.content+’</div>\r\n’;
simplepost = simplepost +’<hr style="border: 1px dotted #CCCCCC;"/>\r\n’;
//entry.title+"<br>"+;
alltest = alltest + simplepost ;
}
Editor.body.innerHTML = alltest;
}
});
}
function reloadComments() {
google.setOnLoadCallback(initialize);
setTimeout(‘reloadComments()’,1000);
}
reloadComments();
Ikalbeniz
