103

Botones de compartir oficiales de Blogger

Actualización:

Ya están disponibles en el panel de Blogger "normal" sin necesidad de ir a Blogger in Draft, aunque los pasos para instalarlos en plantillas modificadas previamente siguen siendo los de esta entrada.

Blogger está dando la opción de probar a través de Blogger in Draft un conjunto de cinco iconos sociales para compartir las entradas por correo electrónico, Blogger, Twitter, Facebook y Google Buzz.
En el caso de Twitter se usa la url acortada utilizando para ello el servicio del propio Google.
Los botones se verán tal como veis en la imagen, aunque incluyen efecto "hover" y al paso del ratón se mostrarán con todo su colorido.

Marcadores blogger post

Aunque aún están en periodo de pruebas, podemos comenzar a utilizarlos aún en las plantillas anteriores al Diseñador de plantillas e incluso en las plantillas modificadas, ya que hace tiempo que Blogger añadió el código necesario en ellas para los botones tal como JMiur de Vagabundia JMiur (Vagabundia) adelantaba en esta entrada.

[1] Accedemos a nuestro escritorio de Blogger desde Blogger in Draft.

[2] Vamos a Diseño y en el gadget "Entradas del blog" pinchamos en editar. Marcamos ahí la opción "Mostrar botones para compartir".

Iconos compartir

De esta manera ya deberían ser visibles los iconos para compartir al pie de nuestras entradas.

En el caso de las plantillas modificadas, y aún a pesar de que el código de los botones esté incluido en ellas, no se mostrarán sin añadir unas líneas en la plantilla:

[1] Marcamos la opción de "Expandir las plantillas de artilugios" situados en Edición HTML.

[2] Localizamos esta línea de código:

<p class='post-footer-line post-footer-line-3'>

O en su defecto, esta otra:

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

[3] Debajo de esa línea, añadimos esto y guardamos los cambios:

<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>


Si solo queremos mostrar los botones en la página de entradas y no en la principal por ejemplo, incluimos el código anterior en una condicional de este modo:

<b:if cond='data:blog.pageType == "item"'>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
</b:if>

Usando CSS podemos escoger que botones mostrar, ocultando aquellos que no nos interesen usando para ello la clase que tiene añadida cada botón.
Colocamos antes de la etiqueta ]]></b:skin> una línea como esta para cada botón que queramos ocultar:
.sb-email{display:none;}/* ocultar boton email */
.sb-blog{display:none;}/* ocultar boton Blogger */
.sb-twitter{display:none;}/* ocultar boton Twitter */
.sb-facebook{display:none;}/* ocultar boton Facebook */
.sb-buzz{display:none;}/* ocultar boton Buzz */

Entradas Relacionadas:

103 comentarios:


And3rz0n

Gracias!!!!

Lo usare ahora mismo :P

Manuel de la Fuente

El código que genera esos botones es uno de tantos que Blogger no deja eliminar: por más que lo borro sigue apareciendo a fuerza aunque yo no los necesite. |O

No es que estorbe tampoco, pero no me gusta tener en la plantilla cosas que no sirvan para nada y me irrita esa actitud de Blogger de creer que sabe más sobre las necesidades del usuario que el usuario mismo.

Bueno, el botón de Twitter y su acortador integrado me puede ser útil. Más tarde lo revisaré con calma a ver si puedo sacarle provecho. :P

Celeste

No puedo localizar esa línea en el html. Yo tengo una de las nuevas plantillas, modificada y no se ven los botones por más que seguí estos pasos.

Espero que me puedas ayudar. Gracias!!

http://celestelera.blogspot.com

Jair Octavio

Hola Rosita, emm ya hice como me dijiste y pude colocar el widget de la marquesina en los div y ahi es donde lo necesitaba, y el menu fue cosa de modificar el codigo y agregarle un padding y pues hasta que lo baje y quedo bien, mil gracias por eso...

Ahora necesito que me ayudes en dos cosas nada mas:

Que me ayudes a subir las sidebars, ahi en la widebar donde dice visitantes esta muy abajito de lo normal y me gustaria subirla al raz de la la "hoja blanca" osea subirlo mas...

