56

Botones oficiales de Twitter

Ya hace días se venían haciendo eco algunos blogs de la presentación de unos nuevos botones oficiales de Twitter prevista para esta semana.

Ayer mismo pude comprobar que ya están disponibles para todos y que podemos obtener su código desde nuestra página de Twitter.

[1] Desde nuestra página de inicio en Twitter y al pie de la misma, pinchamos en el enlace que dice "Extras".

Extras Twitter

[2] Accedemos entonces a la página "Extras de Twitter", donde vemos que aparece una nueva opción llamada "Botón de Twittear". Pinchamos ahí.

Botón de twittear


[3] Ahí vemos los modelos disponibles de botones (Cuenta vertical, cuenta horizontal y sin contador)y una serie de opciones que podemos utilizar.

Modelo de botones

[4] Una vez marcado el que vamos a utilizar, vemos debajo una vista previa y el código para copiar y pegar en nuestro blog.


Como añadir el botón a nuestras entradas

Vamos a ver como añadir el botón debajo del título de cada entrada y a la derecha o izquierda del texto del post.
En primer lugar añadiremos una condicional para que el botón solo sea visible al acceder a la página de entrada, ya que de esta manera será la url de la entrada la que se enviará a Twitter y no la url de nuestro blog.

[1] Vamos a Edición HTML en nuestro panel y marcamos la opción de "Expandir las plantillas de artilugios" para localizar esta etiqueta en el código de la plantilla:

<div class='post-body entry-content'>

[2] Justo debajo añadimos el código para el botón de esta manera:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='display: inline; float: right; margin-left: 5px;'>
AQUI EL CODIGO QUE COPIAMOS EN TWITTER PARA EL BOTON
</div>
</b:if>

Ejemplo:
Botón Twittear

Notas:
Para mostrar el botón a la izquierda de la entrada, cambiamos donde dice en el código float: right; margin-left: 5px; por float: left; margin-right: 5px;

Entradas Relacionadas:

56 comentarios:


Roster

Está excelente, muy bueno, no sabía esta función. La aplicaré, como siempre, gracias @Gema...

No sin MyMakeUp

Hola
Muy buena información.
Una pregunta: ¿Como se instalaría un botón de este mismo tipo, pero de facebook?

More AdWords

Hola Como estas?

Te cuento lo trate de implementar pero no me funciona del todo o el funcionamiento es otro.

Con tweetmeme me muestra en la pagina principal los tweets (sin necesidad de entrar al post)

con el botón original de twitter no me funciona así: funciona una vez que has ingresado al post,

Hay forma de solucionarlo
Donde lo implemente es en mi blog
Notas de Marketing

acá: http://www.moreadwords.com.ar/
no se muestran y si ingresas a un post, ejemplo:
Acá dentro de un post si lo muestra
El video de la pelicula facebook Oficial.
http://www.moreadwords.com.ar/2010/07/el-video-de-la-pelicula-facebook.html

Espero lo pueda solucionar :|

María de los Ángeles

¡Muchas gracias, Rosa! Ni siquiera sabía dónde estaban los famosos nuevos botones, tampoco hubiese sabido dónde hay que colocarlos si no nos contabas. Y lo mejor es que funciona perfectamente, gracias :)

Rosa

No sin MyMakeUp Puedes verlo aquí:
http://elescaparatederosa.blogspot.com/2009/11/boton-enviar-entradas-facebook.html

Rosa

More AdWords Así es... el botón envía la url de la página en que se coloca, así que en el home, es esa la url que envía...

Arnoldo Arellano

Yo no los hallaba, Gracias Rosa!!

Arnoldo Arellano

No lo sabia, yo pensaba que funcionaba igual que el tweetmeme!!

Rudolph

¡Muchísimas gracias! Me lo he instalado y ha quedado muy bien :) Una pregunta respecto al botón de facebook, ¿hay manera de saber quiénes son las personas a las que les ha gustado?

Rosa

Rudolph Pues no, que yo sepa... :(

Igor

¡Muy interesante! Gracias.

Un saludo

CHiCken

rosa tengo un problema en que se visualicen los botones de facebook y twitter, acabo de poner estos botones y se visualiza solo uno, si pongo primero el de face es el que aparece pero si pongo este nuevo boton de tweet primero este aparece quiere decir que el que ponga primero es el que se visualiza.

estos botones los tengo en cada entrada, puedes ver un ejemplo arriba del titulo de cada entradas donde estan colocados.

en este momento tengo los 2 botones añadidos a la plantilla. puedes ayudarme

ISIS "Evangel"

Hola, me parecio genial esto, y logre ponerlo en mi blog personal pero en el otro que comparto no encuentro el 'post-body entry-content', por más que lo busco no lo encuentro, se debe a la planilla? en donde no puedo ponerlo es en Last Fallen Angels

Rosa

CHiCken Yo veo los dos sin problema, primero face y después twitter. :O

CHiCken

Rosa ayer en la noche los acabo de cambiar, tuve que poner los script del face y tweet antes de </head> pero ahora no se guarda bien los numeros del globo

Rosa

ISIS "Evangel" Trata de colocarlos entonces después de:
<div class='post-header-line-1'>

Rosa

CHiCken Pues lo siento :S pero no puedo hacer nada... quizá sea el botón de Twitter... me han dicho que aún no "funca" bien del todo...

Damned

Hola, Rosa :) ¡Cuánto tiempo! Hacía mucho que no me pasaba por aquí, tengo abandonada mi faceta de "toquiteadora de plantillas" :D
¿Qué tal todo?

