Botón para compartir tus artículos en Twitter
Francisco / Publicado hace 1228 días / 41 Comentarios
Twitter día con día gana terreno y es uno de los servicios de mayor crecimiento en internet. Algo muy común que puede encontrarse en Twitter, son enlaces a artículos que fueron interesantes para quien los publica y quiere compartirlos. Así como existen botones para compartir tus anotaciones en varios sitios sociales, es posible agregar un botón para compartirlas desde Twitter.
A continuación se explica como agregar un botón para WordPress y Blogger, lo de mayor relevancia es entender la construcción del enlace para así adaptarlo y personalizarlo. El resultado en ambos caso será un enlace que lleva al usuario a Twitter con un texto listo para publicar, algo como:
Leyendo http://blogandweb.com/web-20/twitter-icons/ en Blog and Web
Para WordPress:
El proceso varia de acuerdo a la forma en que ya muestras otros iconos a servicios sociales, sin embargo, un proceso general podrías ser como sigue:
- Busca un icono para Twitter.
- Entra al archivo single.php del tema que estas usando.
- Sigue el esquema HTML con que se muestran actualmente tus marcadores sociales, puede ser por medio de una lista de elementos, una imagen enlazada o un texto enlazado.
Como texto:
<a href="http://twitter.com/home?status=Leyendo <?php the_permalink(); ?> en <?php bloginfo('name'); ?>" title="Compártelo en Twitter" class="wptwitter"> Twitter </a>Cómo imagen:
<a href="http://twitter.com/home?status=Leyendo <?php the_permalink(); ?> en <?php bloginfo('name'); ?>" title="Compártelo en Twitter" class="wptwitter"> <img src="http://tublogurl.com/twitter.png" alt="Twitter icon"/> </a>Dónde hay que cambiar la URL de la imagen, por la url de nuestro icono.
- Dar estilo. Ya sea como enlace o texto, a partir de una clase es posible darle cualquier aspecto al icono. Por ejemplo, dando estilos a las siguientes clases:
a.wptwitter {} a.wptwitter img {}Aquí las posibilidades son enormes, así que ya depende mucho del conocimiento y gusto de cada quien.
Para Blogger:
El proceso para Blogger es bastante similar.
- Busca un icono para Twitter.
- Ve a la pestaña “Diseño” y después a la opción Edición HTML.
- Sigue el esquema HTML con que se muestran actualmente tus marcadores sociales, que pueden ser elementos de lista, link de texto o de imagen. Sea que ya tengas otros iconos o no, puedes colocar el enlace de Twitter justo después de:
<p class='post-footer-line post-footer-line-3'>Como texto el link se escribe de la siguiente forma:
<a expr:href='"http://twitter.com/home?status=Leyendo " + data:post.url + " en " + data:blog.title' class="btwitter" title="Compartelo en Twitter"> Twitter </a>Como imagen:
<a expr:href='"http://twitter.com/home?status=Leyendo " + data:post.url + " en " + data:blog.title' class="btwitter" title="Compartelo en Twitter"> <img src="http://sitio-de-alojamiento.com/twitter.png" alt="Twitter icon"/> </a>Dónde hay que cambiar la URL de la imagen, por la url de nuestro icono hospedado en algún servicio externo como Phtobucket o Imageshack.
- Igualmente es posible darle estilos al enlace para que se acople al diseño o a la lista de marcadores si ya existe:
a.btwitter {} a.btwitter img {}
Dado que la popularidad de Twitter sigue creciendo, me parece un post muy útil. ¡Seguid así!
¡GRan aporte, muchas gracias!
Yo lo voy a integrar en el siguiente diseño de Blog and Web.
Gracias por el comentario.
Muchas Gracias.
Me funciona muy bien, gracias!
lo estoy usando en mi blog, gracias
Sencillo no? Me alegro les este funcionando.
Gracias por el comentario.
Agregado esta, funciona correctamente!!!
Gracias!!!
Hola Francisco!
Me pareció excelente tu post, muy detallado y preciso. De hecho, comencé a hacerlo y luego me di cuenta que, a través del servicio de Feedburner, podía incluirlo automáticamente a través del FeedFlare, con la opción de “Twit This!”… espero haber aportado algo para quienes utilizan el servicio de Feedburner.
De cualquier manera, nuevamente muchas gracias por tu aporte ya que a partir de leer tu nota encontré esta opción dentro de Feedburner.
Saludos,
Vicky Miles
Virtual Assistance Argentina
Hola. Muy menester tu blog!!! Pero!! me eh dirigido !!a edicion html y expandido artilugios y estoy buscando con F3 el codigo que citas en tu bitacora y no lo encuentra T_T!!!
Que hago ayudame !!
Saludos. Exitos.
Disculpa que pregunte algo que no tiene que ver con el tema, pero
Cómo haces para poner esos códigos dentro de la entrada? puede hacerse en el Blogger? yo quiero poner código a veces en entradas de mi blog pero quedan muy feos pq no puedo ponerles formato
sdos
thanks
hola saludos. !excelente aporte¡
hola. excelente post
Hola, el sistema funciona genial, mi pregunta es, ¿se puede poner aparte del link a la entrada el nombre del título del post, algo así:
Leyendo: Titulo de la entrada http://el_link_de_la_entrada.html en Nombre_del_blog
Muchas gracias de antemano
PD: me refiero a Blogger
Hola oye la verdad es que soy muy novato en este rollo de blogs etc me gustaria saber como encontrar los codigos de una manera facil porque me pongo a leer los cogidos y nada que los encuentro (blogger) no hay alguna funcion asi como ctrl b de excel que me ayude a encontrarlos. y si puedes ir a visitar mi blog entenderas que estoy en pañales con esto del blog pero si quiero hacerlo.
Gracias Saludos, coridiales.
busco el codigo y no aparece solo encontre estas opciones parecidas, pero como no soy ducha en esto no se donde ubicarlo
si me dieras otra manito te lo agradeceria, desde ya la ayuda es genial
un abrazo
<a class=’comment-link’ expr:href=’data:post.createLinkUrl’
@Alejandra
Tal vez no encuentres:
<p class='post-footer-line post-footer-line-3'>
entonces busca:
<p class='post-footer-line post-footer-line-3/'>
con una diagonal al final, borra la diagonal, justo después de ese código pones </p> y en medio va el código de twitter del paso 3.
No me quedo muy claro como agregar el codigo para compartir en twitter al bookmarking.
Podrías explicarlo con más detalle?.
Javier.
quiero un codigo html para guardar los comentarios de mi pagina con un boton publicar comentario
ese es mi sitio web
muchas gracias lo andaba buscando
muchas gracias por este articulo
me va a ser de mucha utilidad ya que mucha gente
utiliza esta red social [twitter]
gracias por el tiempo que te has tomado para realizar esta entrada
saludos
Hola! Primero quiero felicitarte por tu blog, es excelente y de mucha utilidad para los que nos gusta trabajar en la Web 2.0. En cuanto al codigo que publicaste sobre como compartir los articulos en twitter, no he ma funcionado
quizas estoy haciendo algo mal y necesito ayuda porque necesito ponerlo urgente! Es para WordPress y me gustaria poder darle ese acceso a la gente que visita mi blog. Muchas gracias!!!
Hola! me fue muy útil tu post, pero ahora me gustaría saber como posicionarlo de manera que quede al lado del link que tengo en el post para enviar la noticia por correo ya que me queda todo alejado del botón que te mencione. Gracias y saludos!
Gracias por el codigo, fue de mucha utilidad…!!
y de facebook, sonico , hi5, google , yahoo, msn , como se pone esos enlaces? jeje
Buenisimo,
Yo pongo el código debajo de cada entrada en wordpress y está funcionando,
como sería la variable para Facebook y otros servicios?
Francisco le he dedicado bastante tiempo a encontrar la línea sugerida
en la edición de HTLM, sin embargo no la encuentro que puedo hacer?
Gracias, funciona perfectamente y a la primera!!
Hola fco podrias hacer un tutorial de como implementar el boton oficial en wordpress?
Gracias de antemano
MUCHAS GRASIAS POR LA INFORMACION, BOY A INTENTAR AGREGAR EL TWITTER A MI PAGINA WEB DESPUES TE CUENTO COMO ME FUE EN EL PROCESO HASTA PRONTO FRANCISCO.
Gracias por el aporte Francisco, lo implementare en mi blog haber como queda.
Saludos.
Hola Francisco oye yo necesito unos botones como los que tu tienes al final del post.¿Tendrás algún articulo sobre eso?
Hola francisco.
Gracias por este aporte. Te juro que twitter me ha traido muchos beneficios a mis distintas web y con esto em ahorras mucho trabajo.
Gracis a twitter google me indexa mas rapido los post en mis blogs.
un abrazo.
Jimmy
Muy buneo.
Gracias por esta util informacion. voy a implementarlo en mis blogs y luego te digo como me fue.
Un beso.
Maria.
quisiera ablar sobre la empresa de saobsa tengo que adbertir que no paga y que tiene a los trabajadores en argelia de cualquier forma es una muy mala empresa pues se esta aprobechando de los trabajadores y si os dijera que a la hora de tener cualquier problema som unos mal nacidos si estais ay o teneis intencion de acerlo llebar cuidado con este tipo de empresas
Me sirvió de gran ayuda estos datos ahora los puedo implementar en mis blogs y webs, quiero ver como me va en Ecomerce.
Gracias
Hola, muy bueno tu consejo, pero tengo una inquietud: Me gustaría que el número de twitts sea exclusivo para cada entrada cuando se está en la página principal. En mi blog, me sale el mismo número de twitts en todas las entradas… Sin embargo, cuando uno entra en una nota, ahí sí se ve el verdadero número de twits que posee la entrada…
¿Cómo lo puedo solucionar?