comunidades

Botones de click to tweet para tu blog y como ponerlos

Botones de click to tweet para tu blog y como ponerlos en wordpress y blogspot.

Tenemos que incitar a nuestros lectores a que compartan nuestro contenido en las redes sociales para darnos a conocer.

Una manera es conseguir que compartan nuestros post en Twitter, la mejor manera de hacerlo es mediante los famosos “clic to Tweet”.

Existen muchos plugins sociales para Twitter o Facebook  pero en el caso de Blogspot podemos necesitar hacerlos a mano dado que si nuestra plantilla no incluye botones para compartir las tenemos que poner nosotros .

Hoy traigo una manera de insertar un botón de Click para Twittear que puedes colocar en cualquier parte de tu post de forma rápida, además puedes dejar una parte escrita para que compartan.

El aspecto de la publicación es este y pueden modificar el mensaje si se les ocurre algo mejor:

click-to-tweet-facil


Para esto existen plugins en wordpress, pero es tan fácil que no merece la pena instalar un plugin para esta función, además si lo hacemos a mano podemos customizar el botón del click to tweet de la forma que mas nos guste o poner uno distinto en cada post.

Si usas twiter cards es totalmente compatible el clicar y tuitear, existen plugins como SUMOME que incluyen funciones para twittear incluso frases del texto, pero los usuarios no las aprovechan.

Antes de meternos con el tutorial que es muy fácil os dejo estos post sobre gadgets y plugins para instalar en el blog relacionados con la res de Twitter:

pagar con un tweet


Pagar con un click o tweet en tu blog, una alternativa para lograr mas visibilidad en las redes.

twiter cards blogger y wordpress


Como instalar las Twitter cards para que tu contenido sea mucho mas atractivo

# 1 Clic para twitter con imagen personalizada

Este es mi favorito y creo que el mas fácil y resultón, para hacerlo necesitas la imagen del tamaño que quieras, puedes hacerla en cualquier editor de imágenes o si te gusta esta la descargas y toda tuya!.

editores de fotos gratis


Sube la imagen a tu blog o dónde alojes las imágenes si es que lo haces en otro lugar diferente.

Consigue la dirección de la imagen: Clic derecho del botón:

click-to-tweet


El código que necesitamos es esta línea:

Seguido de status= hay que escribir lo que quieres que aparezca en el Tweet por ejemplo: Un posts sobre como compartir en twitter , luego puedes añadir tu nombre de usuario y así te enteras de la mención  via @yo blogueo (la palabra via no es obligatoria puedes poner por o de) y luego la dirección de la imagen

El código del html lo tienes que pegar desde la vista html del post en el que lo vas a poner.

<a href="http://twitter.com/home/?status=Escibe lo que quieras via @tuNombreDeUsuario" target="_blank" > <img src="dirección de donde tienes la imagen del botón" alt="rellena con palabra clave" > </a>

Básicamente redirige a Twitter a la ventana de escribir un tweet nuevo con el la frase que hayas elegido, la persona que comparte puede modificarla.

Te aconsejo poner el nombre de usuario para que te avise cuándo se comparte, en caso de que tu tweet sea muy largo quita el via y el usuario.



# 2 Hacer un botón para twitear

Si no te gusta abusar de imágenes puedes hacer un botón para que que hagan el click to tweet que resulta menos invasivo, además puedes personalizar el mensaje del botón tipo “twitea esto!”.

Para que el botón tenga la apariencia que queramos tenemos dos opciones: o localizas la clase de otro botón que tengas en el blog y la usas para el botón o haces una clase nueva.

El código del html lo tienes que pegar desde la vista html del post en el que lo vas a colocar y para el código CSS depende de la plataforma:

Si eres de blogguer tendrás que ir como siempre a plantilla > opciones avanzadas > estilos CSS allí pegas el código de la clase de tu botón.

Si eres de wordpress normalmente los temas o plantillas tienen un apartado para añadir código o estilos css , puede también modificar el archivo style.css o utilizar un plugin como Simple custom CSS o el editor de código de Jetpack y toquetear lo justo.
La anatomía del link para el clicar y twitear cambia algo respecto al anterior que tenía una imagen:

La clase que es la que nos dice que estilo CSS vamos a aplicar a ese elemento, la podemos llamar de manera normal pero no empieces con números… class=”t-boton”

Puedes hacer todas las clases que quieras para diferentes botones, imagina que en cada sección los quieres de un color con crear una clase para cada uno ya lo tienes, un poco loco el ejemplo pero no está mal.

HTML:

<a href="http://twitter.com/home/?status=Escibe lo que quiera via @tuNombreDeUsuario" class="nombre de la clase" target="_blank" >Lo que quieras que ponga en el botón </a>

El estilo CSS:

.t-boton { background: #000000; padding:10px; text-align: center; font-weight: bold; display: block; } .t-boton:hover { background: #474747; }

Lo que quieras que ponga en el botón

No olvides hacer una llamada a la acción clara para que tus lectores pinchen

Como puedes ver es mas fácil de lo que parece dirigir a tus lectores hacia twitter,  hacerlo a mano es fácil y te permite personalizar mas tus tweets, es una manera de recordar que compartan tu contenido!

.

Fuente: este post proviene de yo-blogueo, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Cómo crear los mejores títulos para post

Cómo crear los mejores títulos para post Los títulos para post representan uno de los elementos más importantes para conseguir visitas, seguidores e incluso conversiones en nuestro blog. Para crear lo ...

Aprende a ahorrar gestionando tu dinero

Aprende a ahorrar gestionando tu dinero ¿Dificultades para llegar a fin de mes? Seguro que  no paran de decirte «aprende a ahorrar». Lo primero de todo ¡ten paciencia!. Entre tú y yo, ahorra ...

Recomendamos

Relacionado

general social

Cómo poner botones para que te sigan en las redes sociales en Blogger

Poner botones para redes sociales con los que tus usuarios puedan seguirte te ayudará a incrementar la presencia de tus contenidos en Internet. Si bien muchas veces preferimos utilizar botones al final de nuestra entradas para que nuestros usuarios compartan si lo desean nuestras entradas, es importante también que puedan seguirnos por las redes sociales si así lo desean. Qué mejor sitio para que ...

Marketing Social

5 mejores Plugins WordPress para botones de redes sociales

No pierdas nunca la oportunidad de dejar que otros compartan tu contenido on-line. Aquí puedes ver algunos de los mejores plugins WordPress para botones de redes sociales. He estado unas varias semanas investigando cuales son los mejores plugins wordpress que se adapten mejor en la web de Zimyos y que permita instalar unos botones de redes sociales que sean lo suficientemente funcionales pero simp ...

Diseño para Blogs Uncategorized código ...

Los mejores trucos HTML para tu blog que no te puedes perder

Los mejores trucos HTML para tu blog que no te puedes perder Hay cosas que sólo las podemos hacer mediante código html y conviene saber algunos trucos que te ayuden a mejorar tu blog ya sea en blogger o wordpress. En este post hay algunos trucos html para que puedas controlar un poco más tu diseño y hacer cosas a mano que vas a necesitar para tus post , además así si no has usado nunca código te v ...

Redes sociales Uncategorized Blogger ...

Añade un Social Locker en blogspot e impulsa tus redes sociales

Añade un Social Locker en blogspot e impulsa tus redes sociales Los social Locker son una manera de conseguir que tus lectores compartan o den me gusta en las redes para poder acceder a un contenido especial. El pago social o el pay per action es cada vez mas frecuente en los blogs, en principio era algo reservado a los blogs de descargas y gracias a su efectividad se han extendido por la blogsfer ...

propuestas

Cómo crear un menú a pantalla completa para tu Blog

Hemos visto cómo crear sencillos pero útiles menús para Blogger en Diarios de la nube con los que organizar y exponer los contenidos a nuestros visitantes. Con el tiempo, la forma de mostrar estos menús han ido evolucionando hasta llegar a una nueva presentación que se realiza a pantalla completa. Los menús de pantalla completa están cobrando un fuerte protagonismo en los diseños de presentación d ...

general social

Cómo poner botones para redes sociales al final de tus entradas

Muchos Bloggers prefieren añadir botones para redes sociales al pie de sus entradas para que los usuarios puedan compartir el contenido que ha sido de su agrado. Vamos a aprender a colocar en el pie de entradas botones para compartir en Facebook, Twitter y Google+ nuestras creaciones.¿Qué son los botones para las redes sociales en un Blog?: Los componentes oficiales o no oficiales de las distinta ...

general medios sociales promocionar tu blog

Cómo poner otros botones para compartir en el blog

Os habréis dado cuenta ya que los iconos para compartir que trae Blogger, son bastante pequeñitos y discretos: Por eso yo los cambié hace ya tiempo por otros que pasan un pelín menos desapercibidos: Tampoco quiero ser "pesada" y poner unos gigantescos, pero esos me parece que se ven lo suficientemente bien como para "recordar" a la gente que pueden compartir mi post en las re ...

general

Crea una barra de menús que quede siempre fija en la parte superior de tu Blog.

La creación de un menú fijo para la parte superior del Blog es una popción a tener en cuenta dependiendo del tipo de presentación y la plantilla que se está utilizando. Cuando tratamos Blogs que enumeran gran cantidad de entradas y estas hacen qe haya que desplazarse verticalmente por los contenidos, el usuario puede quedar desprovisto de elementos de navegación hasta que llega a la parte inferior ...

general propuestas

Save to Drive un botón en tu web para guardar archivos en Google Drive

Google Drive es el servicio de almacenamiento en la nube desarrollado por Google. Hemos visto diversas utilidades que aprovechar con Google Drive para potenciar a Blogger: para alojar y servir una web completa, para alojar hojas de estilo o recursos para nuestra web que no podemos almacenar en Blogger, para crear enlaces de descarga de archivos con los que complementar nuestras entradas (instrucc ...

general

Creación y personalización de menús en Blogger paso a paso.

La creación de menús en páginas web es fundamental para la estructuración de la información a la que los usuarios pueden acceder. En los Blogs, al igual que en cualquier publicación web, el orden y la presentación de las categorías de la información que manejamos puede ordenarse mediante un menú. La exposición de contenidos mediante un menú facilita a los usuarios el acceso a la información, consi ...