Bueno, pues resulta que tengo el botón de Twittear implantado en la plantilla, pero no al comienzo de la entrada sino en el post-footer; me gustaría que apareciese sólo en las páginas de entrada y no en la página principal, pues al parecer, si se Twittea desde la principal el enlace no es el del post sino el del blog, y querría evitar esto.

¿Sabes qué es lo que debo poner o dónde debo poner el código?

¡Gracias ya de antemano! Saludos :)

casiangelstop

Rosa, quería saber como hacés para indicar la fuente de alguna noticia cuando vos ponés... "Articulo Original" con esa barra junto con el link de donde lo sacaste.
Necesitaria eso para mi blog, si es que no te molestaría si me lo dijieras.

Rosa

Damned¡Encantada de volver a "verte"! :F

Pues para eso y tal como lo tienes, coloca esta condicional a comienzo del código para el botón:
<b:if cond='data:blog.pageType == "item"'> y el cierre al final del código: </b:if> esto hará que solo e vea en las páginas de etiquetas. :D

Damned

¡Justo! ¡Gracias, eso era lo que quería! :D
Feliz fin de verano! :)

Rosa

casiangelstop Pues coloco algo así en el CSS de la plantilla:

.enlaceEx{border-left:2px solid #27707F;font-size:13px;padding:2px 0 5px 5px;margin-left:25px;}.enlaceEx span{background:transparent url(url de la imagen) no-repeat scroll left 50%;color: #000;display: block;font-weight: bold;height: 15px;line-height: 15px;padding-left:18px;}

Y en cada entrada que voy a usarlo, al final, pongo esto:

<div class="enlaceEx"><span>VISTO EN:</span><a href="URL WEB" target="_blank">NOMBRE WEB</a></div>

Albus Dumbledore

Hola Rosa, espero te encuentres bien, me gustaría hacerte una consulta, cuando tu le respondes un comentario a cualquier persona, veo que escribes su nombre en rojo, cómo logras hacer eso?

Andromeda

Hola:

Me puedes indicar en que post explicas, lo de sacar en una página todos los post cuando pinchas en una etiqueta, tal como lo tienes en tu blog...

También lo de como poner los comentarios con caras y con lo "Publicar un comentario en la entrada" con una fuente especial y una imagen tal como lo tienes.


Un Saludo

CHiCken

@Rosa ya esta todo bien, no se que era pero creo que el nuevo boton aun no funcionaba muy bien pero ya esta listo!

Pozo+10™

Una consulta, mira esta imagen: http://tynipic.cz.cc/images/517Dibujo.png por que queda mal el asterisco, muy abajo (asterisco, items, no se como se llama, en las entradas dice Lista con viñetas).
Es en el blog: http://www.planeta-grandt.com.ar/
Espero sepas ayudarme.
Gracias!!!

ISIS "Evangel"

@Rosa

Muchisimas gracias, si me funciono!

KPeter

¿Y si no tengo el código:

div class='post-body entry-content'

en mi plantilla que hago?

Rosa

Albus Dumbledore Usado CSS. Es algo que tengo previsto explicar en una próxima entrada...

Rosa

KPeter Bueno... ya sabes que has de hacer, pues veo ya lo colocaste...

Rosa

Pozo+10™ Ve a Vagabundia, ya te respondió allí Jmiur.

Rosa

Andromeda Todo eso está explicado en el blog, se trata de molestarse en buscar un poquito... no me sobra tiempo como para buscar por los demás...

http://elescaparatederosa.blogspot.com/2007/04/ttulos-expandibles-en-los-post-de-las.html

http://elescaparatederosa.blogspot.com/search/label/Emoticonos

http://elescaparatederosa.blogspot.com/2008/06/modificar-el-formulario-de-comentarios.html

WEB MASTER - S/Ss

http://starstufs.blogspot.com/ muy bueno tu blog aqui te dejo el link del mio espero me responda el mensaje que te envie!

Pozo+10™

Gracias! ;)

Facu.Marin

Rosa, Una consulta... estamos haciendo un blog con un amigo, esta en blogger pero con dominio .com.ar

