17 julio 2013

Mostrar las veces vista una entrada en Blogger


Hoy os enseñaré a instalar un script dinámico que incrementará automáticamente el valor de las páginas o post vistos, cuando un usuario visite su blog. Los datos del contador se almacenarán en una base de datos gratuito proporcionado por Firebase.

Veamos como conseguirlo:

1. Crea tu cuenta Firebase
Con ello tendremos acceso a una base de datos y ver las estadísticas, aparte de mantener una copia de seguridad de las entradas vistas.

Rellenamos los campos con cuidado y luego creamos nuestra base de datos.

2. Crear una base de datos Firebase

Una vez activada la cuenta crearemos nuestra base de datos rellenando el cuadro de entrada con el nombre de tu blog.
En mi caso he insertado amor-sevillista y esto genera la siguiente URL firebase:

Ahora click en ella y nos redirige a la base de datos, copiamos la url del navegador y la guardamos.
Nos genera una url semejante a esta:  https://amor-sevillista.firebaseio.com

3. Instalando los Post Vistos:

1.- Ir a Plantilla
2.- Copia de seguridad de la plantilla
3.- Haga clic en Editar HTML
4.- Marque la casilla "plantilla de formato"
5.- Buscar </b:skin>


Clic en flecha para expandir.
6.- Ahora busca ]]></b:skin>
Justo antes pegue el siguiente código CSS:

#views-container {
width: 105px;
float: right;
}
.cargando {
background: url('https://dl.dropboxusercontent.com/u/54259066/amorcarga.gif') no-repeat left center;
width: 16px;
height: 16px;
}
.viewscount {
float: right;
color: #000;
font: bold 14px;
}
.views-text {
float: left;
font-size:12px ;
color: #7E7E7E;
}
.views-icon{
background: url('https://dl.dropboxusercontent.com/u/54259066/postvistos.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}

Personalizaciones:
Para cambiar el color del texto del numéro, #000
Para cambiar el color del texto: 7E7E7E;
Para cambiar la alineación, de derecha a izquierda. right (derecha) o left (izquierda)

7.- El siguiente paso sería instalar el script de Firebase para que detecte nuestro blog y pegamos el siguiente código después de <head>

<script src='https://cdn.firebase.com/v0/firebase.js'/>

8.- Ahora instaleremos el siguiente script antes del cierre </body>
<script>
$.each($(&#39;a[name]&#39;), function(i, e) {
var elem = $(e).parent().find(&#39;#postviews&#39;).addClass(&#39;cargando&#39;);
var blogStats = new Firebase(&quot;https://amor-sevillista.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;));
blogStats.once(&#39;value&#39;, function(snapshot) {
var data = snapshot.val();
var isnew = false;
if(data == null) {
data= {};
data.value = 0;
data.url = window.location.href;
data.id = $(e).attr(&#39;name&#39;);
isnew = true;
}
elem.removeClass(&#39;cargando&#39;).text(data.value);
data.value++;
if(window.location.pathname!=&#39;/&#39;)
{
if(isnew)
blogStats.set(data);
else
blogStats.child(&#39;value&#39;).set(data.value);
}
});
});
</script>


Cambiamos la URL mía de Firebase (https://amor-sevillista.firebaseio.com/) por la que generásteis en el paso 2.

9.- Por último, buscamos <data:post.body/> y arriba colocamos lo siguiente:

<div id='views-container'><span class='views-icon'/>
<div class='views-text'>Veces visto:</div>
<div class='cargando viewscount' id='postviews'/></div>

Nota: Puedes encontrar varios <data:post.body/>, si es así,  debería funcionar en el primero, pero si no aparece,  pruebe en los siguientes.

Pulse Guardar y está todo listo!


15 comentarios

muy bueno esto mañana lo pondre en practica y te comento, hace tiempo que alguien hizo un codigo sobre lo mismo en dos ocasiones lo inserte y funciono solo unos dias luego ya no hubo manera el autor dijo que no se podia arreglar pero seria bueno el truquito bueno te cuento mas adelante gracias por todo lo que compartes bye

ya lo puse en uno de mis blogs,lo hice bien pero el contador esta como pensando, con la imagen de carga,necesita de tiempo para contabilizar o es inmediato?

Pués sí, necesita su tiempo de carga al igual que todo el blog, entra en mi portal y observarás que necesita su tiempo para mostrar las entradas.

ok me habia imaginado, muchas gracias y en que portal me dices que entre, si te refieres a https://amor-sevillista.firebaseio.com/, no me deja...

No hombre, en la portada principal de este blog.....jaja.

Si jajaja eso ya lo ví, cuando instalo un widget miro todo antes muy bien, pero aunque al mirar en el portal como tu la llamas yo la llamo portada o inicio, ves como carga, sale la cifra, y en mis blogs que ya lo puse en los tres aun no, pero esperare gracias sevillista, yo soy madridista pero sin problemas si me falla el madrid me paso al sevilla jajaja bye

creo que no funciona el invento al menos a mi, solo hace que cargar pero nunca muestra las vistas. Y esta situado segun tus pasos perfectamente por lo cual voy a esperar pero no lo veo...

Amigo funciona pero no me sale como tu estilo pásamelo please

Nitro, observo que te ha salido igual.
Entiendo que has conseguido realizarlo bien.

Estupendo, veo que te ha quedado bien.

Este comentario ha sido eliminado por el autor.

Nitro, no sería más fácil preguntarselo al que ha realizado dicha entrada?

es un gringo y el sitio esta offline

hola amigo....te comento el truco a dejado de funcionar en mi blog..no se que sera.. si me ayudas gracias de antemano una cosa mas ya eres administrador de blog.,, ya tiempo me ayudaste y te hice admim


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"