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:"
"... 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='"http://twitter.com/home?status=" + data:post.title + ": " + 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:
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='"" + data:post.title + ""'
y data-url="XXXXXXX" se transformará en:
expr:data-url='"" + data:post.url + ""'
El código quedará de este modo, algo estrafalario pero funcional:
data-text="XXXXXXX" se transformará en:
expr:data-text='"" + data:post.title + ""'
y data-url="XXXXXXX" se transformará en:
expr:data-url='"" + data:post.url + ""'
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='"" + data:post.url + ""' expr:data-text='"" + data:post.title + ""' 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.
Tweet
No hay comentarios:
Publicar un comentario