71

Usando TwitThis en Blogger

TwitThis es un sistema que, de una manera fácil, posibilita que nuestras visitas envien mensajes a Twitter recomendando alguna de las entradas de nuestro blog.
Cuando alguno de nuestros visitantes que use Twitter, haga clic en el enlace de TwitThis, este tomará la dirección de la entrada y creará una url corta usando TinyURL.

Tendrá entonces que introducir sus datos de Twitter (nick y contraseña) y el mensaje recomendando la entrada de nuestro blog, llegará a todos sus contactos.

En Woork nos explican como podemos añadir el enlace TwitThis a nuestras entradas.

[1] En nuestro panel de Blogger vamos a "Edición HTML" y expandimos las plantillas de artilugios.
Colocamos este código en la parte que queramos mostrar el enlace TwitThis:

<a expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&amp;title=" + data:post.title'><span class="share-tweet">Twit This!</span></a>

Si vamos a ponerlo en el pie de las entradas, por ejemplo, a continuación de esta línea estaría bien:

<div class='post-footer-line post-footer-line-3'/>

[2] Incluieremos en el CSS (antes de ]]></b:skin>) estás líneas de código para que el enlace se vea con una imagen delante y así no pase desapercibido:

.share-tweet{
background:url(url_de_la_imagen) 10px top no-repeat;
padding-left:42px;
font-size:12px;
line-height:18px;
}
 

Os dejo el pajarito en dos tonos de color por si queréis usarlo.



Visto en: Woork

Entradas Relacionadas:

71 comentarios:


TRECARUNGA

Que biueno lo voy a añadir a mi blog :D

Osunac

Lo he hecho en mi blog y ha salido a la perfección.

henry ramirez

hola rosa es henry ,,,te envie la plantilla ,,ok es solo para que cepas,se que estas bien ocupada,,me gustaria que me incluyas en la paltilla tambien lo de twitter es una buena erramieta,,gracias

Jocesitohp

Gracias =D

Está exelente :P

ge zeta

Añadido a mi blog, soy tan feliz con esto ahora ;)

Richard Chavez

Estimado.
Una pregunta. Quisiera saber como logras darle imagen a " inicio, contacto, sobre mi, ver todas las entradas, archivos, imprescindibles, empezando en blogger".
Espero que me des una ayudadita. Vuelvo por aqui para una respuesta si fueras tan amable.

Agradecimientos.
Richard Chávez

Admin

Perfecto Rosa como siempre, lo podeis ver en www.lablackberry.com

Rosa

Richard Chavez, mira en esta entrada:

http://elescaparatederosa.blogspot.com/2008/04/menu-con-imagenes.html

Zecktor

Muy buena herramienta para los fanaticos de Twitter.
Rosa quiero agradecerte porque con la ayuda de tu blog al fin he podido modificar la plantilla de blogger y darle mi propio estilo aunque aun me faltan algunos detalles me gustaria invitarte para que me des tu opinion y de paso te aviso que te he agregado a mis links, espero y te agrade la idea.
Gracias por explicar todo de una manera muy sencilla, yo habia intentado con otros tutos pero no les entendia en cambio tus explicaciones son mas sencillas y faciles de entender.

Tu amigo.
Zecktor

Birdelo

Esto queda excelente, me ha gustado muchisimo!!!. Puesto en práctica de inmediato, suerte Ro!.

TRECARUNGA

¿Cuanto falta para el cumpleasños de El Escaparate? Jajajaja.

Albus Dumbledore

Hola Rosita, te cuento que con respecto a la cabecera de mi blog ya lo solucioné, hice algo de lo que me recomendastes... :)

Ahora tengo unos cuantos problemitas, te cuento:

1) Implementé los emoticones en mi blog, pero solo aparecen cuando comentan los usuarios, cuando yo lo hago no aparecen... ¿Qué puedo hacer?

