SERVICIOS - DISEÑO - FREEBIES - MEJORA TU BLOG -

11 jun. 2014

Contador de Seguidores de las Redes Sociales. (Me gusta, G+ y Followers de Twitter)

Toca Tutorial y como siempre una vez más por mail algunas me habéis preguntado cómo poner los botones de G+ (+1) Me gusta de Facebook y el de twitter en el blog, pues bien yo voy a ir a quitar la paja y os daré el código para que vosotras lo tengáis como lo tengo yo.

Siempre explico los tutoriales y los hago en base a lo que yo tengo en el blog y de la manera que yo lo he hecho porque es la que a mí me ha funcionado. Porque así luego, si no os funciona y me preguntáis sé contestaros las dudas.
Cosa que si no supiera cómo funciona y lo hubiera sacado de por ahí y ya está, no sabría contestaros las dudas. Bueno al lío:

En este tutorial os enseñaré a poner los botoncitos que veis en la imagen enmarcados. El botón grande de Google Plus no, porque ya lo enseñé en esta guía de Google Plus. (TODOS están en el mismo Gadget, bueno más abajo entenderéis lo del gadget)

Por partes, primero el botón de +1 de Google Plus:
<div class="g-plusone" data-href="http://lireth.blogspot.com.es/" data-size="medium">
<script type="text/javascript">window.___gcfg = {lang: 'es'};
(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();</script></div>

En la parte que aparece la dirección de mi blog, en color azulito, ponéis la dirección de vuestro blog.

Botón de Facebook:
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FlirethNotebook&amp;width=200&amp;layout=button_count&amp;action=like&amp;show_faces=true&amp;share=false&amp;height=21" style="border: none; height: 21px; overflow: hidden; width: 200px;"></iframe>

En la parte de color azulito, tenéis que poner el identificador de vuestro Facebook.
¿Cómo lo obtengo?
Fácil, os vais a vuestro facebook o vuestra página del blog en facebook (fanpage) y en la dirección os saldrá algo así: https://www.facebook.com/lirethNotebook?ref=bookmarks (en la mía sale esto)
Bueno vuestra ID sería lo que está antes del ? y después de la última /.

O sea, ¿veis que dice lirethnotebook en la dirección? Pues en vuestra dirección pondrá otra cosa como.... https://www.facebook.com/ElblogdePerica?ref=bookmarks

Pues copiáis ese nombre, palabra, lo que tengáis y esa es la ID de vuestro Facebook, lo ponéis donde está lo azulito.

Twitter:
<a class="twitter-follow-button" data-lang="es" data-show-screen-name="false" href="https://twitter.com/LirethNotebook">Seguir a @LirethNotebook</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
Lo mismo que en Facebook, sustituís la parte azul del código por vuestra dirección de twitter. Y en la parte de color verde, ponéis el mensajito que queréis que aparezca en el botón.

Si seguís al pie de la letra el tutorial, sale, ahora si sin daros cuenta borráis una letra o una coma de más, ya no saldrá bien.
Vale ahora ya tenéis el Código de vuestros botones. Vamos a ponerlo.
Como siempre vamos a Diseño dentro de nuestro blog y una vez allí agregamos un gadget de HTML/Javascript.

Pegamos todo el código. Primero el de Google Plus. Para que el siguiente botoncito aparezca debajo, tal como yo lo tengo, después de pegar el código de G+ apretaréis el Enter de vuestro teclado (o el Intro del teclado numérico) y debajo escribiremos esto <br>
Esto es un Break, un salto de línea, o sea pa escribir debajo.
Después de ese <br> damos al enter otra vez y debajo pegamos el código de Facebook o twitter.
Y así sucesivamente.
Dais a guardar, arrastráis el gadget donde queráis que aparezca y listo. Guardando que es gerundio.

¿Os ha servido? Si tenéis dudas, algo no sale, mirar bien TODO, seguid al pie de la letra el Tutorial y como ultima instancia, mandarme un Mail para que os ayude (cuando pueda que ya sabéis que estoy mu liá)
Besotes pa toas :D
PD: Si os da problemas el botón de FACEBOOK (no os aparece o sale solo un rectángulo) mandarme un correo con los siguientes datos:
Asunto: Botón Facebook me gusta
Nombre del blog y dirección del blog
Dirección de la página de Facebook del blog
Así podré solucionar cualquier problema que os surja.

Lireth's Notebook

17 comentarios:

  1. que util! me gusta mucho lo voy a poner, mil gracias!

    ResponderEliminar
  2. Me has estado leyendo el pensamiento esta semana???? llevo dándole vueltas a cómo poner visible lo que por defecto queda horroroso, y vienes tú con ello!!
    Increible
    Mil gracias como siempre!!
    Abrazos

    ResponderEliminar
  3. Gracias Maja.
    Yo en mi blog tengo ya el g+, y he puesto un enlace para que la persona que quiera vea mi facebook..supongo que con eso vale..¿no?

    ResponderEliminar
    Respuestas
    1. Claro que vale, estos botones son para ver en el mismo blog cuanta gente te sigue en cada red social.
      Besotes :)

      Eliminar
  4. Que bien, super úil para cuando abra mi pagina de facebook y twitter.
    Me gustan tus tutos, super bien explicados!
    Gracias :D

    ResponderEliminar
  5. Yo el problema que tengo es con el de Google+, me aparece que sólo tengo un seguidor, cuando en realidad tengo 3, no se porque, pero el botón que instale, no se actualizan los seguidores, y lo hice como dijiste :-(

    ResponderEliminar
    Respuestas
    1. Mira yo tengo ahora mismo 388 y aquí en el blog dice 348. No te preocupes cada vez que Google le de por actualizar el numero de seguidores te irá subiendo el contador.
      Te funciona el botón porque le he dado a seguir y en la pagina de Google ha contabilizado. Dale tiempo y así irá actualizándose :)

      Eliminar
  6. Bien!!!! Muchas gracias!!!! Hace unos días que estaba pensando en ponerlo en mi blog. No sabía por donde empezar así, esta chupado. Otra vez gracias!!!!!!

    ResponderEliminar
  7. Voy a ello y te cuento, gracias guapísima

    ResponderEliminar

  8. hola una pregunta como puedo obtener solo el numero de seguidores de twitter para asi asignarlo a una variable, sabes si se puede

    ResponderEliminar
    Respuestas
    1. Pues creo que si te conectas a tu cuenta de Twitter te dice los seguidores que tienes, en tu "muro".

      Luego en Twitter tienes como en Facebook, un enlace a su apartado de desarrolladores donde te dan el código para tener el botón de los seguidores, puedes personalizarlo o fijarte en el código, puede que des con la línea de código que necesitas para extraer solamente el numero de seguidores.

      No tengo ni idea :P

      Eliminar
  9. En los botones de facebook y G+ no me aparece el numero de seguidores reales, en facebook tengo mas de 5000 y solo aparece 5 y en g+ tengo 1200 y solo aparece 1

    ResponderEliminar
  10. En los botones de facebook y G+ no me aparece el numero de seguidores reales, en facebook tengo mas de 5000 y solo aparece 5 y en g+ tengo 1200 y solo aparece 1

    ResponderEliminar
  11. Muchas gracias por el tutorial ¡muy útil!
    El único problema que tengo es con el botón de G+ que me dice que no tengo ni un solo seguidor (vale, ahí tengo pocos pero sí tengo jejeje), igual ya leí por ahí arriba algunos comentarios que es cosa de google y sus actualizaciones, así que ningún problema, esperaré a que me los marque y ya :)

    ¡Besos! ^^

    ResponderEliminar