Todo lo que tu página web necesita

Contadores de visitas para tu web o blog – HTML, PHP

Añadir a web un contador de visitas

 Hola amigo de internet, hoy te enseñare a poner un contador de visitas en tu sitio web totalmente gratis y con un diseño muy atractivo.

¿Comó funciona un contador de visitas?

Se trata de un programa digital de tipo “widget web” que muestra la cantidad de veces que se ha visitado una página web, utilizando su propio registro o conteo.

El contador de visitas ss uno de los tipicos complementos que han acompañado a los sitios web desde sus inicios, habiendo sido utilizado por millones de sitios, inluso por los más famosos.

Para funcionar emplea o bien, las tecnologias JavaScript y una cookie, o PHP junto con una base de datos simple y alguna función jQuery. Ademas de las etiquetas HTML para su incrustracíon y lineas de CSS para su diseño.

Aun asi, su creacíon no es un proceso complicado ni tardado.

Este es el ejemplo de un contador de visitas sencillo:

<div id="sfcrm1jphwx1l3k5p3bbs2d6q8eytyyu4me"></div>
<script type="text/javascript" src="https://counter8.freecounter.ovh/private/counter.js?c=rm1jphwx1l3k5p3bbs2d6q8eytyyu4me&down=async" async></script>
<br><a href="https://www.freecounterstat.com">free web counter</a><noscript><a href="https://www.freecounterstat.com" title="free web counter"><img src="https://counter8.freecounter.ovh/private/freecounterstat.php?c=rm1jphwx1l3k5p3bbs2d6q8eytyyu4me" border="0" title="free web counter" alt="free web counter"></a></noscript>

¿Como crear un contador web gratis?

Puedes utilizar muchas herramientas online, las cuales te ofrecen hermosos diseños y varias opciones de configuracíon para conseguirlo.

Su desventaja es que ponen un enlace de referencia hacia su aplicacíón, lo cual es totalmente justificable, pero si deseas no tener ningun tipo de publicidad en tu contador de visitas puedes ofrecerles una remuneracíón por ello.

También puedes desarrollarlo desde 0 a puro código, lo cual tambien es un proceso sencillo, sin publicidad y que explicare mas abajo.

Pero, ¿Funcionara en tu página web?

Para el primer caso (utilizar una herramienta visual), al tratarse de un widget universal no importa si tu página web esta creada con Joomla, WordPress o cualquier otro CMS, igual te servira.

– Utilizar una herramienta visual online

Para el tutorial usare la que en mi opinión es la mejor opcíon en general, llamada FreeHitCounter.

1. Lo primero que tienes que hacer es ingresar al siguiente website:

Te aparecera lo siguiente:

Contadores de visitas

2. Elige uno de los diseños que se muestran o si quieres ver más, haz click en el enlace: “Create your web counter”.

3. Depues entraras en la configuracíón y veras los siguientes parametros a modificar:

  • En “Location”: debes definir la zona horaria, Si por defecto esta en “America/GTM” o algo similar asi dejalo.
  • Despues en “Categorie of you site”: selecciona la categoria y subcategoria tematica de tu sitio.
  • Luego, en “Numbers digit”: escoge el número de digitos que apareceran y en “Init your counter” define el número inicial del mismo.
  • En cuanto a estilos, en “Counter position”: selecciona la posición general que deseas, es recomendable que dejes la que esta por defecto. Tambien puedes modificar el zoom o tamaño de este.
  • Finalmente escoge el tipo de contador: “Hit counter” recopila los usuarios unicos, mientas que “Visitor counter” todas las visitas, hasta las tuyas.

4.  Solo haz click en “Submit Query” e iras a la página con el código HTML final de tu contador de visitas.

Otras páginas para un contador web para Blogger, Wix, etc

He recopilado un gran número de herramientas de este tipo, conviertiendo a este post en la mayor colección de sus referencias.

El orden es aleatorio y cada opción se revisa constantemente para ver si sigue funcionando.

  • ContadorVisitasGratis