2) Al final de los comentarios me aparece un link que dice PUBLICAR UN COMENTARIO EN LA ENTRADA... ¿Cómo lo eliminó?

Creo que son esas dos cositas, bueno es lo que recuerdo ahorita...

Espero no sea mucha molestia...

Un abrazo... :)

Rosa

Albus, no estoy segura, pero supongo que es porque el script funciona en los "comments" y los tuyos están identificados como "author-comments"...y el script no los reconoce como a los demás.

En cuanto a ese enlace, localiza esto:

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

Y borra la etiqueta que está en ese código: <data:postCommentMsg/>

Noa

Bada,m q no me sale... Mi plantilla es una locura ya :(
Ninguna cosa puedo añadir, jo.

Rosa

Noa, ¿qué problema tienes? esto sale en cualquier plantilla, es muy fácil y además puede colocarse en cualquier lado, no solo donde indico en esta entrada.

Albus Dumbledore

Rosa AUXILIOOOOOO!!

Esto es un caos...

Tengo problemas con el ARCHIVO DEL BLOG... Algunas veces se ve y otras no... Qué puedo hacer?

Además quisiera modificar el espaciado entre líneas en el texto de los post...

Otra pregunta el título de la entrada más reciente me aparece de color negro pero los títulos de las demás entradas me aparecen de color blanco, eso por qué?

Una última pregunta y no te molesto más... Bueno por hoy :D Quisiera que el texto de los post tuviera el mismo margen en todos los lados, es decir que tanto el margen superior como el inferior y los laterales tengan 10px...

Ahora si creo que eso es todo, insisto disculpa si te pregunto tanto pero eres la que más rápido responde mis inquietudes...

GRACIAS... :)

Rosa

Albus, tus archivos se ven sin problemas. Tal vez sea tu navegador que necesite una limpieza de caché.

Para modificar el espaciado entre lineas, aquí:
.post {
añades una línea como esta:
line-height:1.5em;
Si pones mas valor ahí, 1.7 por ejemplo mas separación o al revés.

Lo del título en negro ni idea, todo el código está preparado para que sea blanco, así que tal vez es algo en la misma entrada y yo no puedo verlo online.

En cuanto al margen, yo los veo iguales, de hecho creo que tienen 10px...

TRECARUNGA

Rosa, donde consigo otros globos de diálogo para el link de comentarios al lado del título del post? Porque busco en Google pero nada...

Rosa

TRECARUNGA, lo se, yo también busqué y nada...

TRECARUNGA

:O ya ni se en donde buscar

Global Metion Blog

Hola Rosa jeje :)

Aca pidiendote algo de tu sabiduria sabes como puedo cetrar imagenes con codigo HTML es que yo subo fotos de flickr a blogger pues las de blogger son muy chicas

el unico problema es que algunas de flickr de todos salen chcias(no tanto como saldrian en blogger)

y por eso quiero esa ayuda espero que me hayas entendido

Rosa

Global, coloca el código de la imagen entre <center> y </center>

Global Metion Blog

gracias Rosa eres un angel. Roas otra duda tu menú el rojo de pestañas o algo así funciona pero se ve chico, y en cuanto el color lo queria algo rosado palido o morado palido lo puedo cambiar en el primer codigo con los hexadecimales de los colores?

Y el tamaño
gracias de antemano BEBDICIONES......................

Rosa

Global, se ve chico hasta que no le colocas los enlaces, una vez colocados cada pestaña se adapta al tamaño del texto que se muestra en ella.
Si el color puedes cambiarlo ahí.

TwitterBoy

Una preguna... a alguien le va bien el Twit This este? a mi me loggea correctamente pero luego ni me muestra el supuesto enlace a mi twitter ni me manda el mensaje en sí.... pero tampoco me funciona el propio botón para enviar su propia página a twitter!!

Soy el único?

Gracias. Un abrazo, y gracias por tu trabajo, Rosa.

Rosa

Twitterboy, pues la verdad que no se si funciona o no:$
Se supone que el mensaje ha de llegarle a tus contactos...