Y otra cosa tomando un poco de confianza me gustaria que como tu blog es EL ESCAPARATE DE ROSA me gustaria que me dieras tu punto e vista si el mio le pondria " El Longe De Jair Octavio" no se si te molestaria...

Mil gracias de antemano...

3rn3st0

Rosa sólo escribo para agradecer tu amable atención a la información que te solicité vía el formulario de contacto de El Escaparate.

Agradecido siempre :)

SMB

mi gran conflicto: mi plantilla no tiene en elementos de página la opción "entradas de blog" (es tipo revista, sólo con widgets)

El Comico :)

Hola rosita soy "JHEFE" :)

1ro.- Felicitarte por tu hermoso BLOG.
2do.- Agradecerte por compartir tus conocimientos, nos ayuda mucho a los q estamos perdidos en el "PLANETA BLOGGER"
3ro.- Me quedo bien XVR(Bonito) los botones :)

Admin

Gracias Rosa!! Muy útil tu entrada, no había forma de que se mostraran los botoncitos si no fuera por esa linea de código ;) Ya lo puse en uno de mis blogs, en los otros ya tengo otros similares.
Besote guapa :D

Unknown

Saludos
Aunque no tengo esa linea en mi plantilla
Si supe donde agregar la faltante
y me quedo excelente Gracias

Kazbam

Gracias Rosa!!!

Valentín VN

Fantástico, Rosa.
Sin el código que nos proporcionas no me hubiera funcionado.

¡Muchísimas gracias!

Dyas

Pues yo lo que quisiera es que el texto de las entradas no quedase tan pegado a las imágenes, sean estás situadas a la izqda o drcha, o sea, que quedase espacio suficiente entre texto e imagen, cosa que ya no sucede desde que he cambiado la plantilla antigua por la nueva Watermark de Josh Peterson, que sólo respeta ese espacio si subo la imagen centrada y tampoco del todo, porque la coloca ¿como por defecto? arriba, pero a la drcha.
Mil gracias anticipadas, Rosa!

Anónimo

Celeste En las nuevas planillas del Diseñador no hace falta hacer más nada que marcar la opción y los botones ya se muestran, yo misma lo he comprobado.

Anónimo

© ۞Jair Octavio۞ A tu blog puedes ponerle el nombre que quieras.

En cuanto a lo de la sidebar, ha de estar en
#sidebar_top{

o en algo así... y tendrás que reducir ahí alguno de los margin.

Anónimo

3rn3st0Yo también te agradezco la molestia de darme aquí las gracias, pero no era necesario, de verdad.

¡Un abrazo!

Anónimo

JhEfErSoN Mi querido Jhefe :D
¡Muchas gracias amigo!

Anónimo

k_nelita ¡Gracias cielote! Besotes a ti también. :D

Vanessa

Rosa, buenas tardes. ¡¡Hecho!!! Me gustó como quedó.

Si quieres echarle un vistazo te dejo mi blog http://elmayortesorodelmundo.blogspot.com/

Un saludo.

..NaNy..

Hola gracias secretaria Rosa (es que tu cabecera lo parece y me gusta) que fácil de poner hasta para mi pero si es por ti a mi se me pasa. Saludos

Nelson Díaz

Mi apreciada Rosa, un cariñoso saludo, te comento que luego de instalar este artilugio y manipular el código, algo hice mal y ahora se me duplican las entradas, instale también dos botones, el de bitacoras y el de Stumbleupon, en algo falle y no he podido remediarlo, espero puedas orientarme al respecto. Muchas Gracias, el error en el Blog: http://blogintelgrafic.blogspot.com/

Gracias de nuevo mi estimada Rosa

Nelson Díaz

Mi estimada Rosa, ya solucione el detalle al que te hacia referencia en la consulta anterior. Un abrazo y como siempre mis felicitaciones y agradecimiento por tus aportes. : )

Anónimo

Qué tal Rosa! pues yo los he puesto y no molaron asi que lo quite... bueno solo paso a saludar y a decirte que tus tutoriales siguen siendo buenos y vigentes he implementado varios de los trucos aun cuando al final ocupe el diseñador de plantillas de blogger para la plantilla de mi blog por un tiempo.. ya que siempre ando cambiándola. Así que gracias por tus entradas siempre!

