Buscar este blog

22/11/16

Tutorial: Colocar botón de twittear en blogger

Hola a todos

Vengo con otro tutorial sobre twitter.


Hay dos botones de Twitter que no pueden faltar en tu blog jamás,  el botón seguir y el de twittear una entrada.  Dos botones que se suele confundir mucho pero, primero os voy a explicar la diferencia entre ambos botones, y recordaros que el otro día os puse un post de como poner el botón de seguir en vuestros blogs, ver entrada. 
 
El botón seguir de Twitter suele aparecer en un lateral, y que a través de él, haciendo un click, pueden seguirte en twitter sin necesidad de buscarte.




Qué es el botón Twittear de Twitter
botón de seguir
El botón Twittear es el que se utiliza para compartir las entradas del Blog.

Botón Twittear de Twitter con contador
Un ejemplo del botón Twittear con contador en vertical

Blogger ofrece una botonera propia, donde incluye la mayoría de botones sociales, pero si os fijáis en la imágen de abajo, pasan bastante desapercibidos además de no poder configuarlos un poco a nuestro gusto.


Creo que la mejor opción es poner los nuestros propios, asi que, no me enrollo más y empecemos con el tutorial.

Para desactivar los botones que aparecen por defecto en Blogger, debes acceder a "Blogger > Diseño" y editar el gadget "Entradas del Blog", en la ventana emergente que te aparece busca la opción "Mostrar botones para compartir" y desmárcala.



Cómo poner el botón Twittear


  1. Haz una copia de seguridad de tu plantilla
    Blogger > Plantilla > Crear/Restablecer copia de seguridad
  2. Accede al código HTML de tu plantilla
    Blogger > Plantilla > Editar HTML
  3. Copia este código
    <a class='twitter-share-button' data-count='vertical' data-lang='es' data-via='@fagrafics' expr:data-text='data:post.title' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share'>Twittear</a>
  4. Pega el código en la zona donde quieras que aparezca el botón
    1. Si quieres colocar el botón al final de las entradas
      Busca todas las apariciones de "post-footer-line post-footer-line-1" (mediante CTRL + F) y copia el código del punto 3 justo debajo de esa línea
    2. Si vas a colocar el botón al principio de las entradas
      Busca todas las apariciones de "post-header-line" (CTRL + F) y copia el código del punto 3 justo debajo
  5. Sustituye fagrafics por el nombre de tu cuenta de Twitter
  6. Guarda la plantilla y visualiza el resultado
El código de ejemplo da por hecho que ya tenías el botón seguir  o algún otro gadget de Twitter. Si no te funciona, debes añadir este código justo debajo del código creado en el proceso anterior:
<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>

¿Nos regalas un tweet?

7 comentarios:

  1. ¡Hola guapa!
    Anda, este no lo sabía, me lo apunto para ponerlo^^
    ¿Podrías traernos un tuto de como poner los enlaces de las entradas así bonitos (como tienes tu las etiquetas)? Estaría genial^^

    Besos bonita!!
    María |  Cazadores de Libros

    ResponderEliminar
  2. Ya lo tengo! Y el blog no tiene twiter jaja de todos modos mil gracias!!

    ResponderEliminar
  3. Holitasss..
    Esta me lo apunto para poder incluirlo a mi blog.
    Y así ir mejorando.
    Gracias por el tutorial.
    Saludos.

    ResponderEliminar
  4. Pues esto no lo sabia así que lo miraré, gracias por la información. Besos y nos leemos 💋💋

    Delia---------La guarida de los amantes.

    ResponderEliminar
  5. Gracias por el tutorial.
    Un saludo.
    Isa
    El Desván de las delicias

    ResponderEliminar
  6. Hola! Muy buen tuto, los botones de blogger son feillos y este mola más.

    ResponderEliminar

Gracias por pasarte por Dreaming Graphics y contratar nuestros servicios.
Mail de contacto: susanaescmag@gmail.com