vromo

GRACIAS

Danols

Muchisimas gracias :)

aergenium

Hola Rosa!

Muy buena la entrada.
Yo también he incluido el botón Twit this! en mi blog, aunque he decidido cambiar un poco el código, para integrar el botón en la sección 'Compartir', al pie de cada post, junto con los demás servicios tipo digg, menéame etc.

Muchas gracias y keep'em coming!

Rosa

aergenium , ha quedado muy bien, con la t de Twitter y todo :D

SpamLoco

Mmmm, se ve interesante :)

MALINA

lo probaré, ahora que estoy cogiendole el ritmo a twitter

RRS

Hola Rosa, encontre otra herramienta llamada Share This el cual me arroja un codigo que quiero poner en le pie del post donde van las etiquetas (que ya oculte) y los comentarios, pero no se como hacerlo, el me da el codigo y me añade un gadget en la sidebar pero yo lo quiero en el pie de cada entrada, vi un blog que lo tiene alineado a la derecha y me gustaria mucho que quedara igual.

Rosa

RSS Mira a ver si es esto lo que buscas:
http://blogandweb.com/web-20/blogger-sharethis/

RRS

Si Rosa, es lo que busco pero creo que sigo necesitando tu ayuda porque quiero que se vea bajo todas las entradas en la pagina principal y con esta solución tengo que dar click en cada entrada para que se vea al final del post. aqui hay un ejemplo de pagina que lo tiene como yo quiero! http://www.purseblog.com/ Gracias de nuevo.

Rosa

RSS Lo haces tal como te indican en Blog and Web y cuando llegues a la parte de pegar el código, lo pegas sin más, sin añadir las líneas estas:
<b:if cond='data:blog.pageType == "item"'>
Código aquí
</b:if>

Ya que esas líneas son las que hacen que solo se vea en las páginas interiores.

En lugar de meter el código entre esas líneas, lo metes entre:

<div style="text-align:right;"> y </div>

Para que se vea a la derecha.

RRS

Hola Rosa gracias, si funciona pero lo baja una linea y lo repite 7 veces y luego en una tercera linea me pone los comentarios. Yo quisiera que todo este en el mismo renglon. Gracias de nuevo y perdona tanta pregunta.

Rosa

RSS Localiza el código que muestra los comentarios al pie de la entrada (con los artilugios expandidos):

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

Justo a continuación pegas el código del ShareThis entre estas etiquetas, así:
<span class='sharethis'>

<script type="text/javascript" src="http://w.sharethis.com/widget/?tabs=web%2Cemail&charset=utf-8&services=facebook%2Cdigg%2Cstumbleupon%2Cdelicious%2Creddit%2Cblinklist%2Cnewsvine%2Cfurl%2Ctailrank%2Cmagnolia&style=default&publisher=d7ab91b0-972b-4bd1-b982-0eb5b1886952"></script>

</span>

Luego en el CSS (antes de ]]></b:skin>) pegas esto:

.sharethis{padding-left: 50px;}

Según aumentes el valor en 50 vas dando más separación de los comentarios al ShareThis.

RRS

Gracias Rosa quedo Ok. definitivamente que haria yo sin ti! Un abrazo.

Rocio.

Rosa

RSS Gracias a ti por tu paciencia...al principio me lié un poquito, a veces me pasa con las cosas más tontas...

Dra Irasema

Gracias Rosa, salió perfecto.
Mi blog esta hermoso gracias a tus consejos.
Gracias por la inmensa paciencia que tienes.;)

Rosa

Dra Gracias a ti ;)

Global Metion Blog

muchas gracias Rosa que tonto de mi parte no pensé que una llave podría causar tanta cosa

Elizabetha Souvre

