Las Twitter Cards En Blogger

Este post es de http://www.lascronicasdelcesar.com/2015/08/como-instalar-las-twitter-cards-en.html




Introducción

Las Twitter Cards nos pueden ayudar mucho a la hora de compartir un link ya que gracias a ellas podemos hacer mas vistoso el tweet que enviamos a ojos de las personas que lleguen a ver nuestro tweet e incrementa las posibilidades de que interactúen con nuestro tweet y le den clic a el link compartido y así enviarlo a nuestro blog o página.





Concepto Básico

Podemos resumir que las Twitter Cards son diferentes maneras en las que un tweet con link se presenta dentro de Twitter.



Tipos de Twitter Cards

Resumen. En donde encontraremos el Titulo, Descripcion, Vista en Miniatura y la Cuenta de atribución.



Resumen con Imagen Grande. Similar a la de Resumen pero con una Imagen más Grande.



App. Para detallar una app para movil con link a descarga.



Reproductor. Para adjuntar un video/audio/multimedia.



En este link puedes ver más a detalle cada tipo de Twitter Card.



El tipo de Twitter Card que vamos a instalar es el de Resumen con Imagen Grande.

Post Relacionado

Pasos Para Instalar En Blogger

1.Tienes que accesar a blogger y elegir en blog en donde quieres instalar el código para las Twitter Cards.



2.Elegir "Plantilla" y despues "Editar HTML".

Buscamos la etiqueta </head> y justo antes de la etiqueta insertamos el siguiente código:

Dar clic para ver en grande

No te preocupes que el código te lo dejo mas abajo para que puedas copiar y pegar.



¿Cómo Modifico El Código Para Utilizarlo A Mis Necesidades?

En la primera parte del código (en la imagen) se muestra la un comentario que especifica que a partir de ahí hacia abajo inician el código de las Twitter Cards (este pedazo de código es opcional ya que solamente es un comentario).



La siguiente linea especifica el tipo de Twitter Card que vamos a querer, en este caso el de Resumen con Imagen Grande (summary_large_image)



La tercera y cuarta linea se especifica la cuenta en Twitter del sitio al que pertenece el link y la cuenta de la persona que escribió el post que estamos compartiendo. Como yo no tengo una cuenta aparte para éste blog (uso mi propia cuenta) la cuenta a especificar del sitio (twitter:site) es la misma que la del creador (twitter:creator). Estas 2 últimas lineas las puedes cambiar con tu cuenta de Twitter.

En la segunda parte del código se usa una etiqueta de condición de blogger para saber si el link que se esta compartiendo es el Index (la pagina principal del blog) o si es algún post u otra página.



Si es el index, lo que hace es poner como Titulo (en Twitter), el texto "Las Crónicas Del César". Como descripción (en Twitter), pone "No soy un adepto escribiendo, pero lo haré......". Pone una imagen para compartir que es ésta. Y en URL, pone la principal del blog. De aquí lo que puedes cambiar es el Titulo, la Descripción y la Imagen. La URL de tu blog la pone automáticamente.



Pero si no es el Index (por ejemplo una publicación o página estatica) hace lo siguiente:

Pone como URL la del post que estamos compartiendo. En titulo pone la del post que estamos compartiendo. Y en imagen pone la primera imagen que publicamos en nuestro post. De aquí no te recomiendo cambiar nada porque pone automáticamente la URL, Titulo e Imagen de tu publicación.

Dale clic para ver en grande

En la última parte del código se pregunta si el post tiene descripción (esto no se ve en el post actual, son etiquetas para el buscador de Google).



Si tiene, pone como descripción (en Twitter) la descripción que pusiste a la hora de escribir un post que esta situado en la parte derecha de tu editor para escribir post (ver imagen aqui).



Si no tiene, pone una descripción que tu hayas puesto, en este caso yo puse una descripción genérica: "Mira el post completo. Si te gusta.......", lo puedes cambiar por tu propia descripción genérica para tus publicaciones.

Dale clic para ver en grande

Una vez hecho esto procedemos a la validación en Twitter en el siguiente link:

https://cards-dev.twitter.com/validator



Pegamos nuestra dirección del blog en la caja para validar. En nuestra dirección hay que cambiar .mx por .com y volverlo a validar para que sin importar cual compartamos (con .mx o .com) nos aparezcan las Twitter Cards en la timeline.

Esta es la vista previa del link en Twitter:

Y de un link en Twitter:

Código para copiar y pegar.









Referencias:

https://dev.twitter.com/cards/overview

https://dev.twitter.com/cards/getting-started

http://blogger-hints-and-tips.blogspot.mx/2013/09/how-to-set-up-twitters-view-summary.html