Saludos!

P.S: a me olvida quisiera molestarte con una problemilla que tengo, le he puesto fondo de color al post-footer pero me ha tomado las entradas relacionadas y no me gusta, quisiera que queden independiente me podrías ayudar.

Muy agradecida me despido
saludos!

Anónimo

Vanessa Bien!!! Aunque mucho mejor el increíble paisaje que he disfrutado en tu blog eh? :O

Anónimo

..NaNy.. Siii... secretaria para todo que parece ¿eh? :D

Anónimo

Umm Abdurrahman Mueve el código de las entradas relacionadas algo más arriba en la plantilla, justo antes de:
<div class='post-footer'>

Carol

muchas gracias, he puesto los botones y no quedan mal del todo ;)

pd no se donde debo poner una consulta.al entrar a mi blog esta mañana me he encontrado los colores de entradas cambiados y ahora no da opcion o no se verla.

felicidades por el blog

Gilda Dmyuv

Hola! Muchas gracias por la info. Una dua: en editar entradas se puede "elegir" la posición de los botones pero al guardar y ver el blog están colocados al final ¿xq? ¿se puede modificar?

Gracias por todo

Cabañas en árboles

Gracias Rosa

s0ymarcel0

Gracias rosa! ese era el toque que necesitaba! :D

Mabel

hola Rosa! esto viene super bien para editar las entradas! estube mirando tu blog y me has sido de muchisima ayuda! Te visitaré seguido, Saludos!! :)

Anónimo

Gilda Hace ya tiempo que no funciona bien eso... te deja arrastra, pero luego no se muestra el cambio.
Tendrías que mover el código en la plantilla a donde necesites.

Anónimo

Chipilofan He tenido que eliminar tu comentario, lo siento, pero no permito enlaces en ellos tal como indico sobre el formulario.

Jair Octavio

Hola Rosita, si funciono, solo que llega a un margen y -__px no se puede je je je, pero asi esta bien, gracias por eso...

Tambien gracias por hacerme entender lo del titulo de mi blog, asi lo hare, salu2...

Jair Octavio

Hola rosita, nuevamente, necesito poner iconos y darles una ubicación mediante codigos:

img.rss{
position:absolute;
left: 150px;
top: 400px;
height:80px;
width:80px;
border:0px red solid;
}

Mas o menos asi, y ponerles su seccion en los div...