sniff...no me resulto :( :( :(

Rosa

Elizabetha Souvre ¿Y qué sucedió exactamente? :O

Elizabetha Souvre

Rosa...solo salio Twit this en letra común y silvestre ...sin monito ni nada snifff :o

Igual busque en aqui donde explican en forma facil el que tiene Gemma y tampoco resultó...ahi no salio ni imagen ni texto... =(

Rosa ya te lo pregunte pero como pones tu firma en los comentarios? lo encuentro un lindo detalle y se como hacer mi firma, pero no como ponerla...me ayudas? :P

Rosa

Elizabetha Souvre Quizá sea que no estás usando la url correcta para el "monito"

En cuanto a la firma puedes ver como hacerla en esta entrada:

http://elescaparatederosa.blogspot.com/2009/04/firma-en-los-comentarios-del-autor.html

Elizabetha Souvre

Graciasssssss...

probaré nuevamente, pero estoy segura que la url esra la correcta...lo probe tres veces :o

gracias por ayudarme :P

besitos

LIZ

Rosa

Elizabetha Souvre Cuando lo hagas, déjalo instalado y avísame para que yo lo revise ;)

MaryMoonLover

Buenísimo!!

Ahora, disculpa mi ignorancia, pero cómo hago para agregarle el pajarito?

Gracias!

Rosa

MaryMoonLover Eso es lo que indico en el paso [2]

MaryMoonLover

Gracias!!!!! :D

GraphicsToys

Muchas gracias Rosa, de mucha ayuda... me ha quedado genial en el blog... saludos!

Perro Zombie

por cierto.. felicitaciones por el proyecto de Radio !!!

Perro Zombie

sabes... hoy llegué con mucho ánimo para trabajar algunos cambios en mi blog pero me voy con la cola entre las patas, lo que quiero decir es que por más intentos que hice con este truco... jamás me logro salir la imagen que sugieres para que sea más vistoso el TwitThis... pero nada... en donde está como me quedó es en http://leidioteque.blogspot.com

También intenté el truco para poner citas de manera aleatoria... y no paso nada... ojalá me puedas ayudar... eso lo hice en http://perrozombie.blogspot.com

en verdad ahora ya me siento sumamente frustrado. saludos y felicitaciones por tan excelente blog !

Rosa

Perro Zombie A través de tu código fuente,veo todo esto:
/* Footer
------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
.share-tweet{
background:url(http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SWpEjMAlPiI/AAAAAAAAF-o/zXyDjiFIlMo/s1600-h/Nueva+imagen.PNG) 10px top no-repeat;
padding-left:42px;
font-size:12px;
line-height:18px;
}
}
.share-tweet{
background:C:\Documents and Settings\J LUIS RAMOS\Mis documentos\Galería\CARICATURAS\Nueva imagen.PNG 10px top no-repeat;
padding-left:42px;
font-size:12px;
line-height:18px;
}
.share-tweet{
background:<a href='http://img23.imageshack.us/i/nuevaimagenk.png/'><img src='http://img23.imageshack.us/img23/7312/nuevaimagenk.png' border='0' alt='Image Hosted by ImageShack.us'/></a><br/> 10px top no-repeat;
padding-left:42px;
font-size:12px;
line-height:18px;
}
La mitad de todo lo que ahí veo, sobra por completo.
Debería estar así:
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
.share-tweet{
background:url(http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SWpEjMAlPiI/AAAAAAAAF-o/zXyDjiFIlMo/s1600-h/Nueva+imagen.PNG) 10px top no-repeat;
padding-left:42px;
font-size:12px;
line-height:18px;
}

Rosa

Perro Zombie En cuanto a las citas aleatorias, no lo veo aplicado, así que no se donde puede estar el error...

Si vas a comentar más sobre las citas, deja el comentario en la entrada correspondiente a ser posible, es mucho más cómodo para todos.

Viviana y Sofia

Rosa

Esto es lo mismo que el tweetme ?

Y necesito algo como lo del tweetme, pero para Facebook... lo tengo en mis "marcadores sociales" pero creo que luciria mas si se le pudiera poner un boton como el de twitter... puedes aconsejarme algo?

Gracias guapa!

BanakaBanaka!!

Hola Rosa, con tu permisito, les voy a decir a Viviana y Sofía que a lo mejor lo que buscan es algo así:
Botón de envío a FaceBook con Contador

Un saludo!!

★Iván.

Viviana y Sofia

eso mismo!!!!! gracias!!

Alejandra Henriquez

hola Rosa:
Fijate que cambie la plantilla de mi blog e intente volver a colocar el item retweet pero primero no encontre el codigo html al que haces referencia, encontre algo vagamente similar y por supuesto no me resulta...ahora, revisando el codigo completo de la plantilla encontre un mensaje del creador que dice : Reminder: Unless you get the permission from the FalconHive.com, you are not allowed to increase or decrease any footer link in the footer, thanks!
Será por esto que no puedo insertar nada en los pies de entrada?????
Gracias!

Rosa

Alejandra Henriquez Ese mensaje lo que te dice es que no pueden borrarse los enlaces que su creador a colocado al pie del blog, es decir los créditos... suena como amenaza porque a menudo los usuarios los borran y los cambian como si la plantilla la hubiesen creado ellos y después de tanto trabajo de quien lo hizo es desagradable...
Pero eso no tiene nada que ver con lo que dices... no veo la plantilla ni donde esta colocada, y tendría que verla... aunque sin saber cual es, ya casi podría asegurarte que si puedes colocarlo sin problemas, solo se trata de encontrar el lugar correcto...

Alejandra Henriquez

Rosa
Logre poner el "twit this" (al parecer, por configuracion de plantilla tenia que buscar en la "cabecera" de cada entrada y no al pie)pero me pasa lo mismo que a Elizabetha Souvre...le pongo el link de la imagen y solo aparecen las letras sobre un fondo blanco...sera que el mono es muy grande? o muy chico?? a todo esto este es el blog http://naturasantiago.blogspot.com/ a ver si puedes ayudarme a dilucidar por queeeeeeeeeeeeee???

Rosa

AlejandraTienes que aumentar en esta línea de CSS el ancho, el mismo de la imagen o un poquito más:

line-height:18px;

Natura Santiago

mmmhh fijate que aún haciendo lo que me indicas no me resulta y ademas me di cuenta que cuando clickeo twitthis, luego de demorarse un millon de años, me aparece "¡Vaya! Parece que este enlace está roto." por chrome y "http://www.domainnotlocated.com/?keywords=http%3A%2F%2Ftwitthis.com%2F" por Explorer... revise el link de twitthis y está exactamente igual a como lo posteaste tu y Woork...asi que ...no entiendo...que es lo que esta mal...ideas?? gracias, gracias!

Rosa

Natura Santiago Si el enlace está bién... ni idea :S

Natura Santiago

bueno era bastante simple la respuesta ...http://twitthis.com/ no funciona....
Gracias de todas maneras!

Rosa

Natura Santiago Pues me alegro que solo fuese eso... volverá a la normalidad otras veces ha pasado...

Raúl

Hola Rosa yo tengo el mismo formato tuyo el primero el título de la entrada: Título del blog. Cuando pongo el botón de Twitthis. Y lo Twitteo me aparece el título de la entrada seguido por : y el título del blog. Pero el problema es que el título de mi blog es muy largo. Y quisiera que cuando alguien Twittea algo de mi blog solo aparezca el título de la entrada como te aparece a ti. Como lo puedo hacer??

Rosa

Raúl Si te digo la verdad, ni me había fijado en eso... así que supongo que dependerá del lugar de la plantilla donde vaya colocado... en mi caso está donde indico en la entrada... no he hecho nada más.

Felipe

Excelente consejo Rosita

Lo he implementado y funciono perfectamente.
Al principio me molesto un poco el CSS porque no me mostraba la imagen, así que decidi eliminar el código CSS y más bien en el link añadi la imagen.

:) Un saludo

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