Contadores de visitas para tu web o blog – HTML, PHP
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.
¿Cómo 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 tecnologías 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 así, su creación no es un proceso complicado ni tardado.
Este es el ejemplo de un contador de visitas sencillo:
¿Como crear un contador web gratis?
Puedes utilizar muchas herramientas online, las cuales te ofrecen hermosos diseños y varias opciones de configuración para conseguirlo.
Su desventaja es que ponen un enlace de referencia hacia su aplicación, lo cual es totalmente justificable, pero si deseas no tener ningún tipo de publicidad en tu contador de visitas puedes ofrecerles una remuneración por ello.
También puedes desarrollarlo desde 0 a puro código, lo cual también 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 servirá.
– Utilizar una herramienta visual online
Para el tutorial usare la que en mi opinión es la mejor opción en general, llamada FreeHitCounter.
1. Lo primero que tienes que hacer es ingresar al siguiente website:
[sociallocker]https://www.freecounterstat.com/index.php[/sociallocker]
Te aparecera lo siguiente:
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. Después entraras en la configuració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 así déjalo.
- Después en «Categorie of you site»: selecciona la categoría y subcategoria temática de tu sitio.
- Luego, en «Numbers digit»: escoge el número de dígitos que aparecerán 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. También puedes modificar el zoom o tamaño de este.
- Finalmente escoge el tipo de contador: «Hit counter» recopila los usuarios únicos, 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, convirtiendo 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.
Es una de las opciones que mas diseños ofrece, ademas permite ordenar uno personalizado.
[symple_button url=»https://www.contadorvisitasgratis.com/» color=»orange» button_target=»_blank» btnrel=»nofollow»]Visitar[/symple_button]
El proceso para conseguir los widgets es probablemente uno de los mas sencillos y agradables.
[symple_button url=»https://www.websmultimedia.com/contador-de-visitas-gratis» color=»orange» button_target=»_blank» btnrel=»nofollow»]Visitar[/symple_button]
Se trata del sitio de una agencia, pero que también ofrece este tipo de gadget gratis.
[symple_button url=»https://www.cerotec.net/contadores/» color=»orange» button_target=»_blank» btnrel=»nofollow»]Visitar[/symple_button]
Aunque se ve algo desfasada su herramienta la verdad es que funciona igual de bien que las otras.
[symple_button url=»http://www.reliablecounter.com/es/» color=»orange» button_target=»_blank» btnrel=»nofollow»]Visitar[/symple_button]
Esta, aunque igual no se ve muy bien, al final es bastante eficaz, dando increíbles contadores.
[symple_button url=»http://es.web-counter.net/» color=»orange» button_target=»_blank» btnrel=»nofollow»]Visitar[/symple_button]
Una de las herramientas mas usadas, ya que proporciona el número de visitas por país.
[symple_button url=»http://flagcounter.com/» color=»orange» button_target=»_blank» btnrel=»nofollow»]Visitar[/symple_button]
Fue la primera opción que probé, haya por los inicios de este sitio, aun sigue igual de funcional.
[symple_button url=»http://contador-de-visitas.com/» color=»orange» button_target=»_blank» btnrel=»nofollow»]Visitar[/symple_button]
Es un sitio mexicano, la verdad es que ofrece pocos diseños pero aun así lo pongo en la lista, VIVA MÉXICO.
[symple_button url=»http://www.contadorvisitas.mx/» color=»orange» button_target=»_blank» btnrel=»nofollow»]Visitar[/symple_button]
Presenta estilos un poco diferentes a lo convencional. No requiere registro y su uso es muy intuitivo.
[symple_button url=»https://www.freevisitorcounters.com/» color=»orange» button_target=»_blank» btnrel=»nofollow»]Visitar[/symple_button]
- SmallSEOTools Web Counters
Esta opción es una de las más completas, pues proporciona varias opciones de personalización.
[symple_button url=»http://smallseotools.com/visitor-hit-counter/» color=»orange» button_target=»_blank» btnrel=»nofollow»]Visitar[/symple_button]
Presenta un aspecto general muy agradable. No tiene tantos diseños pero los que tiene, son de gran calidad.
[symple_button url=»http://smallseotools.com/visitor-hit-counter/» color=»orange» button_target=»_blank» btnrel=»nofollow»]Visitar[/symple_button]
Una de las primeras soluciones que existió, aun sigue disponible, dando un montón de contadores.
[symple_button url=»http://www.hitwebcounter.com/» color=»orange» button_target=»_blank» btnrel=»nofollow»]Visitar[/symple_button]
No es la opción mas moderna, pero vaya que cumple bien con lo suyo. Se merece una oportunidad. Tu oportunidad.
[symple_button url=»http://guestscounter.com/» color=»orange» button_target=»_blank» btnrel=»nofollow»]Visitar[/symple_button]
Como insertar mi contador una vez creado
Lo único 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.
No importa si usas Wix o cualquier otro creador web, podras añadirlo sin bronca.
Si despues de todo esto te pierdes aún, puedes pedirnos ayuda totalmente gratis por aquí.
– Desarrollar un contador de visitas con PHP
Todo lo anterior esta enfocado al desarrollo semiautomático de un contador HTML, de manera visual. Disponible o entendible para la mayoría de nuevos webmasters.
Pero si tú tienes conocimientos en programación web y quieres hacerlo al estilo de la «old school», metiéndote 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 podrías guardar este número en una base de datos, eso complicaría 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 guárdalo bajo el nombre «visitas.txt», después súbelo a la carpeta raíz 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.
Combinando los números con las imágenes
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.
Basta una búsqueda 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);
?>Guárdalo como un archivo bajo el nombre «contador.php» y súbelo a la carpeta raíz de tu web.
Ahora puedes 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?
Total: 16 756Today: 16Yesterday: 57Visitors
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 así ya no sirve de nada en la actualidad, por las diferentes herramientas robustas de analítica 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 estadísticos y bueno, los datos estadísticos nos encantan por naturaleza a los seres humanos (no me estoy saliendo del tema).
Al igual los galardones 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.
Tal vez con otros datos, pero Facebook, Taringa, SoundCloud, suelen mostrar en sus páginas contadores sencillos.
Tienes que ser un poco estratégico para notar el potencial de este tipo de plugins.
¿Como conseguir estadísticas completas?
Si tu propósito 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 fácil de aprender a usar, inténtalo.
Conocerás datos muy importantes para medir el éxito realmente de sitio, como de que país te visitan, cuando te visitan (que día a que hora), como te visitan (navegador usado, dispositivo usado) y lo mas importante, porque te visitan (que buscan).
Puedes empezar con un tutorial básico, como este.
Aun así, muchos creadores web ofrecen sus propias estadísticas, 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 widgets númericos, desde countdowns (que pueden mostrarse en pop ups) hasta un stopwatch. Te invito a lo que revises.
Tambien existen los contadores sociales que indican las veces que un contenido se ha compartido en determinadas Facebook, etc. Estos suelen ofrecerse en widgets de botones sociales como AddThis.
Muy aparte, si deseas revisar otros complementos que ayuden a tu página web, explora las cajas de comentarios y los creadores de formularios, que te ayudaran a tener una mejor conexión con tus visitantes.
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.