digamos asi: .ocotito{, .twitter{, .etc{,

Pero por mas que le intento no puedo y he buscado en tu blog pero no doy con algo parecido, me gustaria que me ayudases en eso, es que voy a editar mi blog con imagenes y me gustaria que al darles click levaran a sus respectivos sitios... Algo que me serviria como eso...

Mil gracias de antemano...

PedroX

Buenisimo!! Ya lo coloqué y perfecto :D

Gracias Rosa.

Albus Dumbledore

Hola Rosa me gustaría hacerte una pregunta, en mi pc tengo instalados los siguientes navegadores: FIREFOX 3.6.4 e INTERNET EXPLORER 8, la cuestión es que estuve comparando uno de mis blog (elclubdedumbledore.blogspot.com)en ambos navegadores y pude observar que en FIREFOX las imágenes tienen el efecto de sombra alrededor pero en INTERNET EXPLORER no logro ver dicha sombra, a qué se debe esto, será que me falta algo en la plantilla?...

Anónimo

© ۞Jair Octavio۞ No entiendo que es lo que quieres hacer, pero de todos modos creo que ya te lo he dicho alguna vez... no puedo atender peticiones para diseños particulares Jair, no dispongo de tanto tiempo.

Anónimo

Albus Dumbledore Se debe a que IE no soporta las sombras y no las muestra.

Pixérico

Muy bueno el aporte muchas gracias por este post y por todos los demas que tanto me estan sirviendo para adecentar mi blog, que aunque lleva poco tiempo en linea me siento muy orgullos, espero llegar ha tener un gran numero de lectores como el suyo. Un saludo

Jair Octavio

Emm Rosita creo que ya encontre algo que me puede servir, espero y funcione, relajate je je je, salu2...

Anónimo

hola!!!! soy gran seguidor de escaparate!!!
sOy del equipo danimes y sabes no encuentro esas lineas de post footer en mi plantilla no viene ni uno de los dos!
ke puedo hacer?

Anónimo

Brujo Disfruta con lo que haces y seguro eso tendrá su recompensa a corto o medio plazo.
Gracias por estar!

Anónimo

danimes.com Mira si tienes algo así:

<div class='main-post-footer'>

Y colócalo a continuación de eso o en esa zona...

recetasytrucos

Hola!! Te escribo para decirte que tu blog me está ayudando a configurar mi recién creado blog.

Muchas gracias! Te seguiré de cerca!! ;)


¡Saludos!

EBblogger

hola Rosa gracias!!! Siempre me alludas si tenes tiempo pasate por mi blog: http://www.animex38.blogspot.com

Anónimo

Rosa!!!!!
si lo enkontre Hice lo que dice arriba pero siguen sin aparecer!
de hecho si muevo el orden de las opciones komo lo es editar entrada o enviar tmpk se modifica
kual es el error???

Anónimo

Gracias por tu atención Rosa!
Saludos!

Aeren

gracias, tanto pelearme con los marcadores y ahora ya estan por defecto.:P eres una crack!

Anónimo

4ever La opción ahora está en el diseñador de plantillas, ya que estás usando una de las nuevas.

Anónimo

danimes.com Ni idea... quizá sea el diseño de tu plantilla.

Eligor!

Hola Rosa, tantas lunas! - me gusto mucho estos de los botones oficiales! :) y por cierto me gustaria preguntarte como hago por ejemplo para que la fuente de las entradas sea distinta me refiero, es que escribo poemas y quiero publicar pero quiero que el texto sea diferente! osea otra fuente...Muchas Gracias espero que me hayas entendido Saludos! adios :)

@ManelFdez

Gracias Rosa!
He cambiado los botones por estos nuevos y quedan de lujo. Me gusta este color gris suave y que cambia cuando pasas el puntero por encima. Lo único es que no me queda "alineado" con -Publicado por La Classe de Francés 0 Comentarios- y eso no me acaba de gustar mucho. Si tienes alguna solución me dices porque probé con el "float" y solo me alinea a la derecha. Como siempre... eres fantástica y tu blog tiene un aspecto muy cool. ;)

Anónimo

La Classe de Francés Prueba colocando el código que los muestra antes de, en lugar de después de:
<div class='post-footer-line post-footer-line-3'>

o incluso si ahí no queda, antes de esa línea habrá un </div> colócalo antes de ese div de cierre.

Anónimo

Eligor!Eso puedes hacerlo directamente desde el editor de entradas, si usas el nuevo editor claro:
http://elescaparatederosa.blogspot.com/2009/09/nuevo-editor-y-avatar-en-comentarios.html

Eligor!

Ok Gracias!

Basi

Hola Rosa.
Gracias por todo lo que nos enseñas, para poner nuestros blogs a punto.
Saludos.
Es el segundo comentario en este post, el primero no entro.

@ManelFdez

Gracias ROSA!!! Ha quedado de lujo gracias a tu indicación. Eres la mejor!

Gracias de nuevo. :)

Amenastro

Una pregunta rosa... tengo una plantilla nueva y he tildado la opción de los botones para compartir, y no me apareció en ninguna entrada... supuse que todavía no estaban disponibles 100% ya que decían que los enlaces no llevaban a ningún lado... y me preguntaba ¿tengo que aplicar lo que dices en el punto 3?... o espero algun tiempo? para visualizar los botones.

Diegose07

hola rosa
aparte de estos codigos:

div class='post-footer-line post-footer-line-3'

p class='post-footer-line post-footer-line-3'

div class='main-post-footer'

que no esta en mi plantilla puede estar para añadirle el codigo para poder ser visible los icono?

perdona las molestias..
saludos

Anónimo

Amenastro Una plantilla nueva o una de las nuevas plantillas de Blogger, son cosas distintas... si es de las diseñador de Blogger no deberías tener que incluir nada, si no es entonces probablemente si...

Anónimo

