English Português

twitter-blogger-wordpress

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:

  1. Busca un icono para Twitter.
  2. Entra al archivo single.php del tema que estas usando.
  3. 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&aacute;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&aacute;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.

  4. 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.

  1. Busca un icono para Twitter.
  2. Ve a la pestaña “Diseño” y después a la opción Edición HTML.
  3. 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.

  4. 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 {}
Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Comentarios

  1. Alejandro Moreno-Ramos / Hace 6 años /

    Dado que la popularidad de Twitter sigue creciendo, me parece un post muy útil. ¡Seguid así!

    Responder a Alejandro Moreno-Ramos →
  2. Lord Cold / Hace 6 años /

    ¡GRan aporte, muchas gracias!

    Responder a Lord Cold →
  3. Francisco / Hace 6 años /

    Yo lo voy a integrar en el siguiente diseño de Blog and Web.

    Gracias por el comentario.

    Responder a Francisco →
  4. Deivid / Hace 6 años /

    Muchas Gracias.

    Responder a Deivid →
  5. Graciela Ventimiglia / Hace 6 años /

    Me funciona muy bien, gracias!

    Responder a Graciela Ventimiglia →
  6. Osmar / Hace 6 años /

    lo estoy usando en mi blog, gracias

    Responder a Osmar →
  7. Francisco / Hace 6 años /

    Sencillo no? Me alegro les este funcionando.

    Gracias por el comentario. :)

    Responder a Francisco →
  8. USBicon / Hace 6 años /

    Agregado esta, funciona correctamente!!!
    Gracias!!!

    Responder a USBicon →
  9. Vicky Miles / Hace 6 años /

    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

    Responder a Vicky Miles →
  10. [alE] / Hace 6 años /

    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.

    Responder a [alE] →
  11. Leandro / Hace 5 años /

    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

    Responder a Leandro →
  12. hastalıklar / Hace 5 años /

    thanks

    Responder a hastalıklar →
  13. RADY / Hace 5 años /

    hola saludos. !excelente aporte¡

    Responder a RADY →
  14. abel / Hace 5 años /

    hola. excelente post

    Responder a abel →
  15. Octavi / Hace 5 años /

    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

    Responder a Octavi →
  16. Bancarrota / Hace 5 años /

    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.

    Responder a Bancarrota →
  17. Alejandra / Hace 5 años /

    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’

    Responder a Alejandra →
  18. Francisco / Hace 5 años /

    @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.

    Responder a Francisco →
  19. Javier / Hace 5 años /

    No me quedo muy claro como agregar el codigo para compartir en twitter al bookmarking.

    Podrías explicarlo con más detalle?.

    Javier.

    Responder a Javier →
  20. ruben / Hace 5 años /

    quiero un codigo html para guardar los comentarios de mi pagina con un boton publicar comentario

    Responder a ruben →
  21. ruben / Hace 5 años /

    ese es mi sitio web

    Responder a ruben →
  22. onikei / Hace 5 años /

    muchas gracias lo andaba buscando

    Responder a onikei →
  23. gerardo / Hace 5 años /

    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 :)

    Responder a gerardo →
  24. Caro / Hace 5 años /

    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!!!

    Responder a Caro →
  25. Karolyn / Hace 5 años /

    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!

    Responder a Karolyn →
  26. Sergyo / Hace 4 años /

    Gracias por el codigo, fue de mucha utilidad…!!

    Responder a Sergyo →
  27. miguel / Hace 4 años /

    y de facebook, sonico , hi5, google , yahoo, msn , como se pone esos enlaces? jeje

    Responder a miguel →
  28. Santiago / Hace 4 años /

    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?

    Responder a Santiago →
  29. Miguel / Hace 4 años /

    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?

    Responder a Miguel →
  30. Agustí López / Hace 4 años /

    Gracias, funciona perfectamente y a la primera!!

    Responder a Agustí López →
  31. Luis / Hace 4 años /

    Hola fco podrias hacer un tutorial de como implementar el boton oficial en wordpress?

    Gracias de antemano

    Responder a Luis →
  32. EDGAR / Hace 4 años /

    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.

    Responder a EDGAR →
  33. Alexander / Hace 4 años /

    Gracias por el aporte Francisco, lo implementare en mi blog haber como queda.

    Saludos.

    Responder a Alexander →
  34. Antonio / Hace 4 años /

    Hola Francisco oye yo necesito unos botones como los que tu tienes al final del post.¿Tendrás algún articulo sobre eso?

    Responder a Antonio →
  35. Jimmy | Best European Cruises / Hace 4 años /

    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

    Responder a Jimmy | Best European Cruises →
  36. Maria / Hace 4 años /

    Muy buneo.

    Gracias por esta util informacion. voy a implementarlo en mis blogs y luego te digo como me fue.

    Un beso.

    Maria.

    Responder a Maria →
  37. salvador / Hace 3 años /

    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

    Responder a salvador →
  38. Edward / Hace 3 años /

    Me sirvió de gran ayuda estos datos ahora los puedo implementar en mis blogs y webs, quiero ver como me va en Ecomerce.
    Gracias

    Responder a Edward →
  39. Victor / Hace 3 años /

    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?

    Responder a Victor →
  40. Felix Redondo / Hace 1 año /

    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.

    Responder a Felix Redondo →
  41. Gabriel / Hace 6 meses /

    Muy Util me sirvio para mi sitio, como se podrá agregar una imágen al Tweet?

    Responder a Gabriel →

Responder

¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

Términos de uso - Política de privacidad