Es una de las opciones que mas diseños ofrece, ademas permite ordenar uno personalizado.

MIra:  Como obtener un informe o analisis SEO de tu web gratis
Visitar
  • WebsMultimedia

El proceso para conseguir los widgets es probablemente uno de los mas sencillos y agradables.

Visitar
  • Ceroted

Se trata del sitio de una agencia, pero que tamiben ofrece este tipo de gadget gratis.

Visitar
  • ReliableCounter

Aunque se ve algo desfasada su herramienta la verdad es que funciona igual de bien que las otras.

Visitar
  • Web-Counter

Esta, aunque igual no se ve muy bien, al final es bastante eficaz, dando increibles contadores.

Visitar
  • Flag Counter

Una de las herramientas mas usadas, ya que proporciona el número de visitas por pais.

Visitar
  • Contador-de-Vistas

Fue la primera opción que probe, haya por los inicios de este sitio, aun sigue igual de funcional.

Visitar
  • ContadorVisitas.mx

Es un sitio mexicano, la verdad es que ofrece pocos diseños pero aun asi lo pongo en la lista, VIVA MÉXICO.

Visitar
  • FreeVisitorCters

Presenta estilos un poco diferentes a lo convencional. No requiere registro y su uso es muy intuitivo.

Visitar
  • SmallSEOTools Web Counters

Esta opción es una de las más completas, pues proporciona varias opciones de personalización.

Visitar
  • Hit-Counts

Presenta un aspecto general muy agradable. No tiene tantos diseños pero los que tiene, son de gran calidad.

Visitar
  • HWebC

Una de las primeras soluciones que existio, aun sigue disponible, dando un monton de contadores.

Visitar
  • GuestCounter

No es la opción mas moderna, pero vaya que cumple bien con lo suyo. Se merece una oportunidad. Tu oportunidad.

Visitar

Como insertar los contadores en Wix, WordPress, etc

Lo unico que tienes que hacer es copiar el código HTML que se te proporciona y pegarlo en tu sitio web exactamente donde quieres que aparezca el complemento.

  • Si no sabes como se insertan estos códigos en plataformas offsite como Webnode, Jimdo, Blogger, Emiweb, Weebly, Wix, etc “Checa este tutorial

Ahi se explica de forma clara, si tienes mas problemas con el proceso, deja un comentario.

Finalmente guarda los cambios y visualiza el widget activo. Ojo: tus visitas obviamente tambien cuentan.

– Desarrollar un contador de visitas con PHP

Todo lo anterior esta enfocado al desarrollo semiautomatico de un contador HTML, de manera visual. Disponible o entendible para la mayoria de nuevos webmasters.

Pero si tú tienes conocimientos en programación web y quieres hacerlo al estilo de la “old school”, metiendote directamente con el código sucio, checa el siguiente tutorial:

HTML + PHP + Base de datos + Imagenes

Para hacerlo, lo primero que necesitas es un método para hacer un seguimiento del número de visitantes. Si bien podrias guardar este número en una base de datos,  eso complicaria un poco más las cosas. Por lo tanto, utilizaremos un archivo de texto simple que lo contenga.

Crea un archivo .txt con una sola cifra que sera con la que iniciara tu contador (0 en todo caso) y guardalo bajo el nombre “visitas.txt”, despues subelo a la carpeta raiz de tu web.

También necesitaras un método para identificar visitantes únicos, ya que el conteo solo debería incrementarse una vez por visitante, no una vez por vista de página. Para esto, usaremos una variable de sesión.

<?php
session_start();
$counter_name = "counter.txt";
 
// Check if a text file exists. If not create one and initialize it to zero.
if (!file_exists($counter_name)) {
$f = fopen($counter_name, "w");
fwrite($f,"0");
fclose($f);
}
 
// Read the current value of our counter file
$f = fopen($counter_name,"r");
$counterVal = fread($f, filesize($counter_name));
fclose($f);
 