Diegose07 No entendí que quieres decir, lo siento. :O

Amenastro

Es una de las nuevas plantillas de Blogger Rosa, y ya he tildado la opción de los botones, pero no aparece nada. jeje. Oye Rosa, que tengas un feliz mes de Julio.

Anónimo

Amenastro Deberían de mostrarse entonces... trata de añadir el código del paso 3 a ver si es eso.

Diegose07

Solucione mi problema!!! ;)

Me qdo muy bien gracias por el post!!

Saludos

Ecovivencias

Gracias Rosa, lo acabo de implementar en mi blog de recetas de cocina http://ecuacat.blogspot.com

Amenastro

He añadido el código del paso 3 Rosa y quedo todo bien.
Yo tengo las etiquetas al final de las entradas y logre que los botones aparecieran justo en el espacio que quedaba al final después de las etiquetas y no mas abajo. Así que la posición de los botones varia, de entrada a entrada.
Gracias Rosa. Eres de gran ayuda.

Mateo

Rosa querida!
2 cosas:
1)Instale un boton de twitter por medio de java (creo) para compartir mis entradas, si te gusta te paso el codigo (agarre uno de wordpress y lo modifique para blogger) fijate: http://www.losmejoresvideosdeinternet.com/
2) Tambien puse la opcion que da blogger para compartir las entradas, ahora lo que no me gusta es que lo muestre con sombra, creo que se hace poco visible de esa manera. Me gustaria saber si se puede sacar la sombra y si se pueden agrandar los botones.
Saludos!!

Anónimo

Mateo No que yo sepa, sino ya lo habría incluido en la entrada...

Unknown

Una consulta, he habilitado los botones y también lo he podido ver, pero ¿que puedo hacer para que no aparezcan al final de la entrada sino al comienzo, osea antes del texto del post y bajo el titulo?

Muchas gracias.

Anónimo

Sergio Colocar el código del código del paso [3] más o menos debajo de esta línea:
<div class='post-header-line-1'>

No sin MyMakeUp

Muchas gracias, he logrado instalar estos botones, genial, gracias por las explicaciones. Fantástico Blog !!

Crispy

¡Eres genial Rosa!
¡Gracias! :D

Crispy

Ay, estan los botones, porque si pasas el puntero te da la opcion, pero no se ven :S

egm

Gracias Rosa. Esta entrada me ha sido muy útil para que aparecieran los botoncitos. He tenido que seguir también lo que dices en la respuesta 53 para que se alineasen a la derecha de etiquetas/comentarios y no debajo. Al final he tenido que colocar las 3 líneas de código inmediantamente antes del /div que hay antes de div class='post-footer-line post-footer-line-2'/ Gracias

egm

Ah, mi blog es enriquegutierrezmiranda.blogspot.com y tengo un enlace a este blog en la sección Bloguilandia

Anónimo

Alice CullenEs raro porque tu plantilla es de las nuevas y deberían aparecer sin problemas :o ..¿Has añadido la línea del paso [3]?

Crispy

Sí, pero aún así es como si fuese invisible :((

Anónimo

Alice CullenNi idea entonces... un fallo en la plantilla o en Blogger... tampoco tenemos demasiado control sobre los botones.

arkitekton

Rosa, otra vez mas con tus consejos resuelvo todos los problemas de diseño del blog. ¿Sabes si puedo variar la posicion de los botones? desde diseño me deja moverlo pero luego no se refleja en el blog y siempre me lo deja debajo de comentario, y me gustaria ponerlo al lado. Te dejo la direccion http://urarchitecture.blogspot.com/

Anónimo

urarquitecture Busca en tu plantilla esta línea:
<span class="post-comment-link">
A partir de esa línea ve mirando el código, y el siguiente </span> que veas, pega el código para mostrar los botones ahí.

syl

Hola Rosa!
yo tengo la plantilla Minima Stretch y me resulta imposible. Añado el paso 3 pero nada los botones no aparecen en ningún sitio :S
Gracias por tu blog, ayuda mucho!

Anónimo

syl No se que decirte... deberían salir, más en una Mínima...

syl

Gracias Rosa! le dire a mi chico que me revise los pasos a ver si etsoy fallando en algo.
besos

Rafael Pavón Reina

Gracias por tus consejos. He aplicado éste a mi blog de poesía. Un saludo.

Anónimo

Muchas gracias por el consejo, Ya está puesto ;)

Anónimo

Hasta los cojones. Un placer leerte por aquí! :D ¡Mucha suerte de nuevo este año para los premios 20! ;)

