Personalización de Blogs Idea guardada 1 veces
Sé la primera persona en valorar esta idea Valorar

Cómo poner otros botones para compartir en el blog

Os habréis dado cuenta ya que los iconos para compartir que trae Blogger, son bastante pequeñitos y discretos: 



Por eso yo los cambié hace ya tiempo por otros que pasan un pelín menos desapercibidos:


Tampoco quiero ser "pesada" y poner unos gigantescos, pero esos me parece que se ven lo suficientemente bien como para "recordar" a la gente que pueden compartir mi post en las redes sociales:


Me habéis preguntado varias veces cómo los he puesto y por eso voy a explicarlo. Realmente no tiene mayor misterio, porque he usado una página/aplicación para ello.
Los vi por primera vez en el blog de Sincerely Jules (ya no tiene esos) y desde entonces tengo estos en mi blog:Cómo poner los botones para compartir más grandes en el blog:

1) Vamos a la página ShareThis - Sharing tools
2) Elegimos la plataforma que usamos (yo Blogger) y le damos a Next:


3) Elegimos el aspecto que queremos que tengan (yo tengo los del medio y Sincerely Jules tenía los de la derecha), y a Next otra vez:


4) Entonces elegimos qué iconos queremos exactamente. Yo pongo en este orden Facebook, Twitter, Pinterest, Google+ e Email. Si queréis más solamente tenéis que arrastrar los de la columna del medio (Sharing buttons) a la de la izquierda (Selected Services). Además podéis ordenarlos simplemente pinchando y arrastrando.
Yo simplemente dejo los iconos de compartir, porque pienso que es mejor así, pero también podéis añadir un Me gusta de Facebook, etc.


5) En el momento en que le deis entonces a Get the Code, podréis registraros o simplemente darle a No thanks, just give me the code.
Si os registráis luego podréis ver vuestras analíticas.
6) Entonces os saldrá una página con la previsualización de cómo quedarán vuestros iconos en el blog, y el código que necesitáis. Lo seleccionáis y copiáis:


7) Y en Blogger, vais a la zona de Diseño - Añadir un gadget - Gadget de HTML - lo pegáis, y le dais a Guardar.
Guardáis la disposición en el blog, y ya los tenéis.


8) Ahora ya solamente tenéis que eliminar los de Blogger.
Zona Diseño - Entradas del blog - Editar - Desmarcar el tic de los iconos - Guardar gadget. Guardar disposición.


Y ya están:


¿Veis qué fácil?
9) OJO
ShareThis trae por defecto algo que a mi me pone muy nerviosa, y que es que cuando alguien copia y pega un texto de vuestro post, le sale sin los espacios que habéis puesto, y con un molesto "- See more at: y la url de vuestro post"
Podéis, a vuestra elección, quitarlo o dejarlo (yo recomiendo quitarlo). Si no sabéis si lo queréis, simplemente tratad de copiar y pegar dos o tres párrafos de vuestro propio blog y fijaos en lo que hace. Entonces decidís.
¿Cómo arreglarlo? Nos lo cuentan en esta página de atención al cliente de SharThis.
Si usáis Blogger, os lo cuento yo ya.
En vuestro código debéis mirar con atención dónde acaban las cositas que habéis añadido. Es decir, yo en este ejemplo, como habéis visto, lo último que sale es el email.
Vamos por orden y vemos Facebook (lo pongo en rosita), twitter, pinterest, google plus, y el email (también lo pongo en rosita).
<span id="st_finder"></span><script type="text/javascript" src="http://w.sharethis.com/widget/stblogger2.js"></script><script type="text/javascript">var switchTo5x= true;stBlogger2.init("http://w.sharethis.com/button/buttons.js",{"facebook":["hcount","Facebook",""],"twitter":["hcount","Tweet",""],"pinterest":["hcount","Pinterest",""],"googleplus":["hcount","Google  ",""],"email":["hcount","Email",""]});var f = document.getElementById("st_finder");var c = f.parentNode.parentNode.childNodes;for (i=0;i<c.length;i++) { try { c[i].style.display = "none"; } catch(err) {}}</script>
Y justo después del email y el corchete que lo cierra ] veis una llave:
}
Ok, pues después de esa llave, y antes del paréntesis siguiente, debéis añadir:, "INSERTYOURPUBKEY", {doNotHash:true,hashAddressBar:false,doNotCopy:true}

Para que os resulte más cómodo yo os recomiendo "cortar" vuestro código con unos intros:
<span id="st_finder"></span><script type="text/javascript" src="http://w.sharethis.com/widget/stblogger2.js"></script><script type="text/javascript">var switchTo5x= true;stBlogger2.init("http://w.sharethis.com/button/buttons.js",{"facebook":["hcount","Facebook",""],"twitter":["hcount","Tweet",""],"pinterest":["hcount","Pinterest",""],"googleplus":["hcount","Google ",""],"email":["hcount","Email",""]});var f = document.getElementById("st_finder");var c = f.parentNode.parentNode.childNodes;for (i=0;i<c.length;i++) { try { c[i].style.display = "none"; } catch(err) {}}</script>

Entonces ahí en medio pegáis la línea de código que os decía. Así: 

<span id="st_finder"></span><script type="text/javascript" src="http://w.sharethis.com/widget/stblogger2.js"></script><script type="text/javascript">var switchTo5x= true;stBlogger2.init("http://w.sharethis.com/button/buttons.js",{"facebook":["hcount","Facebook",""],"twitter":["hcount","Tweet",""],"pinterest":["hcount","Pinterest",""],"googleplus":["hcount","Google ",""],"email":["hcount","Email",""]}

, "INSERTYOURPUBKEY", {doNotHash:true,hashAddressBar:false,doNotCopy:true});var f = document.getElementById("st_finder");var c = f.parentNode.parentNode.childNodes;for (i=0;i<c.length;i++) { try { c[i].style.display = "none"; } catch(err) {}}</script>

