30 enero 2015

Cómo Insertar un Tweet en tu Blog y los Usos que te Beneficiarán

Pajarito de Twitter

¿Has pensado promocionar cierto contenido que compartes desde Twitter en tu blog? Twitter nos ofrece la opción de insertar un tweet en un blog o página web. Ésto, puede resultar especialmente útil cuando queremos "promover e impulsar" cierto contenido que nos interese.

Diferencia de un tweet insertado y un widget que muestra la actividad más reciente en Twitter


Un tweet insertado tiene un propósito muy distinto al de un widget que muestre los últimos tweets de la cuenta.

Con un widget que muestra los últimos tweets en nuestra cuenta de twitter, conectamos a los lectores del blog a la cuenta en Twitter, manteniéndolos al tanto de nuestra actividad más reciente y permitimos que interactúen de la misma manera que harían desde la cuenta de twitter; mientras que con un tweet insertado, nos enfocamos totalmente en un tweet con propósitos específicos, logrando capturar la atención de los usuarios en dicho tweet, favoreciendo también la interacción de los usuarios.

En Twitter, la vida de un tweet en una linea de tiempo que se actualiza constantemente es corta, y fácilmente puede pasar desapercibido un tweet al que deseamos darle relevancia. Un tweet insertado cumple muy bien ése propósito logrando dar a conocer, promoviendo e impulsando cualquier cosa que nos interese desde nuestro blog.

Al insertar un tweet en el blog logramos darle una relevancia muy marcada al mismo, y a su vez promovemos la participación de los usuarios en el blog o nuestro sitio web con propósitos específicos.


Características

Entre las características más importantes de un tweet insertado, se encuentran la posibilidad de hacer un retweet (RT), marcarlo como favorito, o bien empezar a seguir la cuenta del tweet en cuestión.

Es posible también personalizar su apariencia, ya sea usando un poco de CSS y que abajo veremos, así como agregar algunos parámetros que nos permitan cambiar la forma en que se muestra el tweet.

Usos de un tweet Insertado


Como puedes poner cualquier tweet independientemente de la fecha en que fue hecho, siendo de tu cuenta o cualquier otra, algunos usos útiles son:
  • Darle notoriedad a un tweet que hable bien de tu marca o negocio.
  • Promover el último tweet que has hecho en tu cuenta. 
  • Promover una entrada actualizada del blog, permitiendo que otros la compartan.
  • Promocionar un sorteo que estés llevando a cabo.
  • Difundir alguna novedad o noticia importante para tu audiencia tweteada por ti, o un tercero.
  • Validar lo que estás afirmando en una entrada. En otras palabras: insertar un tweet en una entrada, que compruebe lo que estás diciendo para ganar credibilidad.
  • Abrir un debate a partir de un tweet que hizo un tercero en su cuenta.
  • Recomendar/promocionar el contenido de algún amigo, colega u organización a la que sigues.

¿Qué otros usos se te ocurren?

Bueno, mientras tanto, veamos cómo ponerlo en el blog ;)

Insertar un tweet en la columna lateral de tu blog o cualquier otra sección de la plantilla

Puedes poner el tweet ya sea en la columna lateral del blog, en el pie de la página, o cualquier otra columna o sección que soporte gadgets, incluso en una entrada.

Veamos cómo insertar un tweet en cualquier columna de tu blog que soporte gadgets, es decir, en cualquier sección en la que puedas agregar un gadget con la opción: "Añadir un gadget" desde la pestaña Diseño.

  1. Desde Twitter, simplemente te posicionas sobre el tweet que desees insertar, luego, pones el puntero del ratón encima del tweet, y te posicionas encima del icono de tres puntos (...) para que se desplieguen las opciones.
  2. Luego haz click en la opción que dice: "Insertar tweet".
    Opción de insertar twett
  3. Copia el código que te facilitan.
  4. Después, desde tu escritorio en Blogger, ve a "Diseño", y haz click en añadir un gadget.
  5. Finalmente añade el código que copiaste en un gadget con la opción HTML/Javascript.

¡Y listo! ya habrás insertado el tweet y lucirá como puedes ver a continuación:


Aunque claro, el ancho cambiará en función al ancho del lugar donde lo coloques y algunas características presentes en el tweet pueden variar.


Poner el tweet en una entrada
Simplemente copias el código del tweet que te facilita Twitter, siguiendo los primeros pasos que te decía anteriormente (1, 2 y 3), y luego lo pegas desde el editor de entradas, en la entrada que deseas que aparezca.

Recuerda que si pegas el código del tweet desde la vista "Redactar" del editor, debes tener seleccionada la opción: "Interpretar HTML escrito". Si no es así, tienes que pegar el código que te facilitan desde la vista HTML de editor.

Si empiezas a usar Blogger, y no conoces esos detalles, puedes echarle un vistazo a la entrada, donde explico cómo poner código desde el editor de entradas y páginas de Blogger:


Opciones de Configuración para Cambiar la Apariencia del Tweet y sus Características (Parámetros)


Controlar la forma que se muestra el tweet

Por defecto, el tweet insertado aparece con la misma apariencia que se muestra en la página de Twitter, mostrando los mismos datos. Podemos agregar ciertos parámetros con el fin de manipular la forma en que se mostrará.