Esta Historia no vende

Gracias, me sirvio de mucho!!

pero una consulta, los iconos se ven opacos...hay una forma para que se vean con su color original ?

Saludos,
Angel

Anónimo

Angel E Así es si, y es Blogger quien controla los botones.

Antonio Ruiz

Hola Rosa, ¿Se puede cambiar esos iconos blaco y negro por otros a color?

Anónimo

Antonio Ruiz No, ya que Blogger en su código o muestra la url de los botones... de todos modos son oscuros hasta que les pasas el puntero... tienen efecto hover con color.

Unknown

Rosa,¿y cómo hago para poner el mismo código y hacer que los botones de marcadores sociales aparezcan en la parte superior de las entradas?

Anónimo

JedimasterIría entonces después de o e esa zona:
<div class="post-body entry-content">

Miguel

Gracias de nuevo!!!!

Poco a poco voy tuneando mi blog gracias a ti!!!!

Te seguiré siempre!!!

Marta Comesaña

¡Mil gracias!!
No sabes cuántas veces había marcado la opción sin éxito, pensando que era una opción experimental y que todavía tenía fallos...
El caso es que mi plantilla está modificada y no sabía que había que añadir ese código, un poco más y me vuelvo loca! :D
¡Saludos y gracias por prestar tu ayuda!

* Strange Lola *

Hola Rosa!! Creo que es la primera vez que te escribo.
Antes que nada, quería agradecerte infinitamente, por todos los consejos y trucos que das para todos nosotros!! :).

En relación a este post, no sabía que Blogger había habilitado la opción de compartir. Realmente era algo que quería hacía un montón.
Pero tengoun problema!!!! no me aparecen!!! Vos decías en la entrada que si no aparecían había que copiar y pegar el código que escribiste. Bueno, así y todo... NADA !!!! por qué!!!!??? :(( :(( :((

Bueno, te dejo mil saludos desde Argentina y espero que me contestes :)!!!

Lola

Tepi

Mil gracias, este funcionó. De todas maneras están medios grises y no se ven. Hay alguna manera de que sean mas "visibles"?

Anónimo

Tepi No,eso lo controla Blogger, serán grises hasta que pases el ratón sobre ellos que se ven en color.

Anónimo

** Extraña Lola ** Quizá te falte además en tu plantilla el código para los botones, es raro, pero podría ser... mira en la entrada de Vagabundia que recomiendo en esta misma entrada.

Paco Arce

Hola Rosa, después de una semana me rindo.... Me funciona tu idea desde el primer dia, pero al compartir en facebook, solo me aparece la imagen con el título, sin nada de texto ¿por qué? Muchas Gracias

Anónimo

Paco Arce No es mi idea... simplemente es una opción más de Blogger... sino funciona como debe será supongo error de ellos.

Anniki

Cuanto tiempo buscaba intentando entender porque no me salian los botones y es que como tengo la plantilla hecha con artisteer y es modificada ahora lo entiendo!!!! 10.000 graciiiiiaaaaaaaaaaas :DDD

cvr

Hola Rosa. De vez en cuando entro en tu blog para ver las novedades, ya que me parecen muy útiles tus posts.

En este caso me animo a escribir porque tengo una duda con respecto a la opción de Compartir los post en las redes sociales. En mi caso no he usado la opción predefinida de Blogger, sino que he optado por un código HTML que encontré navegando por internet.

La pregunta es: una vez tengo configurado los botones y todo funciona correctamente, ¿dónde o cómo puedo controlar qué personas están compartiendo mis posts? Me parece muy útil poder monitorizar esa información.

Muchas gracias por la ayuda, un saludo y felices fiestas.
Chamaida

Anónimo

Chamaida Que yo sepa, no existe esa posibilidad :(
¡Felices Fiestas!

Publicar un comentario

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