Son muchas las personas que me preguntaron sobre este truco. Se trata de añadir la clásica barrita que dice "Compártelo" al final de cada post, junto con el link para que podamos compartir ese post en las principales redes sociales como Menéame, Technorati, Bitácoras, Facebook, Twitter, entre otras.
Es una función que interesa a muchos lectores, ya que les permite compartir el post con otras personas sin necesidad de copiar links o contenidos, lo que hace la tarea más fácil. Además, es una forma de promocionar nuestro sitio en estas redes sociales y ganar visitas.
Una vez aplicado este truco, el mismo se verá así:
Es una función que interesa a muchos lectores, ya que les permite compartir el post con otras personas sin necesidad de copiar links o contenidos, lo que hace la tarea más fácil. Además, es una forma de promocionar nuestro sitio en estas redes sociales y ganar visitas.
Una vez aplicado este truco, el mismo se verá así:
(click para ampliar)
Para añadir Marcadores sociales en Blogger debemos ir a la edición HTML de la plantilla, expandir artilugios y buscar lo siguiente:
<div class='post-footer-line post-footer-line-3' />
Y justo después del mismo pegamos este código:
<!--Marcadores sociales -->
<br/>
<b>Compártelo</b>
<br/>
<a expr:href='"http://meneame.net/submit.php?url="
+ data:post.url + "&title=" +
data:post.title' target='_blank' title='Agregar a
Meneame'><img alt='Agregar a Meneame'
class='rsociales-sobre'
src='http://img193.imageshack.us/img193/3083/meneamehm7.gif'/></a>
<a expr:href='"http://www.technorati.com/faves?add="
+ data:post.url + "&title=" +
data:post.title' target='_blank' title='Agregar a
Technorati'><img alt='Agregar a Technorati'
class='rsociales-sobre'
src='http://img193.imageshack.us/img193/5606/technoratiiy1.gif'/></a>
<a expr:href='"http://bitacoras.com/votar/anotacion/externo/mini/"
+ data:post.url + "&title=" +
data:post.title' target='_blank' title='Añadir a
Bitácoras'><img class='rsociales-sobre'
src='http://img192.imageshack.us/img192/9247/bitacoras.png'/></a>
<a expr:href='"http://del.icio.us/post?url=" +
data:post.url + "&title=" +
data:post.title' target='_blank' title='Agregar a
Del.icio.us'><img alt='Agregar a Del.icio.us'
class='rsociales-sobre'
src='http://img171.imageshack.us/img171/9913/deliciogl4.gif'/></a>
<a expr:href='"http://digg.com/submit?phase=2&amp;url="
+ data:post.url + "&title=" +
data:post.title' target='_blank' title='Agregar a
DiggIt!'><img alt='Agregar a DiggIt!'
class='rsociales-sobre'
src='http://img171.imageshack.us/img171/8971/digg.png'/></a>
<a expr:href='"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk="
+ data:post.url + "&title=" +
data:post.title' target='_blank' title='Agregar a
Google'><img alt='Agregar a Google'
class='rsociales-sobre'
src='http://img171.imageshack.us/img171/9755/googleoq9.png'/></a>
<a expr:href='"http://reddit.com/submit?url=" +
data:post.url + "&title=" +
data:post.title' target='_blank' title='Agregar a
Reddit'><img alt='Agregar a Reddit'
class='rsociales-sobre'
src='http://img18.imageshack.us/img18/9558/redditse1.png'/></a>
<a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url="
+ data:post.url + "&title=" +
data:post.title' target='_blank' title='Agregar a
Blinklist'><img alt='Agregar a Blinklist'
class='rsociales-sobre'
src='http://img2.imageshack.us/img2/556/blinklistspk5.png'/></a>
<a expr:href='"http://blogmarks.net/my/new.php?mini=1&simple=1&url="
+ data:post.url + "&title=" +
data:post.title' target='_blank' title='Agregar a
Blogmarks'><img alt='Agregar a Blogmarks'
class='rsociales-sobre'
src='http://img18.imageshack.us/img18/152/blogmarksus8.png'/></a>
<a expr:href='"http://www.facebook.com/share.php?u="
+ data:post.url + "&title=" +
data:post.title' target='_blank' title='Añadir a
Facebook'><img class='rsociales-sobre'
src='http://lh3.ggpht.com/_Go-jnwB2e7w/SaHSRY-AvsI/AAAAAAAABFw/SmkojETqA8U/facebook.png'/></a>
<a expr:href='"http://twitter.com/home?status="
+ data:post.url + "&title=" +
data:post.title' target='_blank' title='Twitter'><img
class='rsociales-sobre'
src='http://img210.imageshack.us/img210/3617/twitter.png'/></a>
<!--Marcadores sociales -->
Hacemos vista previa para ver que todo esté en orden, y si así es guardamos los cambios.
Ahora tendrán los Marcadores Sociales en Blogger al final de cada post, tal cual uso yo en los mios. El código suministrado es exactamente igual al que pueden ver en mi Blog de Pruebas.
Si te ha gustado este post, no dudes en suscribirte al feed RSS de VidaBlogger!
64 comentarios:
Vicarlone me parece que es después de
(div class='post-footer-line post-footer-line-3')(/div)
por lo menos asi lo vi en tu blog de pruebas
mmm no no anda :(
Gracias por avisar, ya corregi el problemita.
Saludos!
Holas! como va? Muchas gracias por pasar!!
Esta muy buena tu web! tenes muy buena info! Voy a probar añadir los Marcadores sociales a mi blog!!
Te interesaría hacer un intercambio de enlaces?
yo ya te agregué, si no queres avisame...
Un abrazoo!
Admin de Algunas Tonterias Blog
http://algunastonteriasblog.blogspot.com/
Buen tip, aunque yo corrigiria los saltos de linea por parrafos y las negritas en vez de b poner strong /strong es un error habitual en html que perjudica al SEO.
Un saludo
hola. una consulta: sabés cómo puedo agregar en blogger los íconos para contactar a través del perfil de facebook y de flickr?
gracias totales por el blog.
@Hernan
Busca en la seccion de iconos y encontra el que quieras (facebook, flickr, etc) y despues colocas el link que queres a las imagenes (de esta forma http://www.vidablogger.com.ar/2009/02/como-colocar-un-link-en-una-imagen.html)
Saludos!
Hola, queria saber si puedes facilitarnos el mismo estilo de Css que tienes en el blog, me interesa y si puedes pasarmelo me harias un gran favor, Gracias
@Luis
Aqui esta el css que uso yo en este blog:
/* ----- Bookmarking ----- */
.book {
margin-top:5px;
background:#fdfdfd;
padding:2px 2px 2px 2px;
border:1px solid #f0f0f0;
}
.rsociales ul {
display:inline;
margin:0pt !important;
padding:0pt !important;
}
.rsociales li {
background:transparent none repeat scroll 0%;
display:inline;
list-style-type:none;
margin:0pt;
padding:2px;
}
.rsociales img {
border:0pt none;
float:none;
margin:0pt;
padding:0pt;
}
.rsociales-sobre {
opacity:0.4;
}
.rsociales-sobre:hover {
opacity:1;
}
Saludos!
muchas gracias por el dato, me parece que es un elemento importante en todo blog, muy probablemente difunda nuestro contenido...
solo un consejo, especifica que hay que expandir las platillas de artilugios, porq si no, la línea será imposible de encontrar (seguro que a más de uno le pasó y cree que no sirve)
d nuevo, gracias y ojalá que visites algún día mi blog que apenas comienza, agradecería tus comentarios y/o sugerencias
Me alegra que te sirva, y gracias por avisar lo de los artilugios, ahora mismo lo edito.
Saludos!
Muchisimas gracias ,me ha venido de perlas para mi blog amigo.
@fuwan
Me algra que sea de utlidad. Saludos!
Pues yo no encontre la linea
(div class='post-footer-line post-footer-line-3')(/div)
o donde iria?????
@Jerry
Tiene que ser debajo de esa linea. Recuerda expandir los artilugios, y en caso que todavia no lo encuentres buscalo asi: post-footer-line-3
Hola! Exelente blog! hace tiempo que lo vengo siguiendo y ahy muy buena info ensima...
Yo tengo un gran problema... no puedo encontrar la linea div class='post-footer-line post-footer-line-3, ya expandi artilugios y nada, puse post-footer-line-3 como escribiste vos y tampoco nada... que puede ser entonces...?
alguna opcion mas??
gracias!
Mi blog: www.lossimpsonshoy.com.ar
@el barto
Mira, busque en el codigo fuente de tu blog y si encontre la linea post-footer-line-3
Fijate este screen que tome para que lo veas:
http://i40.tinypic.com/2hi2fzk.jpg
Como ves, yo si encontre esa parte del codigo en tu blog, por lo cual deberias buscarla mejor ya que si está.
Saludos!
Amigo muchas gracias, aunque seria bueno que nos proveyeras el mismo html y css que estas usando en este blog y no en el pruebas, si puedises hacerlo te lo agradeceria mucho.
http://fulladven.blogspot.com
Fijate que ya lo deje en uno de los comentarios.
amigo muchas gracias! al fin lo encontre!!
saludos y surte!!!
el barto
www.lossimpsonshoy.com.ar
gracias funciona muy bien.
http://Vyblogs.blogspot.com
Hola, no me funciona el enlace de facebook correctamente, o al menos como debe ser.
1. Si pretendo publicar un post antiguo, me recoge en facebook el primero cometario de ese post.2
2. Y si el que quiero publicar es un post nuevo, me publica el texto de presntación que está a arriba a la derecha.
¿Sabes cómo podría corregirlo, por favor?
Muchas gracias
@Dora
Ya corregi el codigo de faccebook, intenta con el nuevo a ver si resulta.
Saludos!
Muy weno Flaco me sirvio.. Un abrazo Lindo blog
@H4D35-X
Me alegra que te sirva, gracias a vos por comentar.
Saludos!
Gracias por todas las aplicaciones que informas para mejorar nuestro blog.
Pero no encuentro las dos o tres formas de scrip donde informas que debemos de pegar abajo el codigo
si me pudieras ayudar y verificar mi blog
thezoneone.blogspot.com
@TheZone
Asegurate de expandir los artilugios antes de buscar.
Gracias por la informacion,
Oero realmente cuando voy a modificar la planilla lo primero que hago es palomer para extender.
Mira este codigo fue el unico que encontre
(div class='post-header-line-1'/)
en donde esta el numero uno,puse 2 o 3 o4 y no encontre nadad ya lo instale despues de esa linea paro mira el blog chory1422.blogspot.com
aparece arriba y no abajao,hojala tengas tiempo de verlo y a ver si me pudieras ayudar
ese blog es de pruebas
adios
disculpa de nuevo,
Yo creo que ya lo solucione,realmente nunca encontre en mi plantilla el scrip que mencionas,como te lo comente en el anterior mensaje,lo que realize fue estar copy paste para ver donde quedaba mejor y ya quedo no fue en el scrip que mensionas.
porfavor podrias verificar el blog
chory1422.blogspot.com es de prueba
thezoneone.blogspot.com es el bueno y dime si se ven bien
sino puses ayudame a ver donde lo debo de poner
adios....
podrias decirme por que no funciona bien el icono de bitacors.com
ya pregunte y me dicen que esta mal el scrip podias verificar,ya que lo realize tambien en tu pagina de prueba que tienes y tambien no funciona
espero respuesta
adios
Hola!!
Gracias por este útil truco y los demás del blog!!
Llevaba un montón de días queriendo poner los marcadores en mi blog, y en otros sitios donde encontré el truco me daba un montón de problemas, pero aquí, A LA PRIMERA!!
Un saludo!!
Graciaas!!! esta buenisimo!!
Muchas gracias! esta buenisimo!!
Compañero...
El POst esta genial... sin embargo tengo algunos problemas....
1. Si pretendo publicar un post antiguo, no me recoge en facebook la imagen de ese post..
y lo principal es que...
2. Y si el que quiero publicar es un post nuevo, me publica el texto de presntación que está a arriba.
Si me puedes ayudar seria genial...
un abrazo..
Excelente..
sin embargo me ha dado algunos problemas....
ya que me los pone hacia abajo en cada entrada lo cual lo hace verse muy feo...
si puedes ayudarme excelente..
te mando tambien la direccion de blog..
http://lenin-abimopectore.blogspot.com/
@Victor
Asegurate de no cambiar nada en los estilos y de pegar el codigo correctamente. Acabo de checkearlo y funciona a la perfeccion.
Hola, ya coloque el codigo en mi blog pero no funciona, al picar sobre el icono, no me comparte.... q puedo hacer.. gracias
Buenos dias,
Disculpen de nuevo,agrege al blog sus marcadores sociales,estoy dado de alta en bitacoras.com,pero en sus marcadores no funciona bien el de bitacoras.
podrian ayudarme y verificar ustedes mismo visitando el blog thezoneone.blogspot.com y dar click en maracdores sociales icono itacoras
gracias por su ayuda
LO HE COLOCADO EN MI PLANTILLA, PERO NO FUNCIONA... NO SE COMPARTE,SE OBSERVAN LOS ICONOS, PERO NO SE ABRE NINGUN ENLACE... POR FAVOR EXPICAME QUE HAGO MAL, GRACIAS XD
He chequeado el codigo y funciona perfectamente. Pueden verlo funcionando en http://www.vidablogger.co.cc/ que es mi blog de pruebas.
Tambien funciona lo de bitacoras, tengan en cuenta que es necesario que nuestro blog este registrado alli para que se lo pueda votar
Un recurso genial. Muchas gracias.
Me alegra que te sirva. Gracias por comentar, saludos!
Hola quiero saber por qué cuando pongo el código me salen los íconos uno encima de otro y no en al misma línea. :-/
Cómo la arreglo???
Este es mi blog:
http://acentosperdidosenperu.blogspot.com/
A ver si me ayudan!!! Gracias :)
@Lorena
Asegurate de que el codigo no tenga el atributo < li >
Agrege tus marcadires sociales,estan muy bien.
Pero encontre en el blog El Rincon de vicarlonte
vicarlone.com.ar
me gustaria agregar los de ese blog si pudieras visistar el blog y poner el scrip en este web
gracias
@TheZone
En ese blog que mencionas (vicarlone.com.ar, mi blog personal =P) no uso blogger, sino que estoy utilizando la plataforma Wordpress.org, y esos marcadores los agregue con un plugin llamado SocioFluid
Saludos!
Gracias por responder,pero nos gustaria saber si hay alguna posibilidad que dichos marcadores sociales los pudieras agregar en este foro para poderlos agregar a nuetros blog personales
de antemano gracias por tu ayuda
adios
Hola, muchas gracias, me fué de utilidad.
@Luciano
Me alegra que te sea de utilidad
@TheZone
Como dije, esos marcadores son para Wordpress, por lo que NO EXISTEN para blogger.
Es fácil de hacer, pero si lo encuantras ya hecho, mejor.
¡Gracias!
Ahora viene lo difícil: decidir qué redes sociales poner y/o quitar, y adaptar el código en consecuencia, claro.
Imagino que habría que poner, como mínimo, Google y Yahoo, Facebook y Twitter, Bitácoras, Menéame, y algún otro sitio más en español y alguno de habla inglesa por si acaso.
En el tema de los códigos no ando tan perdido como en esa cuestión... Como no tengo el blog apuntado casi en ningún sitio de esos...
¡Un saludo!
Hola!
Tengo un blog en blogger y he intentado expandir artilugios y buscar el primer código pero no lo hay. Hace algún tiempo cambié la plantilla y no se si influirá algo pero me gustaría solucionarlo o al menos, intentar agregarlo de otra manera. ¿se puede?
Gracias.
@
Tal vez sea porque tu plantilla utiliza comillas doble. Intenta buscar por:
post-footer-line-3
Asi lo deberias encontrar. Saludos!
Hola Admin:
Gracias por la info, me ha sido de gran utilidad :)
Solo quería joderte con una cosa: te molestaría compartirnos el código para generar un marcador que permita compartir el contenido de un post a través de email y en LinkedIn?
Gracias y saludos!
@Carlos Javier
Mediante los comentarios no puedo pasarte el codigo (porque no lo acepta el formulario de comentarios)
Lo que puedes hacer es ver el codigo fuente de esta pagina y alli buscar donde esta el de email y linkedin.
Si no lo logras, dejame tu email y te envio el codigo.
Saludos!
Perdonad que me meta en la conversación, pero sí es posible poner código html en los comentarios. Mirad:
<html>
<head>
contenido
</head>
<body>
contenido
</body>
</html>
Sólo hay que convertir el código para que no lo interprete Blogger. Yo uso SimpleCode.
Estaría bien que se pusiera también lo del e-mail en los comentarios para que todos lo pudiéramos ver. Probad con el conversor y veréis cómo lo coge el formulario. Sólo quitar las etiquetas <code> y </code> y el resto, copiar y pegar y ya está.
Un saludo.
@José GDF
Agradezco tu aporte, pero como dije antes, en los comentarios no se puede usar codigo (solo las opciones basicas)
Mira lo que sucede cuando intento añadirlo: http://i38.tinypic.com/wtmx2.png
Prueba a quitar <code> y </code> y verás como sí. En la captura, Blogger te lo está diciendo.
Además, aquí mismo y en mi anterior comentario tienes dos buenos ejemplos de que sí es posible.
Prueba y verás como sí.
BUENISIMO!!! Probe con codigos de otras web y no me andaban, me marcaban error. Menos mal que encontre el tuyo, lo probe y entro de una. Muchas gracias!!!
Saludos!
No sabes cuanto te amo!!!!
Me he matado hace dias tratando de hacerlo!!! y gracias ti lo logre, me costo mucho buscar el scrip pero cuando lo encontre casi me cai de la silla de la alegria!!!!
ERES LO MAS!
@Tamack @Arjona Delia
Me alegra que les haya sido de utilidad =)
Gracias por comentar, saludos!
Muchas gracias por enseñarnos ;)
Me sirvió
Hola, funciona perfectamente... Estoy muy agradecido.
Si quieren chequearlo mi blog es: universalestudio.blogspot.com
Gracias
Publicar un comentario en la entrada
Lea las reglas:
Todos los comentarios serán leídos y moderados previamente.
Serán publicados aquellos comentarios que respeten las siguientes reglas:
- Su comentario debe estar relacionado al contenido del post.
- No se aceptan comentarios tipo SPAM.
- No incluya links No necesarios en el contenido de su comentario.
- Si quieres dejar la url de tu blog, hazlo utilizando la opción OpenID.
- La caja de comentarios no es el lugar para pedir intercambio de links (para ello ve a la página de contacto).
- Ofensan personales, amenazas o insultos NO serán permitidos.
OBS: Los comentarios de los lectores no reflejan las opiniones del blog.