Siguiendo con digestly, me gustaría explicar cómo crear un botón como el de «Add to digestly». Para los que conozcáis la aplicación, cuando creas tu cuenta digestly crea por ti una publicación donde añadir los enlaces que quieres que tus subscriptores reciban diaria o semanalmente. Para conseguir estos enlaces, creamos el botón «Add to digestly». Para los que no la conozcáis os dejo Rails Rumble 2013: Digestly, y podéis entrar en digestly para probarlo ;)
¿Cómo creamos un botón para guardar esta info en favoritos?
La estrategia no es difícil, un poco rebuscada, pero no es difícil. La idea es poder leer la url por la que navegas, no? Y luego enviar esta url a digestly para guardarla en nuestro inbox, no? Bien, ya sabemos qué queremos hacer. ¿Cómo lo hacemos?
1. El botón no es un botón, es un script.
Aquí es donde entra el Javascript. La primera necesidad es comunicarse con digestly. Como no podemos insertar código directamente en la web en la que estamos, lo que podemos hacer es insertar un tag script. Algo así:
<script src="http://digest.ly/u/xxxxx/gen_digest.js"></script>Un tag script como este carga en la web el script de la url que muestra. Y es este script el encargado de enviar la url de la web a digestly para crear el enlace.
2. La magia del AJAX
Una vez el botón inserta el tag script comentado, el script cargado sólo tiene que realizar una llamada AJAX a la aplicación con los datos deseados, es decir la url como mínimo, y por ejemplo, el título de la página para mejorar la información. La base podría ser esta:
function loadXMLDoc() {
var x, u, w = window, d = document, l = d.location;
if (w.XMLHttpRequest) {
x = new XMLHttpRequest();
}
x.onreadystatechange = function() {
if (x.readyState == 4 && x.status == 200) {
alert('Link Saved!');
}
return false;
}
e = encodeURIComponent;
u = 'http://digest.ly/u/xxxxx/digest?url=' + e(l.href) + '&title=' + e(d.title);
x.open("GET", u, true);
x.send();
return false;
};
loadXMLDoc();Venga, y si ahora quieres verlo en acción, entra en digestly, crea tu cuenta y colecta enlaces para tu publicación!