Queriamos saber como sacarle una linea que hay al costado de la cabecera, esta esa linea que no nos gusta y la queriamos sacar, queriamos saber como. Saludos Rosa. (la linea bordea toda la imagen de la cabecera)

www.sentimientoquemero.com.ar

Rosa

Joaco Hace tiempo que no permito enlaces directos en los comentarios, lo siento mucho, pero elimino tu comentario.

Rosa

Facu.Marin Prueba añadiendo aquí:
#header { }

un border: none

#header {border: none; }

Facu.Marin

Rosa, e intentado colocarlo en varios lados, pero no encuentro el lugar justop donde ponerlo.

Despues de que lo tengo que poner?

Rosa

Facu.MarinDonde dice y tal como dice la entrada... :O

Facu.Marin

Lo hice asi, pero sigue igual :(

Andromeda

Gracias Rosa...

Te juro que estuve buscando, pero el problema es que con toda la info que tienes del tema acaba en post que hacian cosas parecidas pero no exactamente a lo que tenias en el blog.

Un saludo y gracias por tu paciencia.

Rosa

Andromeda No pasa nada... la verdad es que a veces entiendo no encontréis algo, pero cuando son varias cosas, al menos alguna si tendrías que haber encontrado.
Perdona si fui algo "brusca" a veces me "desespero" un poquito con este tema... :F

Rosa

Facu.Marin Es que tampoco se lo que quieres decir con "sigue igual", la verdad... no puedo decirte más que si sigues estos pasos debería salir.

Cisne Negro

Rosa, perdona que te moleste con mi duda. En mi blog Cisne Negro he tratado de implementar tanto lo de twitter como lo de FB en las entradas, lo he intentado detrás de div class='post-body entry-content' (No está así exactamente en mi blog); detrás de div class='post-header-line-1', y detrás de data:post.body, pero nada de nada.

Creo que debe de ser algún problema de mi plantilla en particular, porque tampoco he conseguido que se muestre en los posts la fecha de entrada ni poner lo que ahora Blogger deja meter muy sencillamente de los botones de web2.0.

No sé, no quiero marearte con mi problema, sólo comentar. Saludos y gracias por mantener tu fantástico blog.

Rosa

Cisne Negro No creo que en tu plantilla haya nada que impida mostrar este tipo de botones por lo que he podido ver... donde dices que tratabas de colocarlo además es correcto... quizá usaste vista previa y no se mostraban...

Ross

Muchas Gracias!!!

Raúl

Hola Rosa como haces para que al Twittear no aparezca el titulo completo del blog. En tu caso solo parece: El Escaparate y el titulo de la entrada. Y no: El Escaparate de Rosa y el titulo de entrada.

De hecho yo quisiera q mi boton de Twitter solo muestre el título de la entrada y no del blog!!!

Como lo puedo hacer??? Muchas gracias

Rosa

Raúl No es que muestre parte del título, es que mi blog en su título original (no en el que se ve en el blog) en Configuración, solo lleva El Escaparate.
Pues ahora mismo no se decirte como enviar solo el título de la entrada, los sistemas que conozco envían también el blog y si se modifica eso no funcionan, ya que son originales de Twitter o de otros servicios...
Mira en Vagabundia, sino recuerdo mal creía ver algo así alguna vez... pregunta allí si no encuentras nada...

Raúl

Hola Rosa muchas gracias por la respuesta, he preguntado a Jmiur pero hasta la hora no he recibido respuesta mientras tanto si me pudieras ayudar: Como puedo hacer para que en el título de la configuración acortarlo, y el del blog que aparece en al cabecera sea el largo??

Y otra pregunta si hago esta modificación influiria en el posicionamiento de mi título?? Porque x la segunda parte del título de mi blog también recibo muchas visitas y no quisiera perder su posicionamiento. :)

Rosa

Raúl Si estás seguro recibes visitas por ahí, entonces no es buena ida acortarlo, ya que es el título que pongas en Configuración, precisamente el que funciona a efecto de buscadores.... en mi caso pude permitirme esto porque si te fijas, la url de mi blog es la misma que su título, y normalmente me localizan por ahí...

Sito

Rosa, nada que como novato estoy padeciendo lo indecible. Si no he podido poner la función de contestar mensajes tampoco puedo con el botón de twitter. ¿No tendré algo en la plantilla mal? Gracias

Rosa

Sito No creo... y aunque así fuese, el botón de twitter podría colocarse de igual forma.

Sito

@Rosa

¿Entonces qué puede ser? Gracias

Rosa

Sito Tampoco puedo saber si estás cometiendo algún error, por ejemplo de colocación...

La voz suave del mar

Yo no tengo "post-body entry-content" :S :S

Rosa

La voz suave del mar Quizá si, quizá sale distinto en tu plantilla... ¿para que blog es?

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S