miércoles, 14 de mayo de 2014

Si tienes un blog en Blogger donde le das la posibilidad a tus lectores de descargar algún archivo, códigos de programación, en mi caso, tal vez se te a acorrido mostrar un contador de descargas para cada archivo descargado, si es esto lo que deseas hacer te enseñare a programarlo para que lo puedas adaptar a tus necesidades.

Para programar nuestro contador de descargas haremos uso de JavaScript y de la API de Google Url Shortener ademas del servicio de almacenamiento que escojamos para alojar nuestros archivos descargables.

Almacenar archivos en la nube


Lo primero que debemos hacer es seleccionar un servicio de almacenamiento en la nube, existen muchos de pago o gratuitos, puedes seleccionar el que quieras siempre que te permita compartir el archivo o la url de descarga con los demás.

Entre las opciones mas comunes tienes: Almacenamiento en la Nube (gratis)

Una vez elegido el servicio que utilizaremos solo debemos subir los archivos deseados y obtener la url para compartir el archivo que deseamos poner a disposición de nuestros lectores para su descarga.

Subimos el archivo deseado a Google Drive, y obtenemos la url para descargar de forma directa, para saber como hacerlo mira este tutorial: Cómo crear link directos a Google Drive.

Generar estadísticas de descarga


Usaremos el servicio de Google llamado Google Url Shortener, utilizado para acortar las url y ademas llevar las estadísticas de click.

Acortamos la url para descarga directa que creamos en el paso anterior, solo la pegamos y presionamos el botón Shorten URL, el sistema generará la nueva url, la copiamos ya que la necesitaremos mas adelante. 


Haciendo uso de la API Url Shortener accederemos a las estadísticas de descargas, lo haremos mediante java script para mostrar esta información en nuestro blog.

Programación del contador de descargas


Lo siguiente que requerimos es ingresar a Google Developer Console crear un nuevo proyecto o usar uno existente si lo deseamos, lo importante es habilitar la API URL Shortener.


Accedemos al proyecto, para habilitar las APIs vamos al menú lateral izquierdo APIs y autenticación, seleccionamos APIs, en el cuadro de búsqueda tecleamos url shortener api para una búsqueda rápida o buscamos una a una entre las distintas APIs disponibles.


Cuando encontremos la api deseada hacemos clic sobre ella y presionamos habilitar el la pantalla que aparece al cliquear.


Ultimo paso crear la clave, en el menú lateral izquierdo localizamos APIs y autenticación, Credenciales, para crear la clave que necesitamos hacemos clic sobre el botón crear clave nueva, nos mostrara los diferentes tipos de clave que podemos crear, seleccionamos clave de navegador, crear.


Añadir script a plantilla de blogger


Accedemos a nuestro blog, en la sección plantilla seleccionamos editar html, esto no permitirá editar el código del blog, lo que aprovecharemos para añadir el siguiente script, debemos localizar la etiqueta de cierre, podemos usar ctrl+f para una búsqueda rápida. 

Colocamos el siguiente código antes de la etiqueta de cierre, el código se incluye en el enlace de descarga al final.


Para agregar a blogger el contador de descargas, nos vamos al editor de entradas y en modo HTML copiamos el siguiente código:


En el lugar donde deseemos que aparezca el enlace de descarga con el conteo de las mismas debemos agregar lo siguiente:

<a  id="download_counter" target="_blank" title="Descargar Archivo X"></a>

<script src="https://www.googleapis.com/urlshortener/v1/url?key=CLAVE_API&amp;shortUrl=URL_SHORT&amp;projection=ANALYTICS_CLICKS&amp;callback=countClicks"></script>

Debemos cambiar los parámetros CLAVE_API por la clave generada por Google Developer Console y URL_SHORT por la url acortado por el servicio Google Url Shortener, el resultado será el siguiente:

7 comentarios :

  1. Gracias, llevo muucho tiempo buscando un script como este, Gracias por compartir. ahora mismo me pongo

    ResponderEliminar
  2. No entendi, no me salio donde coloco la funcion, y donde coloco el Data. Te agradeceria tu ayuda.

    ResponderEliminar
  3. Muchas gracias por la info, disculpa tu crees que pueda implementar esto a una web normal.

    ResponderEliminar
  4. ¿Cómo puedo configurar la descarga directa?... Me abre una pestaña nueva y veo el fichero online. ¿Cómo lo puedo solucionar?

    ResponderEliminar
  5. HOLA... Tengo un problema, cuando coloco un botón de descarga sale normal, pero cuando coloco dos uno de ellos no me muestra el numero de descargas. ¿Cómo lo puedo solucionar?. Gracias

    ResponderEliminar
    Respuestas
    1. El script js que se coloca en la plantilla de blogger, debe ser modificado para colocar la información en mas de un tag html.

      Eliminar