Contador de vistas por entrada con Javascript, PHP y MySQL

Blogger es una plataforma muy buena, sobre todo cuando tomamos en cuenta que usa la infraestructura google para mantenerse; sin embargo, hay muchas limitantes que podríamos considerar molestas.

Una de ellas, es la incapacidad de usar PHP directamente en nuestro código; aunque es posible incluir contenido dinámico por medio de Javascript, PHP y MySQL.

A continuación les presentaré un tutorial el cual pueden usar sin problemas en sus blogs de Blogger, o incluso en cualquier sistema y mejor aún si pueden incluir PHP directamente.

Requerimientos mínimos

No es necesario tener ningún conocimiento técnico en PHP, Javascript o MySQL; sin embargo es necesario tener lo siguiente:

1. Un Servidor Web que acepte PHP (casi todos lo hacen)
2. Una base de datos MySQL

1. La base de datos

Este proceso puede sonar feo, dar miedo incluso; sin embargo, no hay nada que temer, es fácil y voy a guiarles paso a paso. Aunque los pasos pueden variar dependiendo del servicio de alojamiento que usen.

Recuerden que para poder manejar bases de datos es necesario tener el nombre de usuario y contraseña de la base de datos a la mano, esto generalmente lo pueden configurar ustedes en el panel de administración de su servicio Hosting; o bien se les entrega al momento de contratar su servicio de alojamiento web.

En caso de tener dudas, por favor consulten con su proveedor.

1.1 Accediendo a PHPMyAdmin

Usaremos PHPMyAdmin, una herramienta que hoy en día viene incluida en todos los servicios de Hosting existentes. Esta herramienta nos permitirá crear la base de datos.

Generalmente se encuentra en el panel de administración de nuestro servidor web. El icono de phpMyAdmin se ve exactamente al presentado a la derecha. En caso de no encontrarlo les recomiendo que consulten al administrador de su servicio de alojamiento web.

Una vez que accedamos a PHPMyAdmin, veremos un panel como el siguiente:

1.2 Creando la tabla en la base de datos

Ahora lo que haremos será seleccionar en el menú izquierdo la base de datos que desean utilizar; esta base de datos depende completamente del servidor en el que estén. Es posible que ustedes tengan que crear una base de datos o que el administrador de sistema les asigne una.

Una vez que seleccionamos nuestra base de datos, tenemos que crear la tabla que usaremos, para hacer esto iremos a la pestaña "SQL"

Pegaremos el siguiente fragmento:

CREATE TABLE `blog_views` (
  `id` bigint(20) NOT NULL auto_increment,
  `url` varchar(100) collate utf8_unicode_ci NOT NULL,
  `views` bigint(20) NOT NULL,
  PRIMARY KEY  (`id`),
  UNIQUE KEY `url` (`url`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Después de copiar el fragmento hacemos click en continuar, y con eso habremos creado nuestra tabla.

2. El Script PHP

Ahora lo que tenemos que hacer es abrir nuestro editor de texto plano, Bloc de Notas por ejemplo, copiamos el siguiente fragmento de código y lo salvamos como "vistas.php":

<?php

/**
*  Contador de Vistas por entrada/página
*  Creado por Kuroir para http://blog.exolimpo.com
*/

/*
* CONFIGURACIÓN
* La dirección de tu página web, recuerda poner \. en lugar de solo "."
*/
$pagina_permitida = 'miblog\.blogspot\.com';
// Palabra que se empleará después del contador; Ejemplo: 10 vistas
$vistas = 'vistas';

// Base de Datos:
// Host, normalmente es localhost
$hostname = 'localhost';
// Nombre de usuario
$username = 'usuario';
// Contraseña
$password = 'contraseña';
// Base de datos
$database = 'base_de_datos';
	
// Apagamos el Reporte de errores, para evitar mostrar información insegura.
error_reporting(0);

// Tomamos la url por medio de el valor GET
$referer = $_GET['ex'];

// Verificamos que la URL sea válida, para evitar que abusen del sístema.
if( preg_match('/^http:\/\/'.$pagina_permitida.'\/[\w\d\/\-\.\+]*/', $referer))
{	
	// Conectamos con la base de datos
	if($handle = mysql_connect($hostname, $username, $password))
	{
		// Limpiamos todo
		$refer = mysql_real_escape_string($refer);
		
		// Seleccionamos la Database
		mysql_select_db($database);

		// Ahora limpiamos los datos usado por la base de datos:
		mysql_query("
					UPDATE blog_views
					SET views = views + 1
					WHERE url = '$referer'
					");

		// Verificamos si se pudo hacer el update; en caso de no poderse,
		// creamos el elemento.
		if(mysql_affected_rows() < 1)
		{
			// Insertamos el nuevo valor, ignorando cualquier error.
			 mysql_query("
						INSERT IGNORE INTO blog_views
							(url,views)
						VALUES
							('$referer',1);
						  ");
		}
		
		// Obtenemos el número de vistas.
		$result = mysql_query("SELECT views AS vistas FROM blog_views WHERE url = '$referer';");
		$row = mysql_fetch_row($result);
		
		// La salida:
		echo "document.write(\"{$row[0]} {$vistas}\");";
		
		// Liberamos los recursos.
		mysql_free_result($result);
		
		// Cerramos la conexión
		mysql_close($handle);
		
	} else {
		// No nos pudimos conectar con la base de datos, mostramos un signo (?)
		echo "?";
	}
} else {
	// Mostramos un errror, en caso de que intenten usar un dominio no permitido.
	die("URL No permitida");
}

?>

2.1 Configurando el Script

Este proceso no es tardado, lo único que tenemos que editar en el archivo son las siguientes variables:

• $pagina_permitida = 'miblog\.blogspot\.com';
  Esta es la dirección de tu sitio, esto lo necesitamos para prevenir que otros webmasters se roben tu contador y lo usen en su sitio.
  Recuerda usar "\." (sin comillas) para especificar un punto.
  • Ejemplos:
    $pagina_permitida = 'blog\.exolimpo\.com';
$pagina_permitida = www\.miweb\.com';
• $vistas = 'vistas';
  Esta es la palabra que saldrá después del contador
  • Ejemplos:
    $vistas = 'impresiones';
• Configuración de la base de datos:
  $username = 'usuario';
  $password = 'contraseña';
  $database = 'base_de_datos';

2.2 Subir el archivo por medio de FTP

Ahora lo que tienen que hacer es subir el archivo vistas.php a una carpeta en su hosting; esto lo pueden hacer con cualquier FTP.

3. Usando el contador

Ya con esto tenemos el proceso completado, ahora lo que tenemos que hacer es comenzar a contar las impresiones mediante javascript. Este método es excelente para Blogger y cualquier servicio que permita Javascript. Buscamos el siguiente fragmento en nuestra plantilla:

<div class='post-footer-line post-footer-line-1'>

Y después de esa línea incluímos el siguiente fragmento de código:

<script expr:src='&quot;http://www.tuhosting.com/vistas.php?ex=&quot; + data:post.url' type='text/javascript'/>

Recuerden editar cambiar www.tuhosting.com por la ubicación que usaron al momento de subir el script por FTP.

Nota: Este mismo script puede ser usado sin Javascript en sitios PHP; sin embargo no profundizaré al respecto. Para usarlo en sus aplicaciones PHP lo único que tienen que hacer es hacer que en lugar de leer la página por medio de $_GET la lea de su superglobal $_SERVER