// Has visitor been counted in this session?
// If not, increase counter value by one
if(!isset($_SESSION['hasVisited'])){
$_SESSION['hasVisited']="yes";
$counterVal++;
$f = fopen($counter_name, "w");
fwrite($f, $counterVal);
fclose($f);
}
 
echo "You are visitor number $counterVal to this site";

Como puedes ver, use cuatro de las funciones del sistema de archivos de PHP para crear, leer, escribir y cerrar el archivo de texto. verifique si nuestra variable de sesión está configurada antes de incrementar el conteo.

MIra:  Programas que mas te convienen para crear tu página web - GRATIS
Combinarndo los números con las imagenes

Ahora todo lo que debes de hacer es leer el número almacenado en el archivo de texto y mostrarlo en nuestra página web como una imagen. Estos son los pasos para lograrlo:

  • Rellena el valor del contador con ceros, de modo que tenga una longitud de cinco dígitos en total. Por ejemplo, un valor de uno se mostrará como 00001.
  • Divide el valor del contador en una matriz de dígitos individuales. Esto significa que “00001” se convertiría en [“0”, “0”, “0”, “0”, “1”]
  • Usando la función imagecreatefrompng de PHP, crea una referencia a seis archivos png (uno para actuar como el lienzo y cinco dígitos individuales).
  • Usando la función de imagecopymerge de imagecopymerge de PHP, combina estos seis archivos png en uno solo.
    Imprime la imagen final y libérela de la memoria.

El código para esto es un poco más complicado, así que hagámoslo paso a paso. Los pasos uno y dos se logran así:

$ counterVal = str_pad ($ counterVal, 5, "0", STR_PAD_LEFT);
$ chars = preg_split ('//', $ counterVal);

Ahora, antes de que puedas comenzar a manipular imágenes con PHP, necesitaras un conjunto o pack de imágenes para que funcione.

Bssta una busqueda en Google para encontrar uno, por ejemplo este. Independientemente del que decidas utilizar, asegúrate de cumplir con los términos y condiciones del autor.

En preparación para crear dinámicamente la imagen final, he creado un archivo png transparente (canvas.png) que actuará como un lienzo. Esto mide 296px por 75px. También cambié el tamaño de las imágenes individuales a una dimensión de 56 px por 75 px y las guardé con el mismo nombre de archivo que el dígito que representan. Estos se colocarán en el lienzo como se muestra en el diagrama:

Ahora puedo usar imagecreatefrompngpara obtener una referencia a canvas.png, así como a los dígitos individuales, almacenados en los elementos de la carpeta matriz

$im = imagecreatefrompng("canvas.png");
$src1 = imagecreatefrompng("$uno[1].png");
$src2 = imagecreatefrompng("$dos[2].png");
$src3 = imagecreatefrompng("$tres[3].png");
$src4 = imagecreatefrompng("$cuatro[4].png");
$src5 = imagecreatefrompng("$cinco[5].png");

Luego, debes ajustar los dígitos individuales en el lienzo y enviar el resultado al navegador para que se muestre.

Puedes usar imagecopymerge para lograr la primera parte. Los parámetros que toma son los siguientes:

  • recurso de enlace de imagen de destino
  • recurso de enlace de imagen fuente
  • coordenada x del punto de destino
  • coordenada y del punto de destino
  • coordenada x del punto de origen
  • Coordenada y del punto de origen
  • ancho de fuente
  • altura de fuente
  • PCT (podemos dejar esto en 100)
imagecopymerge ($ im, $ src1, 0, 0, 0, 0, 56, 75, 100);
imagecopymerge ($ im, $ src2, 60, 0, 0, 0, 56, 75, 100);
imagecopymerge ($ im, $ src3, 120, 0, 0, 0, 56, 75, 100);
imagecopymerge ($ im, $ src4, 180, 0, 0, 0, 56, 75, 100);
imagecopymerge ($ im, $ src5, 240, 0, 0, 0, 56, 75, 100);

Una vez hecho esto, necesitas enviar la imagen al navegador y liberarla de la memoria:

header('Content-Type: image/png');
echo imagepng($im);
imagedestroy($im);

Aquí está el código fuente PHP completo:

<?php
session_start();
$counter_name = "visitas.txt";
 
// Check if a text file exists. If not create one and initialize it to zero.
if (!file_exists($counter_name)) {
$f = fopen($counter_name, "w");
fwrite($f,"0");
fclose($f);
}
 
// Read the current value of our counter file
$f = fopen($counter_name,"r");
$counterVal = fread($f, filesize($counter_name));
fclose($f);
 
// Has visitor been counted in this session?
// If not, increase counter value by one
if(!isset($_SESSION['hasVisited'])){
$_SESSION['hasVisited']="yes";
$counterVal++;
$f = fopen($counter_name, "w");
fwrite($f, $counterVal);
fclose($f);
}
 
$counterVal = str_pad($counterVal, 5, "0", STR_PAD_LEFT);
$chars = preg_split('//', $counterVal);
 
$im = imagecreatefrompng("canvas.png");
$src1 = imagecreatefrompng("$chars[1].png");
$src2 = imagecreatefrompng("$chars[2].png");
$src3 = imagecreatefrompng("$chars[3].png");
$src4 = imagecreatefrompng("$chars[4].png");
$src5 = imagecreatefrompng("$chars[5].png");
 
imagecopymerge($im, $src1, 0, 0, 0, 0, 56, 75, 100);
imagecopymerge($im, $src2, 60, 0, 0, 0, 56, 75, 100);
imagecopymerge($im, $src3, 120, 0, 0, 0, 56, 75, 100);
imagecopymerge($im, $src4, 180, 0, 0, 0, 56, 75, 100);
imagecopymerge($im, $src5, 240, 0, 0, 0, 56, 75, 100);
 
// Output and free from memory
header('Content-Type: image/png');
echo imagepng($im);
imagedestroy($im);
?>

Guardalo como un archivo bajo el nombre “contador.php” y subelo a la carpeta raiz de tu web.

MIra:  Como Aumentar el CTR de Adsense

Ahora puedse escribir lo siguiente en su código HTML y hacer que muestre tu propio contador de visitantes:

<div class = "visitor-count"> Número de visitantes a esta página hasta el momento: </ div>
<img alt = "Hit counter" src = "countador.php" />

Y ¿Para que poner un contador de visitas?


www.Counters-Free.net

<script type="text/javascript" src="https://www.counters-free.net/count/ec2"></script><br>
 <a href='https://www.counters-free.net/'>www.Counters-Free.net</a> <script type='text/javascript' src='https://www.whomania.com/ctr?id=80c7a7a43d256ef2bedb8d7b608a785c3833cd1e'></script>

Hay webmasters que piensan que un complemento asi ya no sirve de nada en la actualidad, por las diferentes herramientas robustas de analitica web que existen, pero la realidad es que suelen ser muy cerrados de mente.

Hay que entender que un contador de visitas se toma en muchas ocasiones como una insignia.

Ademas, representa un dato estadisticos y bueno, los datos estadisticos nos encantan por naturaleza a los seres humanos (no me estoy saliendo del tema).

Al igual los gardalones o insignias suelen ser importantes para cualquier proyecto.

El mostrar cuantas visitas has tenido desde que iniciaste tu web o cuantas tuviste el ultimo mes, o incluso cuantos usuarios tienes en tu comunidad es super eficaz.

Talves con otros datos, pero Facebook, Taringa, SoundCloud, suelen mostrar en sus páginas contadores sencillos.

Tienes que ser un poco estrategico para notar el potencial de este tipo de plugins.

¿Como conseguir estadisticas completas?

Si tu proposito es analizar todo el trafico (visitas) que genera tu página web, de la manera mas completa, te recomiendo utilizar en gran medida Google Analytics, es muy facil de aprender a usar, intentalo.

Conoceras datos muy importantes para medir el exito realmente de sitio, como de que pais te visitan, cuando te visitan (que dia a que hora), como te visitan (navegador usado, dispositivo usado) y lo mas importante, porque te visitan (que buscan).

