S?bado, 06 de octubre de 2012

Veremos cómo poner los botones para compartir nuestras entradas en las distintas redes sociales en modo flotante

Verás que aun con subir o bajar el scroll de la página los botones permanecen ahí (en el lado izquierdo)

Además del botón Me gusta de Facebook, el botón para twittear, se ha incluido el botón +1 de Google Veremos cómo ponerlos de dos formas, o mejor dicho, con dos funciones diferentes.

La primera será para que sólo se muestren en las entradas y que su función sea compartir (o recomendar) la entrada donde se ha hecho click en el botón.

La segunda opción será mostrarlo en todas partes inclusive en la portada, pero con la diferencia que no será para compartir las entradas, sino el blog completo.

Entrar en Diseño

Edición de HTML

Expandir plantillas de artilugios

Buscar (con crtl y f) ]]></b:skin> y justo antes, pega lo siguiente:

table#RedesSociales{
position:fixed;
top:150px; 
left:5px; 
z-index:200;
}

Ahora busca esta línea:

<!-- clear for photos floats -->

Debajo de ella agrega este código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0' cellpadding='6' id='RedesSociales'><tbody>

<tr><td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=60&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:60px'/></td></tr>
 

<tr><td><a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td></tr>
 

<tr><td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></td></tr>
 

</tbody></table>
 
</b:if>

Guarda los cambios y listo. Ese servirá para que se compartan las entradas individuales, así que no se verán en la portada, sólo ingresando a un post.

Pero si lo que quieres es compartir o que se recomiende la URL de tu blog yno las entradas, entonces en lugar de ese código, el que pondrías sería este:
<table border='0' cellpadding='6' id='RedesSociales'><tbody>

<tr><td>&lt;iframe allowTransparency=&#039;true&#039; frameborder=&#039;0&#039; scrolling=&#039;no&#039; src=&#039;http://www.facebook.com/plugins/like.php?href=http://
nombre-de-mi-blog.blogspot.com&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=60&amp;action=like&amp;font=tahoma&amp;colorscheme=light&#039; style=&#039;border:none; overflow:hidden; width:73px; height:60px&#039;&gt;&lt;/iframe&gt;</td></tr>

<tr><td><a class='twitter-share-button' data-count='vertical' data-lang='es' data-text='
 Título del blog' data-url='http://nombre-de-mi-blog.blogspot.com' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td></tr>

<tr><td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone href='http://
 nombre-de-mi-blog.blogspot.com' size='tall'/></td></tr>

</tbody></table>
En este caso, hay que poner los datos que se indican en color rojo.  

En ambos casos podemos cambiar la posición de los botones, eso se controla en el primer código.

top:150px; es la distancia que habrá desde arriba, con un valor más alto los botones se bajarán.
left:5px; es la distancia que tendrán desde al lado, left indica que estarán a la izquierda, si los quieres a la derecha cambia left por right


Y listo. Otra forma de ofrecerle a los lectores la posibilidad de que valoren nuestro blog y entradas en las diferentes redes sociales


Publicado por lauraguilaramirez @ 9:40
Comentarios (0)  | Enviar
Comentarios