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 https://blogandweb.com/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 {}
Alejandro Moreno-Ramos enero 14, 2009 a las 5:26 am
Dado que la popularidad de Twitter sigue creciendo, me parece un post muy útil. ¡Seguid así!
ResponderLord Cold enero 14, 2009 a las 6:30 pm
¡GRan aporte, muchas gracias!
ResponderFrancisco enero 15, 2009 a las 5:21 pm
Yo lo voy a integrar en el siguiente diseño de Blog and Web.
Gracias por el comentario.
ResponderDeivid enero 17, 2009 a las 3:27 pm
Muchas Gracias.
ResponderGraciela Ventimiglia febrero 12, 2009 a las 4:51 am
Me funciona muy bien, gracias!
ResponderOsmar febrero 17, 2009 a las 1:10 am
lo estoy usando en mi blog, gracias
ResponderFrancisco febrero 17, 2009 a las 12:52 pm
Sencillo no? Me alegro les este funcionando.
Gracias por el comentario. 🙂
ResponderUSBicon febrero 23, 2009 a las 1:39 pm
Agregado esta, funciona correctamente!!!
ResponderGracias!!!
Vicky Miles marzo 22, 2009 a las 6:40 pm
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,
ResponderVicky Miles
Virtual Assistance Argentina
[alE] abril 2, 2009 a las 8:33 am
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.
ResponderLeandro abril 5, 2009 a las 9:05 pm
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
Responderhastalıklar abril 19, 2009 a las 6:10 pm
thanks
ResponderRADY mayo 21, 2009 a las 1:54 am
hola saludos. !excelente aporte¡
Responderabel mayo 21, 2009 a las 1:56 am
hola. excelente post
ResponderOctavi mayo 21, 2009 a las 8:46 am
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
ResponderBancarrota julio 10, 2009 a las 11:52 pm
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.
ResponderAlejandra julio 13, 2009 a las 11:36 am
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’
ResponderFrancisco julio 14, 2009 a las 5:32 am
@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.
ResponderJavier octubre 19, 2009 a las 9:43 pm
No me quedo muy claro como agregar el codigo para compartir en twitter al bookmarking.
Podrías explicarlo con más detalle?.
Javier.
Responderruben enero 28, 2010 a las 12:58 pm
quiero un codigo html para guardar los comentarios de mi pagina con un boton publicar comentario
Responderruben enero 28, 2010 a las 12:59 pm
ese es mi sitio web
Responderonikei febrero 6, 2010 a las 10:37 pm
muchas gracias lo andaba buscando
Respondergerardo marzo 12, 2010 a las 6:10 pm
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
Respondersaludos 🙂
Caro marzo 21, 2010 a las 9:41 pm
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!!!
ResponderKarolyn marzo 26, 2010 a las 11:11 am
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!
ResponderSergyo abril 20, 2010 a las 12:16 pm
Gracias por el codigo, fue de mucha utilidad…!!
Respondermiguel abril 24, 2010 a las 1:13 am
y de facebook, sonico , hi5, google , yahoo, msn , como se pone esos enlaces? jeje
ResponderSantiago mayo 25, 2010 a las 4:42 pm
Buenisimo,
Yo pongo el código debajo de cada entrada en wordpress y está funcionando,
Respondercomo sería la variable para Facebook y otros servicios?
Miguel julio 16, 2010 a las 10:02 pm
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?
ResponderAgustí López agosto 16, 2010 a las 4:11 pm
Gracias, funciona perfectamente y a la primera!!
ResponderLuis noviembre 21, 2010 a las 5:16 am
Hola fco podrias hacer un tutorial de como implementar el boton oficial en wordpress?
Gracias de antemano
ResponderEDGAR noviembre 29, 2010 a las 1:00 am
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.
ResponderAlexander diciembre 22, 2010 a las 8:55 am
Gracias por el aporte Francisco, lo implementare en mi blog haber como queda.
Saludos.
ResponderAntonio enero 14, 2011 a las 5:46 pm
Hola Francisco oye yo necesito unos botones como los que tu tienes al final del post.¿Tendrás algún articulo sobre eso?
ResponderJimmy | Best European Cruises febrero 21, 2011 a las 11:38 am
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
ResponderMaria marzo 12, 2011 a las 9:39 am
Muy buneo.
Gracias por esta util informacion. voy a implementarlo en mis blogs y luego te digo como me fue.
Un beso.
Maria.
Respondersalvador septiembre 11, 2011 a las 11:20 am
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
ResponderEdward septiembre 16, 2011 a las 11:56 pm
Me sirvió de gran ayuda estos datos ahora los puedo implementar en mis blogs y webs, quiero ver como me va en Ecomerce.
ResponderGracias
Victor noviembre 5, 2011 a las 5:34 pm
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?
ResponderFelix Redondo julio 9, 2013 a las 3:32 am
Hola amigo. Me gusto mucho el botón con imagen. Pero necesitaría saber cómo incorporar el atributo target blank para que se abriera en otra página y no en la mía. Un saludo.
ResponderGabriel marzo 21, 2014 a las 10:44 pm
Muy Util me sirvio para mi sitio, como se podrá agregar una imágen al Tweet?
Responder