Insertar en web publicaciones de Google, Twitter o Facebook

Apenas hace unos pocos días me enteré de que ya es posible embeber posts de Google Plus en el blog. Esto es una cosa que ya se podía hacer de manera nativa con Twitter y también desde hace no mucho con Facebook, así que las tres principales redes sociales ya tienen algún sistema para hacerlo. De cara a los administradores de sitios, las tres han desarrollado esta utilidad de una manera muy parecida.

La ventaja de insertar en un artículo un post es que, a diferencia de una simple captura, estos posts serán interactivos, es decir, permitirán que los visitantes puedan hacer +1,Like o RT, por ejemplo, sin salir de la página del artículo en cuestión.

Hay que tener en cuenta que si el post en la red social se elimina, el embebido también desaparecerá, así que si se incluye en una entrada a modo de memoria o para dar fe de algo, el método de la captura de pantalla seguirá siendo el más conveniente.

Incrustar posts de Google+

El código para Google+ se consigue teniendo a la vista el post que se desea insertar. Al pasar el puntero por encima de él aparecerá una pequeña flecha en la parte superior derecha y en ella encotraréis un desplegable con diversas opciones. La que nos interesa es la deInsertar publicación.

Seleccionando dicha opción ya se nos ofrece el código para embeber el post.

Y como no, a continuación una demo en vivo:

Si ya tenéis la libreríaplusone.js instalada en vuestro sitio (Blogger la lleva y cualquiera que tenga los botones +1 también), bastará con copiar y pegar la segunda parte del código:

div class="g-post" data-href="https://plus.google.com/113123294987767899361/posts/6yJop2eV5r4"

Si en el futuro no queréis desplegar, copiar, pegar y borrar lo innecesario, fijaros en que simplemente se trata de añadir una caja con claseg-post y una dirección (data-href) igual a la del post, que se obtiene al pinchar en la fecha del mismo.

Los número de esa dirección son en realidad, de izquierda a derecha, la ID del perfil que lo publicó y ID del post.

Incrustar posts de Facebook

Como decía al principio, el método para embeber posts en estas tres redes es muy similar, así que para los otros ya me voy a ahorrar el gif animado.

En Facebook también hay una flechita igual a la de Google+ para desplegar el menú de opciones e incluso las palabras mágicas son las mismas:Insertar publicación. Ahí conseguiremos el código para copiar.

Incrustar publicaciones Facebook en una web

Al igual que antes, no es necesario cargar la primera parte del código si ya se dispone en la página del botónMe gusta o de cualquier otro gadget de Facebook, con lo que el código puede quedar reducido a una línea dónde la parte a personalizar es sólo la ID de la publicación que incluye el enlace:

div class="fb-post" data-href="https://www.facebook.com/oloblogger/posts/10151646157067765" data-width="550"
/div

No sé si en el momento de leer esto tendrás ya disponible la opción de insertar publicaciones en tu perfil, pero si no es así, enesta entrada tienes explicada una manera de hacerlo y otros pequeños apuntes.

Incrustar Tweets

Por último, la red que de entre estas tres fue realmente la primera en facilitarnos esto de añadir sus publicaciones en nuestros sitios.

Cada tweet dispone de un enlace con nombre***Más dónde aparece junto con otra opción la deInsertar Tweet. Esta evidentemente es la que escogeremos para este caso.

Una vez más, si ya tenemos algún widget de esta red y/o tenemos cargada la librería widgets.js de Twitter, podemos simplificar el código eliminando esa parte.

blockquote class="twitter-tweet"pNuevo post ► Gadget para mostrar los últimos tweets de manera rotativa a href="http://t.co/gcIfLRH6vR"http://t.co/gcIfLRH6vR/a/p— Oloman (@oloman) a href="https://twitter.com/oloman/statuses/375320768554741760"September 4, 2013/a/blockquote