- Desde
- 13 May 2014
- Mensajes
- 14
Para mejorar como se comparte el contenido en facebook, twitter y g+, ya sea de los "me gusta" o los "tuits" o directamente compartiendo la url del artículo en concreto tenemos que utilizar las herramientas que nos proporcionan los sitios oficiales, para este caso el protocolo de open graph que sirve para facebook y g+ y las twitter cards de twitter.
Protocolo Open Graph para facebook y g+
Para implementar este sistema en nuestra web tenemos que colocar el siguiente código entre las etiquetas <head> ... </head> de nuestra página.
Podemos añadir más etiquetas meta para definir más el contenido, pero estas son las mínimas exigidas por facebook para compartir. Se entiende que la explicación lo has de cambiar por tus datos y, muy importante, la imagen a destacar ha de ser de 200 x 200 mínimo para que la lea correctamente.
Podemos implementar este sistema en nuestros artículos de WordPress muy facilemente, por ejemplo en el single.php ponemos,
Nota: hace tiempo que no trabajo con wp y no se si ha cambiado como se usan las funciones, creo recordar que si no pones la variable $postid, wp automaticamente utiliza la del post que se esta visualizando en ese momento y recoge los datos de la misma manera. Corregidme si me equivoco
7:
También podemos implementar el sistema en blogger (no he trabajo con blogger, pero os lo he buscado :encouragement
Podemos probar si nuestro código funciona en el debugger que nos proporciona facebook en está página. (vamos a "tools" y luego "Open Graph Debugger"). Nos hemos de loggear con nuestra cuenta de facebook.
Para las Twitter Cards
Las Twitter Cards es una manera de destacar contenido en los tuits que se publican, de la misma manera que antes hay que añadir el código entre las etiquetas <head> ... </head>, pero el código es especial para twitter. Hay varios tipos de card y tenemos que elegir el que más nos convenga, yo he elegido un articulo (summary card), pero podemos ver todos los tipos aquí.
Como antes solo hemos de sustituir lo que esta explicado por tus datos, vamos ahora a implementarlo en WordPress y luego en Blogger:
Twitter también tiene un validador como el debugger de facebook para probar si todo esta correcto.
Una última cosa, ahora mismo no tengo ningún wp ni blogger para poder probarlo, si alguién se decide a hacerlo que nos diga el resultado, que soy humano y me puedo equivocar, aunque debería funcionar
Créditos
Protocolo Open Graph para facebook y g+
Para implementar este sistema en nuestra web tenemos que colocar el siguiente código entre las etiquetas <head> ... </head> de nuestra página.
HTML:
<meta property="og:title" content="el título de nuestro artículo" />
<meta property="og:type" content="el tipo de contenido a compartir" />
<meta property="og:description" content="descripción" />
<meta property="og:url" content="el link del artículo" />
<meta property="og:image" content="la imagen que queremos destacar para compartir" />Podemos añadir más etiquetas meta para definir más el contenido, pero estas son las mínimas exigidas por facebook para compartir. Se entiende que la explicación lo has de cambiar por tus datos y, muy importante, la imagen a destacar ha de ser de 200 x 200 mínimo para que la lea correctamente.
Podemos implementar este sistema en nuestros artículos de WordPress muy facilemente, por ejemplo en el single.php ponemos,
HTML:
<?php $postid = get_the_ID(); ?>
<meta property="og:title" content="<?php echo get_the_title( $postid ); ?> " />
<meta property="og:type" content="<?php echo get_post_type( $postid ) ?>" />
<meta property="og:description" content="<?php the_excerpt( $postid ); ?>" />
<meta property="og:url" content="<?php echo get_permalink( $postid ); ?>" />
<meta property="og:image" content="<?php wp_get_attachment_url( $postid ); ?>" />Nota: hace tiempo que no trabajo con wp y no se si ha cambiado como se usan las funciones, creo recordar que si no pones la variable $postid, wp automaticamente utiliza la del post que se esta visualizando en ese momento y recoge los datos de la misma manera. Corregidme si me equivoco
7:También podemos implementar el sistema en blogger (no he trabajo con blogger, pero os lo he buscado :encouragement
HTML:
<meta property='og:title' expr:content='data:blog.pageName' />
<meta property='og:title' expr:content='data:blog.title' />
<b:if cond='data:blog.metaDescription'><meta property='og:description' expr:content='data:blog.metaDescription' /></b:if>
<meta property='og:url' expr:content='data:blog.canonicalUrl' />
<b:if cond='data:blog.postImageThumbnailUrl'><meta property='og:image' expr:content='data:blog.postImageThumbnailUrl' /></b:if>Podemos probar si nuestro código funciona en el debugger que nos proporciona facebook en está página. (vamos a "tools" y luego "Open Graph Debugger"). Nos hemos de loggear con nuestra cuenta de facebook.
Para las Twitter Cards
Las Twitter Cards es una manera de destacar contenido en los tuits que se publican, de la misma manera que antes hay que añadir el código entre las etiquetas <head> ... </head>, pero el código es especial para twitter. Hay varios tipos de card y tenemos que elegir el que más nos convenga, yo he elegido un articulo (summary card), pero podemos ver todos los tipos aquí.
HTML:
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="el usuario de twitter de la web">
<meta name="twitter:creator" content="el usuario de twitter del que ha creado el contenido">
<meta name="twitter:title" content="titulo del articulo">
<meta name="twitter:description" content="descripción">
<meta name="twitter:image" content="link de la imágen a destacar">Como antes solo hemos de sustituir lo que esta explicado por tus datos, vamos ahora a implementarlo en WordPress y luego en Blogger:
HTML:
<?php $postid = get_the_ID(); ?>
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@usuario" />
<meta name="twitter:creator" content="@usuario" />
<meta name="twitter:title" content="<?php echo get_the_title( $postid ); ?>" />
<meta name="twitter:description" content="<?php the_excerpt( $postid ); ?>" />
<meta name="twitter:image" content="<?php wp_get_attachment_url( $postid ); ?>" />
HTML:
<meta name='twitter:site' content='@usuario'/>
<meta name='twitter:card' content='summary'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta name='twitter:image' expr:content='data:blog.postImageThumbnailUrl'/>
</b:if>
</b:if>
<meta name='twitter:title' expr:content='data:blog.pageName'/>
<b:if cond='data:blog.pageType == "item"'>
<meta name='twitter:description' expr:content='data:post.snippet'/>
<b:else/>
<meta name='twitter:description' content='descripción de nuestro sitio'/>
</b:if>Twitter también tiene un validador como el debugger de facebook para probar si todo esta correcto.
Una última cosa, ahora mismo no tengo ningún wp ni blogger para poder probarlo, si alguién se decide a hacerlo que nos diga el resultado, que soy humano y me puedo equivocar, aunque debería funcionar
Créditos