Ejemplos.
Usando el mismo tweet que anteriormente te mostraba, lo que haremos es cambiar el fondo por uno obscuro, y para ello agregamos ésto: data-theme="dark". Y para que no haya confusiones, a continuación puedes ver el parámetro agregado en el código que Twitter facilita (estoy usando el código del tweet que veías arriba) con el valor "dark" que hará que el tweet tenga fondo obscuro.

<blockquote class="twitter-tweet" lang="es" data-theme="dark">
BlogsterApp, la aplicación que te ayudará a difundir tu blog en las redes sociales. <a href="https://twitter.com/hashtag/cm?src=hash">#cm</a> <a href="https://twitter.com/hashtag/startup?src=hash">#startup</a> <a href="http://t.co/tfg88I2eHk">http://t.co/tfg88I2eHk</a> via <a href="https://twitter.com/iniciablog">@iniciablog</a>
— Karla (@compartidisimo) <a href="https://twitter.com/compartidisimo/status/559913380723433473">enero 27, 2015</a>
</blockquote>


Nota: En el código anterior, he resaltado de color azul, el código que por defecto trae un tweet que vas a insertar. No agregué el script y que viene después de </blockquote> 


Entonces, el tweet se verá así:


Personalizar el color de los enlaces. Es posible personalizar el color de los enlaces del tweet y para ello, solo necesitas agregar el parámetro: data-link-color  con el valor del color, tal y como puedes ver a continuación resaltado con el fondo amarillo.

<blockquote class="twitter-tweet" data-link-color="#FF00FF" data-theme="dark" lang="es">
BlogsterApp, la aplicación que te ayudará a difundir tu blog en las redes sociales. <a href="https://twitter.com/hashtag/cm?src=hash">#cm</a> <a href="https://twitter.com/hashtag/startup?src=hash">#startup</a> <a href="http://t.co/tfg88I2eHk">http://t.co/tfg88I2eHk</a> via <a href="https://twitter.com/iniciablog">@iniciablog</a>
— Karla (@compartidisimo) <a href="https://twitter.com/compartidisimo/status/559913380723433473">enero 27, 2015</a>
</blockquote>


Nota: En el código anterior, he resaltado de color azul, el código que por defecto trae el tweet. No agregué el script y que viene después de </blockquote> 

Entonces, ahora los enlaces se verán así de rosas:


Ocultar el Sumario. Si por ejemplo el tweet muestra resumen (dice: "ver detalles") ya que el sitio Web de origen tiene implementado el sistema llamado: "twitter cards" y no queremos que se muestre la imagen y el resumen, debemos agregar: data-cards="hidden"De ese modo solo mostrará el texto principal. Y ésto lo hacemos del mismo modo que explicaba en el ejemplo anterior.

¿Fácil verdad? Como puedes ver solo se trata de pegar el pequeño código que nos interesa ;)


Personalizar la apariencia del Tweet con CSS (para usuarios familiarizados con CSS)

Personalizar el tweet con CSS te será útil, solo si no vas a agregar el script, o simplemente quieres definir su apariencia antes de que éste cargue y si tienes planes de seguir insertando tweets en el futuro.

Segundos antes de que el tweet se muestre con todas sus características, debido a que no ha cargado el script o si por alguna razón no cargara, la apariencia que tendrá será la misma que tienes por defecto para las citas de tu blog. Aunque, al no cargar el script, no funcionarán algunas características como hacer RT o marcarlo como favorito.

En otras palabras y dicho más técnicamente: el tweet heredará el estilo definido para la etiqueta <blockquote> que tengas en tu plantilla. Una vez que cargue el script, el tweet se verá con todas sus características.

Para manipular su apariencia, podemos usar cualquier propiedad de CSS que pudiera resultar útil para manipular la presentación del texto y su contenedor.

Ahora, veamos las cosas que seguramente te interesará personalizar:

Cambiar la apariencia de la cajita o contenedor del tweet. Como te decía el tweet  aparece en una cajita llamada "cita", que en HTML se representa con una etiqueta llamada blockquote.

Generalmente las plantillas de Blogger tienen definido código CSS para definir la presentación de las citas, sin embargo, podemos especificar cambiar solo la apariencia del tweet, si usamos CSS como el que te mostraré a continuación.

He agregado solo las propiedades que creo pudieras necesitar e interesarte y he puesto un comentario que puedes ver de color azul para que puedas saber de que se trata cada una.

blockquote.twitter-tweet{
display: inline-block;
background-color#f2f2f2/* El color de fondo del tweet */
border1px solid #f2f2f2/* el grosor y color de borde */
}


Cambiar el color de los enlaces.

Para cambiar el color de los enlaces, usarás:

blockquote.twitter-tweet a{
color: #FF00FF;
}


Para editar los colores, puedes consultar esta tabla de colores Web.

Para agregar el CSS, desde el panel de Blogger vas a  Plantilla > Personalizar > Avanzado > Añadir CSS.

Como recomendación, en el caso de que vayas a insertar un tweet en la página principal del blog, colócalo en medio o al final de la página. Ésto para tenga un menor impacto en la carga de tu blog.

Espero sea útil ;)

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.