Si te gusto el post, dale +1, Tuitealo, Like y Compartelo en tus redes sociales, de verdad me ayuda mucho. No olvides comentar en la sección de abajo.

Modificando el codigo del pluguin AddToAny para el boton de Twitter

Seguramente ya conocen el Pluguin AddToAny excelente para poner tus botones de redes sociales en tu sitio de Wordpress.

Como veran es facil instalarlo, pero lo ideal seria que el boton de Twitter en vez de mostrarnos:

deberia darnos lo siguiente con el Via incluido

Esto tanto para el botón de twitter como para el del cuadro. y como hacemos para lograrlo ??? Pues para el Boton es facil vamos a el Editor del Pluguin y buscamos el codigo:

$custom_attributes .= ' data-url="' . $linkurl . '"';
$custom_attributes .= ' data-text="' . $linkname . '"';

Y le agregan la linea:


$custom_attributes .= ' data-url="' . $linkurl . '"';
$custom_attributes .= ' data-text="' . $linkname . '"';
$custom_attributes .= ' data-via=user_name';



Para el del cuadro es mas facil:

http://share.lockerz.com/buttons/customize/twitter_message 


Copiamos el codigo y lo pegamos en la parte inferior de los Ajustes del Pluguin

y listo!!!!

Como añadir el boton oficial de Twitter en tu Wordpress

Mas informacion: Agrega TweetButton en WordPress y Blogger
Para ponerlo mejor en WordPress hay que poner dos funciones PHP de WordPress tanto como URL personalizada, como también como título personalizado en la configuración de Tweetbutton tal y como vemos en las capturas que van a continuación:

En lugar de lo que os sugeríamos, sugerimos poner la función para el texto del tweet y para el enlace que debe figurar en el tweet.

Después, hay que buscar el lugar adecuado para ubicarlo en los archivos index.php y single.php (como mínimo, se puede también integrar en resultados de búsqueda, etc.) de nuestro theme.

Como Instalar el botón oficial de Twitter en Blogger

La nota completa esta en el Blog: Vida MRR


Lo mas importante para instalarlo en tu blog e Blogger es



Lo podemos pegar expandiendo primero nuestra plantilla de artilugios. Después de eso vamos a bucar el siguiente texto <div class='post-body entry-content'> y justo debajo de ese texto vamos a añadir el otro que sigue:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='display: inline; float: right; margin-left: 5px;'>
AQUI EL CODIGO QUE COPIAMOS EN TWITTER PARA EL BOTON
</div>
</b:if>

Esto hará que el botón se coloque en el texto del post, pero aún hay que hacer otra cosa, tenemos que agregar un expr: antes de data-text y dara-url, como en la imagen.

Colocar un botón para Tweetmeme

Consultar para mas informacion El Escaparate de Rosa




Tweetmeme es una especie de agregador de noticias de Twitter.

Este servicio rastrea y optiene la información de los tweets que comparten los usuarios de Twitter entre si (RT), en su web podemos ver una portada principal donde aparecen los tweets más destacados.



En Blogger podemos añadir un botón que permita a nuestros usuarios enviar la información a Tweetmeme de las entradas de nuestro blog, cuantos más usuarios envien la entrada, más posibilidad tendrá esta de posicionarse en Tweetmeme.





Vamos a ver como colocar el botón al lado derecho del título de nuestras entradas.




[1] Desde "Edición HTML" en nuestro panel y marcando la opción de "Expandir las plantillas de artilugios" localizamos el código que está en negrita y añadimos el que he resaltado en color rojo:

<b:if cond='data:post.title'>

<div id="tweetmeme" style="float: right;"> <script type="text/javascript"> tweetmeme_url = &#39;<data:post.url/>&#39;; </script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script> </div>


<h3 class='post-title entry-title'>

[2] Usamos vista previa y tendremos que ver nuestro botón a la derecha del título de la entrada:

[3] Guardamos cambios.



Si en lugar de ese botón, queremos usar el otro modelo disponible de botón (más pequeño), el código (que colocaríamos en el mismo lugar) sería este:

<div id="tweetmeme" style="float: right;">

<script type="text/javascript">

tweetmeme_url = &#39;<data:post.url/>&#39;;tweetmeme_style = 'compact';

</script>

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

</div>

Podemos colocarlo también al final de las entradas, justo antes del comienzo de los comentarios, de esta manera solo será visible cuando entramos a una entrada concreta.

Para hacer esto tendríamos que incluir el código así:

<b:includable id='comments' var='post'>

<script type="text/javascript"> tweetmeme_url = &#39;<data:post.url/>&#39;; </script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>


<div class='comments' id='comments'>