Como tuitear frases de tus articulos en wordpress o blogger

Hoy te voy a enseñar como tuitear frases dentro de tus articulos en blogger y en wordpress.

Que pasa Familia, otra vez por aquí, seguro que más de una vez has querido remarcar una frase para que a golpe de click pueda ser tuiteada con el mínimo esfuerzo, y has tenido muy buena idea, porque es genial.
Se incrementan las conversiones y tuitear tus frases se convierte en un juego de niños, ademas potencia el engagement.


Vale, la teoría está muy bien pero pasemos a la práctica.
El noventa y pico de mis colegas usan wordpress, así que te voy a decir como poder hacerlo en wordpress de manera muy simple.

Cómo tuitear frases de tus articulos en WordPress.

Primero, vas al panel de administración, pulsas en Apariencia / editor, luego en las plantillas buscas "Theme Functions" (functions.php) vas a una nueva pantalla y ahí pones el siguiente código al final del todo:

Poner shortcode en wordpress

Pon este código
// TUITEALO
function tuitear( $atts, $content = null, $code = "" ) {
$return = '';
$return .= $content; $return .= '';
return $return;
}
add_shortcode( 'tuitealo', 'tuitear' );


Ahora le das a actualizar archivo y ya tienes creado un shortcode para tus tuits internos.
Después de esto, vamos a darle un estilo al css para que quede más lucido, llame la atención y provoque que la gente lo comparta en la red social del pajarito azul.

Para ello, seguimos en Apariencia / Editor y está vez en la derecha vamos abajo del todo a "Estilos" y pulsamos sobre "Stylesheet (style.css).

Ahora ponemos este código:
.tuitealo {
font-size: 30px;
font-family: 'Ubuntu Mono',Open Sans;
font-weight: bold; font-style:italic;
padding-top: 25px;
margin: 5px;
color:#41B1B4;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0AovHkXh2wSTcwSzEk8rTLxafZ1scH_P9IveBB85lBpGS70ull7e4fSU25d8LO_5zfpMgMA-fxZlZ2_RA-AlMilbWMFETcsf7uQ0bCAJrn16d6g4KkLpDZBMljr3fyHgHjYBucZPgSsY/s1600/tuitealo.png) no-repeat;
bottom right;
padding-bottom:25px;
border-top: dashed #41B1B4 5px;
border-left: dashed #41B1B4 5px;
}

y le damos a actualizar archivo y tendremos el shortcode con su estilo css preparado.
Para tu interés si quieres ponerlo a tu gusto te explico un poco que es cada cosa, para que le puedas dar tu toque personal.
  •   font-size: 30px; (el tamaño de la fuente)
  •   font-family: 'Ubuntu Mono',Open Sans; (la fuente claro jeje)
  •   font-weight: bold; (la fuente es negrita)
  •   font-style:italic; (aquí le dice que es cursiva)
  •   padding-top: 25px; (espacio en px que tiene por arriba)
  •   margin: 5px;  (con un margen izquierdo de 5px)
  •   color:#41B1B4; (el color de la tipografia)
  •   display: block; 
  •   background:  url(http://www.capitanpimienta.es/wp-content/uploads/2015/10/tuitealo.png) no-repeat bottom right; (el dibujo del fondo ese pajarito azul, bottom right es abajo a la derecha, puedes cambiar su posicion.)
  •   padding-bottom:25px; (distancia por abajo de 25px)
  •   border-top: dashed #41B1B4 5px;  (le he puesto un borde discontinuo de 5px arriba de ese color)
  •   border-left: dashed #41B1B4 5px; (y otro borde igual para la izquierda)
Ahora lo que tienes que hacer, cuando escribas una entrada y quieras marcar un texto para tuitear, tienes que poner el texto entre los siguientes corchetes.

Ejemplo
[tuitealo] Esto se merece un tuit porque mola![/tuitealo]

Lo que estamos haciendo con el shortcode [tuitealo] es darle el estilo a la frase, pero ¿cómo la va a compartir así? ¿de dónde saca el enlace?
Bien, eso es muy simple, vete a la página tuitealo y desde ahí puedes preparar tu tuit para compartir.

Lo dejo arriba en el menú para que lo tengas siempre que quieras a mano.

Ahora que ya has creado la "url" que quieres compartir, lo que tienes que hacer es seleccionar la frase y ponerle un Enlace, en ese enlace pones la "url" que has sacado de tuitealo.
Ya está, ya tienes preparada tu frase con el estilo que te gusta para compartir en twitter y el resultado es el siguiente:


Esto se merece un tuit


Ha sido simple no? Bien, pues ya que has llegado hasta aquí te voy a cambiar una acción social por un #trucoseo, dame un +1, o comparte en twitter y te lo regalo...
Que no, no hace falta crack.


Tranquilo, yo los trucos los doy gratis, pero ya que estás, si te gusta el seotruco dale abajo a modo de agradecimiento 😅.
El truco es el siguiente, yo lo que hago cuando preparo un tuit, o si comparto algo por alguna red social, realizo la búsqueda de la palabra que quiero posicionar en google. Por poner un ejemplo, busco en google "poner disqus en wordpress" y busco donde está mi resultado, cuando lo encuentro (todavía 3ª página...ainsss) le doy al botón derecho y pulso en "copiar dirección de enlace", luego esa url la acorto con algún acortador, aquí puedes ver los mejores acortadores de url de mano de nuestro amigo Carlos Miñana de publicidad en la nube , la url acortada es la que utilizo para poner en Tuitealo (o compartir en algún grupo de whatsapp, facebook, etc.), de esa manera, cuando alguien pulsa en ese enlace, lo que realmente está haciendo es realizar la búsqueda con las palabras clave que yo quiero posicionar en google, y darle justo a mi resultado, por lo que tiendes a mejorar la respuesta de usuario y subir en las SERPS.

No todo lo que reluce es oro, y no todos tenemos WordPress, así que para los que como yo habéis decidido utilizar blogger en vez de WordPress, aquí os explico cómo tuitear las frases de tus artículos en Blogger.

Para WordPress es más simple, pudes utilizar el tutorial que he puesto arriba para personalizarlo a tu gusto, o puedes usar también el plugin de nuestro amigo Victor Campuzano - Vcgs Toolbox igual te suena eso de piopialo (es de este crack).
Pero para Blogger no tenemos plugins, así que vamos al lío, que ha eso has venido.

Cómo tuitear frases de tus artículos en Blogger o Blogspot.

Entra en el panel de administración de tu blogger y vete a "Plantilla" - Editar HTML (haz una copia antes de nada por si acaso se va la luz, entra algún duende o vete tu a saber).
Una vez en la pantalla de edición de HTML, pulsa dentro y dale a "Control+F" y en la caja de busqueda que te aparecerá busca ]]></b:skin>


Editar HTML
Justo encima de ]]></b:skin> vas a poner lo siguiente:

Pon este código
.tuitealo {
  font-size: 30px;
  font-family: 'Ubuntu Mono',Open Sans;
  font-weight: bold;
  font-style:italic;
  padding-top: 25px; 
  margin: 5px; 
  color:#41B1B4; 
  display: block; 
  background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0AovHkXh2wSTcwSzEk8rTLxafZ1scH_P9IveBB85lBpGS70ull7e4fSU25d8LO_5zfpMgMA-fxZlZ2_RA-AlMilbWMFETcsf7uQ0bCAJrn16d6g4KkLpDZBMljr3fyHgHjYBucZPgSsY/s1600/tuitealo.png) no-repeat bottom right; 
  padding-bottom:25px;
  border-top: dashed #41B1B4 5px; 
  border-left: dashed #41B1B4 5px; 
}

codigo tuitealo blogger

Le das a Guardar plantilla y ya tienes tu "clase" de tuitealo creada.

Yo he puesto .tuitealo, pero tu puedes poner la clase que más te guste, un nombre que te recuerde lo de tuitear, ahora verás porque.

Una vez creada la clase, lo que tienes que hacer es cada vez que estes editando o creando una nueva entrada, tienes que poner la frase que quieras que aparezca para compartir en tu entrada, luego le das a HTML (arriba a la izquierda) 

Esto va en HTML
Buscas la frase que has puesto y justo encima pones:
<div class="tuitealo">
y debajo de la frase cierras el div
</div>
por lo que te quedará algo tal que así:
<div class="tuitealo"> Aquí la frase que quieres tuitear </div>


Ahora vuelves al modo "Redactar" seleccionas la frase y le pones el enlace que se obtiene de la página tuitealo, desde la cuál puedes preparar tu tuit para compartir como te he contado antes (aunque si eres de blogger y has pasado de WordPress te lo repito).

He puesto un menú que pone tuitealo arriba para que lo tengas siempre que quieras a mano.
En esa página tienes que preparar la url que hará el trabajo de compartir tu frase en twitter, con mención, hashtag, etc...


Ya tienes preparada tu primera frase en una entrada para tuitear en tu blog.

Si tienes cualquier duda o no te ha quedado algo claro, comenta que te ayudo!!

* Conclusión

Si has llegado hasta aquí eres un campeón - campeona, así que te paso un enlace de una página muy chuli para crearte logos con la tipografia de twitter, muy cool para personalizar tu logo de tuitealo.

http://www.twitlogo.com

Un abrazo crack, y logicamente espero tus comentarios o no te tuiteo!

Comentarios

Entradas populares de este blog

Cómo conseguir backlinks de calidad gratis para tu blog

Como descargar Imágenes de Google Maps

Cómo poner comentarios en tu canal de Telegram