Puedes empezar con un tutorial basico, como este.

Aun asi, muchos creadores web ofrecen sus propias estadisticas, como lo son, Webnode, Weebly, JIMDO, WordPress.com, emiweb y Wix.

Contacta con el soporte de tu plataforma para ver si te las proporcionan y son na función gratuita o no.

Otros tipos de contadores para páginas web

He creado un artículo en donde se muestran casi todos los tipos de cuentas en formato de reloj para sitios, desde un countdown hasta un stopwatch. Te invito a lo que veas.

Bueno espero que toda esta información sobre crear un contador de visitas para páginas web te haya servido mucho, si crees que se lo merece, comparte este post. Un saludo querido lector.

PD: Este tutorial fue el primero en TodopatuWeb.


https://www.todopatuweb.net/

Nacido en el segundo estado más marginado de México, es un joven emprendedor que se ha atrevido a desafiar las reglas del éxito. Desde muy pequeño fue encantado por las computadoras, hasta tal punto de pasar todo el día explorando el software que se le atravesara por su camino. Le encanto tanto el Diseño Web que se dio cuenta de los problemas que tenían muchas personas relacionadas al tema y a los 12 años creo un pequeño blog llamado "Patuweb" para ayudarlas, lo que actualmente es esta plataforma, para continuar con este texto habría que ver hasta donde llega. Creo a los 12 años "TodopatuWeb",

Subscribe
  • Hola! A ver si me podéis decir por favor qué info de las visitas llega a las webs o blogs cuando tienen contador. Espero que nada parecido al IP o número de teléfono pero por si acaso quiero informarme… Espero respuesta, muchas gracias!

    Jana abril 27, 2018 2:52 pm Responder
    • Hola, ¿podrías ser más especifica, no te he entendido muy bien Jana?, gracias de antemano 🙂

      TodopatuWeb abril 28, 2018 4:59 am Responder
  • Hola, claro, pongo el ejemplo que me ha traído hasta aquí. Una amiga ha participado en el foro de un blog y ha resultado que los administradores son una gentucilla de cuidado que insulta, calumnia y amenaza a los que discrepan de ellos. Bien, pues ahora han puesto un contador de visitas con geolocalizador y hay gente en el foro (los participantes externos) que tiene miedo por si ese contador pudiera registrar el teléfono (o la IP del pc) de quien visita/participa en el blog. En otras palabras, ¿tienen acceso los administradores de blogs a esta info de los participantes? Espero haberme explicado mejor ahora, muchas gracias!!

    Jana abril 29, 2018 3:55 am Responder
  • Hola, pues mira, tu IP publica se puede saber fácilmente y muchos datos tecnicos más, visita: http://www.vermiip.es/.
    Pero a lo que concierne otros datos como el teléfono y cuentas bancarias, si estas personas no son genios de la informática solo pueden recopilarlos siempre y cuando acepte el usuario, osea mediante un formulario, una descarga o la instalación de una aplicación, por eso siempre hay que leer lo que permitimos.
    Para dar tu ubicación el navegador igualmente por defecto te pide permiso, un contador máximo te puede decir de que pais es la persona y eso si esta bien hecho, uno como los que muestro aquí no.

    TodopatuWeb abril 29, 2018 4:22 am Responder
  • Hombre, estos no tienen pinta de ser unos genios aunque no descartamos que encarguen trabajitos a otros… Muchas gracias por la información, muy amable!
    J.

    Jana abril 29, 2018 12:08 pm Responder
  • Hola de nuevo, el contador-geolocalizador de esta gente debe de tener truco. Acabo de pinchar en “detalles” y sale exactamente la provincia y la ciudad en la que estoy. Es esto normal?

    Jana mayo 3, 2018 3:01 pm Responder
    • Mandame el link de la página por mensaje de Twitter a @todopatuweb para checarlo bien

      Morlan mayo 13, 2018 6:11 am Responder

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *