JMiur [E]

Hace unos días, Jabba tenía una inquietud respecto al botón de Twitter. El tema era si es posible agregar ese botón en el home del blog, sin condicionarlo para que sólo se vea en las páginas individuales y que funcione, enviando la información correcta, es decir, el título de la entrada y su URL, aún cuando en el home no haya sólo una entrada sino varias.

"... en el caso de Twitter, que yo presuponía que sería más sencillo por ser simplemente un enlace con un script no hay manera. Se comparte sin problemas si estás en la página individual del post pero desde la portada del blog o desde cualquier otra página que no sea la url del post individual siempre comparte la url principal.

El código base que proporcionan en la web de Twitter es éste:"
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="elblogdejabba" data-lang="es">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
Y ese mismo código modificado siguiendo las indicaciones que leo en la entrada de compartir entradas y en el anterior comentario me queda tal que así:
<a class='twitter-share-button' data-count='horizontal' data-lang='es' data-via='elblogdejabba' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;: &quot; + data:post.url'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
Así, a simple vista, parece lógico y lo es pero no funciona. Y no funciona porque Twitter nos dice que si queremos poner opciones diferentes, los atributos a usar también son diferentes.

Si queremos agregar el ya no tan nuevo botón de Twitter y vamos a la página de opciones del servicio, allí veremos varias de ellas, divididas en cuatro pestañas:

Botón es el tipo y es el que se muestra en el atributo data-count="valor" y el valor a usar puede ser vertical, horizontal o none

Texto del Tweet es una de las claves ya que nos da dos posibilidades, usar el título de la página en que esta el botón o escribir cualquier otro; en una página individual no hay problema pero en otras será importante definirlo y se agregará otro atributo llamado data-text="XXXXXXX" donde XXXXXXX es el texto que hayamos escrito y es justamente el que usaremos luego para poner el título de nuestra entrada.

URL es similar a lo anterior, por defecto se muestra la dirección donde está el botón pero, podemos poner cualquier otra y en ese caso, se agrega otro atributo más llamado data-url="XXXXXXX" donde XXXXXXX es la dirección que hayamos escrito y ese es el atributo a usar en este caso.

Idioma no tiene problemas, se detecta automáticamente y se agrega el atributo data-lang="es".

Como opción extra, podemos agregar hasta dos cuentas de Twitter para que los usuarios sigan después de compartir el contenido; la primera usa el atributo data-via="nombre" y la segunda el atributo data-related="nombre y descripción".

Así que definidas todas esas cosas, el código que nos dan dice esto:
<a href="http://twitter.com/share" class="twitter-share-button" data-url="XXXXXXX" data-text="XXXXXXX" data-count="horizontal" data-via="vagabundia" data-related="elblogdejabba:El Blog de Jabba" data-lang="es">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
Es verdad que hay más detalles que pueden ser personalizados via API pero, por ahora nos quedamos acá y ahora, reemplazar esas XXXXXXX por los datos que nos da Blogger así que:

data-text="XXXXXXX" se transformará en:
expr:data-text='&quot;&quot; + data:post.title + &quot;&quot;'

y data-url="XXXXXXX" se transformará en:
expr:data-url='&quot;&quot; + data:post.url + &quot;&quot;'

El código quedará de este modo, algo estrafalario pero funcional:
<a class='twitter-share-button' data-count='horizontal' data-lang='es' data-via='vagabundia' data-related='elblogdejabba:El Blog de Jabba' expr:data-url='&quot;&quot; + data:post.url + &quot;&quot;' expr:data-text='&quot;&quot; + data:post.title + &quot;&quot;' href='http://twitter.com/share' target='_blank'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
Al que le agrego target='_blank' para que no se abra en la misma ventana de la entrada y, tal cual está, agregado al post-footer de cualquier plantilla, puede ser utilizado tanto en entradas individuales, en el home o cualquier otra página de Blogger.


21 comentarios:

Jabba  

¡Genial! (ya está a buen recaudo) :D

PD. Si llego a saber que voy a ser citado me habría peinado ;)

Responder
JMiur  

No se preocupe, Don Jabba. esto es informal y yo ando en pantuflas :D

Responder
Gabi  
Este comentario ha sido eliminado por el autor.
Responder
JMiur  

Gabi:
Eso es un favicon, fíjate en esta entrada para ver los detalles de como agregarlo.

Responder
Abi  
Este comentario ha sido eliminado por el autor.
Responder
@llimoo  

Hola, necesito ayuda para terminar de pulir mi blog. Me gustaría saber cómo hacer para que mi botón "Compartir" de Facebook enlace directamente no al blog en general sino al post en concreto. Es decir, que cuando haga click en él aparezca el título del post, la descripción y la imagen de ese mismo post. ¿Cómo puedo hacerlo? Os dejo mi blog y un email de contacto por si alguien me puede hacer llegar la solución. Muchas gracias. Un saludo!
BLOG -> http://www.tres-tetas.blogspot.com/
EMAIL -> trestetas.blog@gmail.com

Responder
JMiur  

Si se trata del botóon Me Gusta, fíjate en esta entrada.

Responder
Phranet  

Inestimable tu ayuda. Muchas gracias :)

Responder
►Dj Benko◄  

J Miur tengo una duda de hace tiempos... Lo he buscado y aún no encuentro solución. Y te la pongo aquí para ver si me puedes ayudar. Quiero tener un boton de twittear pero personalizado, con otro icono que no sea los que da twitter. Q ademas ponga el titulo de la entrada, su respectiva url y ponga Via @micuenta. Twitter da uno con esas caracteristicas pero no he podido cambiar el icono del boton. Espero Que me ayudes. :S

Responder
JMiur  

En ese caso debes usar un enlace distinto; algo así:

<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;: &quot; + data:post.url'>

Eso, mostraría el Nombre + título + url corta del post

Responder
Kike Hernández  

Eres un crack!! no encontraba la solución por ningún lado...MUCHAS GRACIAS!

Responder
Herbert Andrés Rodríguez Cadena  

gracias, mas de una vez he llegado aqui y he soluciono mi reto, todo porque mis sitios funcionen mejor, blog.e-mipyme.com, enigmasdelmundo.com y chistescondorito.com, nuevamente gracias,

Responder
ayreonauta  

JMiur, hago medio off-topic: estaba tratando de hacer un botón para compartir en Tumblr usando el servicio http://www.tumblr.com/share/ y necesito una manito...

El botón que hice es:

<a expr:href='&quot;http://www.tumblr.com/share/link?url=&quot; + data:post.url + &quot;&amp;name=&quot; + data:post.title + &quot;&amp;description=&quot; + data:post.title'> (etc)

El único inconveniente es que Tumblr no acepta la URL con caracteres especiales, como la envía Blogger mediante data:post.url. El resultado del enlace anterior te lleva a esta URL:

http://www.tumblr.com/share/link?url=http://vagabundia.blogspot.com...

...que es un 404. Para que Tumblr acepte la URL generada, debería ser:

http://www.tumblr.com/share/link?url=http%3A%2F%2Fvagabundia.blogspot.com...

¿Alguna idea de cómo pasarle la URL codificada así? ¿Hay alguna etiqueta tipo "data:post.encodedUrl" o algo así? Como siempre, gracias por adelantado y saludos...

JMiur  

No conozco que hay alguna etiqueta de ese tipo. Tal vez, la única solución es crear el botón usando JavaScript.

ayreonauta  

¬¬ Esa era la parte que tenías que hacer por mí :P No te preocupes, ya lo solucioné (evitándolo). Gracias :)

JMiur  

¿Y por qué "tendría que hacerla por ti"? Esa es una frase bastante poco afortunada.

Responder
Pepe Pilato  

¿se podría compartir una imagen y que se muestre como regularmente lo hace, desplegando el botón para verla ahí mismo?

JMiur  

No tengo idea.

Responder
LuisLY  

Pero como explica este hombre!!! VAYA POR DIOS..
Y mira que esta vez necesitaba despejar dudas para un blog en wordpress y sigue siendo la explicación tan clara y brillante que hasta un chino mandarín sin conocimientos de Español lo comprendía ^^

Saludos maestro y gracias.
LuisLY

Responder
Roge Vila  

¿Y cómo se hace para adjuntar una imagen al tweet?

Gracias!

JMiur  

No se puede. Fíjate en los detalles del API de Twitter:
https://dev.twitter.com/docs/tweet-button

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR