miércoles, 18 de mayo de 2011

Modificar y mejorar marcadores Sociales de Blogger

Actualización: Haga este tutorial para agregar el botón google plus en otra parte.

He visto bastantes tutoriales sobre el tema de compartir con botones sociales estos meses, he usado durante este tiempo botones de terceros como Share This!, Add this! que te atosigan con que te suscribas ;a sus propias cuentas o que cedas información para publicar un extracto de texto.

Los códigos personalizados de enlaces sociales por otro lado sirven pero no todo lo bien que querrías, pues agregan texto que debes borrar o no tienen función de acortador de enlaces que es imprescindible.

Sin embargo ninguno me convenció realmente y aunque el de blogger que trae por defecto me pareció realmente bueno, el diseño es bastante feo y solamente tiene unas cuantas opciones, así que preferí mejorarlo. Si quieren más botones solicítenlos. O pueden agregar sus propios enlaces en la sección para agregar más botones asegurándose de retirarle cualquier clase, id y atributos de tamaño o borde.

Respalde su plantilla antes que nada.
En Diseño vamos a Elementos de la página y en Entradas del  Blog marcamos en Editar, en la ventana que se abre marcamos la casilla Mostrar botones para compartir y pulsan en Guardar:

Limpiar la plantilla
Vamos a Edición de HTML en Diseño y buscamos con el navegador la regla share-buttons (Ctrl+F en Firefox y Chrome o Ctrl+B en IE), de existir bórrela y guarde su plantilla.

Marquen la casilla Expandir plantillas de artilugios.

Buscamos <div class='post-share-buttons goog-inline-block'> deberá borrar el código siguiente (si no encuentra la etiqueta pase a la instalación directamente):
<div class='post-share-buttons goog-inline-block'>
     <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div>
</b:if>
Busque y elimine el siguiente fragmento:
<b:if cond='data:top.showDummy'>
<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
</b:if> 
Guarde la plantilla una vez hecho.

Instalación
Buscamos <div class='post-footer-line post-footer-line-3'> y pegamos justo después
<!-- share buttons by matius -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div>
</b:if>
<!-- Fin share buttons -->
Ahora buscamos <b:includable id='shareButtons' var='post'>
Reemplazar todo el contenido entre <b:includable id='shareButtons' var='post'> </b:includable> por esto:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='toolbox'>
<div class='custom_images'>
<!-- Sección fija, puede borrar botones eliminando secciones entre <b:if> y </b:if> -->
<b:if cond='data:top.showEmailButton'>
<a expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
<img alt='Enviar por Correo' src='https://lh3.googleusercontent.com/_NNS6r_z4aeg/Tc7nsGmM4II/AAAAAAAAUns/_SgQqULAGCU/email.png'/>
</a>
</b:if>
<b:if cond='data:top.showBlogThisButton'>
<a expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;,
\&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
<img alt='Enviar a blogger' src='https://lh6.googleusercontent.com/_NNS6r_z4aeg/Tc8G8kZwj4I/AAAAAAAAUn8/Mqe4cHhRsIc/blogger-32x32.png'/>
  </a></b:if>
<!-- Face book -->
<b:if cond='data:top.showFacebookButton'><a title='Enviar a Facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;'
expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;'
expr:title='data:top.shareToFacebookMsg' target='_blank'>
<img alt='Enviar a Orkut' src='https://lh5.googleusercontent.com/_NNS6r_z4aeg/Ta856DiRvdI/AAAAAAAAUQQ/08S3AyNsEds/facebook.png'/>
</a></b:if>
<b:if cond='data:top.showTwitterButton'>
<a expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg'
expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=290,width=750\&quot;); return false;&quot;' target='_blank'>
      <img alt='Tweetealo!' src='https://lh5.googleusercontent.com/_NNS6r_z4aeg/Tc3eVPNrweI/AAAAAAAAUkM/5TuM95Ql5-8/twitter_32.png'/>
  </a></b:if>
<b:if cond='data:top.showBuzzButton'>
<a expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;,
\&quot;height=415,width=690\&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'>
      <img alt='Enviar a Buzz!' src='https://lh5.googleusercontent.com/_NNS6r_z4aeg/Tc8IMh1TTEI/AAAAAAAAUoA/8cuO2eRJ3Z4/google-buzz-
32x32.png'/>
</a></b:if>
<b:if cond='data:top.showDummy'>
<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
</b:if>
<!-- Fin de sección fija -->
<!--Sección para agregar más Botones Sociales de 32*32 pixeles-->
<!--Technorati-->
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank' title='Enviar a
Technorati'><img alt='Technorati'
src='https://lh6.googleusercontent.com/_NNS6r_z4aeg/Tc3eVP0AYGI/AAAAAAAAUkI/c2sl9An6Jpo/technorati_32.png'/></a>
<!--Stumble-->
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external
nofollow' target='_blank' title='Enviar a Stumble'><img alt='Stumble'
src='https://lh5.googleusercontent.com/_NNS6r_z4aeg/Tc3fC61sPqI/AAAAAAAAUkU/rJffqyVKIes/stumbleupon_32.png'/></a>
<!--Delicious-->
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow'
target='_blank' title='Enviar a Delicious'><img alt='Delicious'
src='https://lh6.googleusercontent.com/_NNS6r_z4aeg/Tc3eUmPWCYI/AAAAAAAAUjw/2l23hbCW7Vo/delicious_32.png'/></a>
<!-- Meneame -->
<a expr:href='&quot;http://meneame.net/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'
target='_blank'><img alt='Enviar a Meneame' src='https://lh6.googleusercontent.com/_NNS6r_z4aeg/Tc3ixKYEGYI/AAAAAAAAUkY/XPegnFhl-g8/I_Meneame.png' title='Enviar a Meneame'/></a>
<!-- Fin Sección para agregar más Botones -->
<div class='clear' /></div>
</div>
</b:if>
Si quieren agregar más botones por ejemplo: el botón de RSS:
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Suscríbete!'><img alt='Suscríbete!' src='https://lh3.googleusercontent.com/_NNS6r_z4aeg/Tc5VChn61KI/AAAAAAAAUnE/zhwUxR_XMJI/social-connect-rss.png' /></a>
Tienen que agregarlo entre las marcas de la Sección para agregar más botones y como ya se dijo sin atributo de tamaño, borde o estilo. Los íconos son de 32*32, pero si los quiere cambiar debes modificar la regla de estilo .toolbox .custom_images a y luego reemplazar cada imagen por las que quieras usar.

Agregar CSS
Por último buscamos ]]></b:skin> y justo antes pegamos:

/* sociales */
.post-share-buttons {width:100%;}
.toolbox
{
width:380px; /* agrandalo 50px por cada icono nuevo */
height:50px;
margin:0 auto;
padding:5px;
text-align:center;
}
.toolbox .custom_images a:hover img{opacity:1;}
.toolbox .custom_images a img{opacity:0.65}
.toolbox .custom_images a
{
display:block; float:left;
width:32px;
height:32px;
margin:5px 5px 5px 0px;
padding:5px;
background:#fff;
border-radius:5px;
}

/* fin sociales */
Pulsa en Guardar Plantilla para terminar. El resultado debe ser parecido a esto En caso desalinearse los iconos, establezca un width y un height en la regla ".toolbox" yo usé el valor 380px y 60px respectivamente.

Comentarios y Consultas

Los mensajes son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

6 comentarios:

  1. Hay alguna forma de incluir tulinq.com, seria genial,
    Gracias

    ResponderEliminar
  2. No parece soportar el formato de envió de noticias.

    ResponderEliminar
  3. Muchisimas gracias, eres genial!!!, lo mejor que he encontrado hasta ahora. Super claro y conciso.
    Estaba tratando de quitar esos share buttons que vienen por defecto, son feos y solo gracias a tu blog lo consegui.
    Eternamente agradecida por tus aportes

    ResponderEliminar
  4. Espero que me puedas ayudar. He utilizado tu tutorial y todo ha funcionado tal y como esperaba. Tengo tan sólo un pequeño problema. Veo los "share buttons" en las entradas, pero en la página principal donde se van "apilando" por orden de publicación no. Cómo puedo hacer para que la gente pueda compartir las entradas sin necesitar entrar en ellas? Muchísimas gracias de antemano!

    ResponderEliminar
  5. Tendrías que eliminar

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    y

    </b:if>

    Estan señalados en negritas.

    ResponderEliminar
  6. Qué buen post Cgnauta. Nos ha servido. Lo único que hemos hecho es incluir el botón de meneame en este blog http://baiandby.blogspot.com/ y ahora lo que queremos es que al poner el ratón encima del boton salga la leyenda menéa este post en meneame es posible? En el resto de botones ya sale. Genial boog y muchas gracias.

    ResponderEliminar

Termina la serie Grimgar de Fantasía y Cenizas

Grimgar de Fantasía y Cenizas (2016)Llegó a su fin Grimgar de Fantasía y Cenizas luego de doce episodios.

[Leer artículo...]

One Punch Man OVA 4 (2016): Review y crítica

One Punch Man OVA 4 (2016): Review y críticaY llega una nueva adaptación de personajes del universo marvel, una divertida aventura espacial.

[Leer artículo...]

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y crítica

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y críticaLas aventuras de Itami y sus amigos llega a su fin con el rescate de Piña de las manos de Zorzal.

[Leer artículo...]

Desaparecida: Boku Dake ga Inai Machi (2016) Episodio 12 Final - Reseña y crítica del anime

Desaparecida: Boku Dake ga Inai Machi (2016)Satoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.

Anexos

Bitacoras.com