Una vez de que lo tenéis así, que veis claramente que está todo bien (la llave, el código en medio, y el paréntesis después) entonces ya podéis quitar los espacios y dar a guardar los cambios en vuestro gadget de HTML.
Mil besos, y muchas gracias por vuestros comentarios.
No os olvidéis tampoco que tenéis los botoncitos para compartirlo y también para dar al +1 justo debajo de mi firma :)

¡Gracias por suscribirte! Mil besos, Blanca

Fuente: este post proviene de Personalización de Blogs, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Recomendamos

Relacionado

Tutoriales Redes Sociales Web

Como Personalizar botones de compartir.

Que feliz que me hace regresar al blog. Como algunos de ustedes saben, me fui de vacaciones, y regreso supercontenta, Mexico tiene lugares hermosos, llenos de historia y cultura, pero bueno esa es otra historia. Hoy vengo con un tutorial, que ya buena falta hacia por aquí en el blog. Este va a petición de mi amiga Marysol, que me ha pedido un tutorial para cambiar esos botones sociales para compar ...

general social

Cómo poner botones para redes sociales al final de tus entradas

Muchos Bloggers prefieren añadir botones para redes sociales al pie de sus entradas para que los usuarios puedan compartir el contenido que ha sido de su agrado. Vamos a aprender a colocar en el pie de entradas botones para compartir en Facebook, Twitter y Google+ nuestras creaciones.¿Qué son los botones para las redes sociales en un Blog?: Los componentes oficiales o no oficiales de las distinta ...

avanzado BLOG redes sociales ...

Botones para imprimir, enviar por correo y compartir por Whastapp tus entradas

Dicen que si no estás en las redes sociales no existes y en cierto modo es así, si el posicionamiento web no es tu punto fuerte, crear una comunidad activa y participativa siendo activa en tus redes sociales puede hacer crecer tu blog. Aunque Google es Google. Esta semana he estado de cambios en el diseño del blog, me he centrado en simplificarlo al máximo y hacerlo todo más sencillo. Si te fijas, ...

como hacer un blog

Bloquear boton derecho del raton en mi blog

Hola gente linda, Hoy vamos aprender a bloquear el botón derecho del ratón, para que nadie nos copie nuestros articulos o si deciden hacerlo que se les convierta en lidioso ese proceso, bueno empezamos para hacer esta operación vamos a ir a editar plantilla y buscamos </body> y antes de body pegamos el siguiente código: <script> // Inhabilitar el botón derech ...

internet blog básico ...

Cómo poner botones interactivos en tu blog

¿Te has fijado en los botones que uso en todos mis blogs de blogger? Como los que puedes ver en la barra lateral de este blog anunciando mis cursos y ebooks para bloggers y diseñadores. Son botones interactivos, yo elijo los colores y escribo el texto, el resto lo hace solito blogger gracias al código que tengo instalado en mi plantilla. Y eso es lo que voy a compartir contigo hoy. ¡Verás que es m ...

recursos blog tutoriales

Tutorial: Boton "pin it" personalizado actualizado

Hola! hola!!! Hoy vengo a enseñarte un tutorial para personalizar tu blog, se trata del código html para poner el boton "pin it" pero personalizado. Si tu ya lo tenias puesto en el blog te habrás dado cuenta que desde hace tiempo ya no funciona, ya no te aparece la imagen que tenias puesta y no te deja pinear las fotos :( y eso se debe a que el javascript dejo de funcionar. Por lo visto ...

internet

IMPEDIR QUE COPIEN TEXTO DE SU PÁGINA EN BLOGGER

Para impedir que otros usuarios copien texto de su página web y la peguen en la de ellos, hay un par de códigos que nos van a servir. Existen dos códigos: (Se les agrega a <body>, es decir, antes de </body> que está al final de la plantilla) 1) PARA IMPEDIR QUE COPIEN SOMBREANDO CON EL MOUSE Y HACIENDO CLIC CON EL BOTÓN DERECHO <script language="Javascript" type="tex ...

avanzado BLOG blogging ...

Cómo instalar un slider de imágenes en blogger

Esta semana he recibido un correo con esta duda: ¿Cómo instalar un slider de imágenes debajo del cabecero en blogger? Y no es la primera vez que me preguntan por el mismo tema. Este tipo de correos no puedo contestarlos uno a uno, prefiero anotar las dudas y cuándo se repiten mucho, desarrollar un tutorial en el blog, para que pueda verlo todo el mundo. Si me conoces un poco, ya sabes que no soy m ...

rendimiento

Mejora el rendimiento de tu web con GTMetrix: Defer Parsing of Javascript

En Diarios de la nube vamos a ir ayudándote a resolver cada respuesta que GTMetrix pueda devolverte al analizar tu web. GTMetrix es un servicio de análisis rendimiento de la compañía de hosting GT.net. Es capaz de realizar los test más exigentes para analizar la velocidad de carga de todos los recursos de un sitio web, indicando así su velocidad de carga y localizando posibles "cuellos de bot ...

general social

Cómo poner botones para que te sigan en las redes sociales en Blogger

Poner botones para redes sociales con los que tus usuarios puedan seguirte te ayudará a incrementar la presencia de tus contenidos en Internet. Si bien muchas veces preferimos utilizar botones al final de nuestra entradas para que nuestros usuarios compartan si lo desean nuestras entradas, es importante también que puedan seguirnos por las redes sociales si así lo desean. Qué mejor sitio para que ...