Inicio Condiciones de Uso Mapa del sitio ▼ Ayuda Blogger Afiliación ¡Enlázame! Vótanos en... ▼ Contáctame Acerca de...

sábado, 20 de agosto de 2011

Botones para compartir en las redes sociales

Hoy os presento algo de lo que estoy muy orgulloso, un script, que permite que a los diez segundos de entrar en una página la cubra una capa oscura semitransparente en cuyo centro hay un cuadro blanco, que contiene los botones de compartir tu blog en las redes sociales, Facebook, Twiter y Google+, y para no hacer muy pesada la navegación por la página, ya que se abriría cada vez que se recargara, incluí una cookie, que impide que se ejecute el script más de una vez al día.
Puedes ver un ejemplo aquí.


1ª PARTE.
El primer código debes añadirlo a la plantilla del blog, para ello ve a Diseño, luego a Edición de HTML y marca la casilla "Expandir plantilla de Artilugios", pégalo justo antes de la etiqueta </head>, si utilizas Google Chrome pulsa Ctrl + F para buscar más deprisa.



2ª PARTE.
Después busca <!-- clear for photos floats -->, es posible que salga dos veces, debajo de la primera pega lo siguiente:


<div id='redessociales' style='top:35%; left:40%; z-index:2000; display:none; position:fixed; background-color: white; width: 250px; height: 230px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-topleft: 15px; border-top-right-radius: 15px; border-top-left-radius: 15px; text-align: center;'>
<span align='center' style='font-size: 11pt;'><br/><b>¡Sígueme en las redes sociales!</b></span>
<table align='center' border='0' cellpadding='6'><tbody>

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

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

<tr><td align='center' colspan='2'><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone href='URL del blog' size='tall'/></td></tr>

</tbody></table>
<span align='center'>Pulsa <a href='javascript:void(0)' onclick='redesocialescerrar()'>aquí</a> para seguir en la página.</span></div>


La parte en color verde es el mensaje que se mostrará en la parte superior.
Lo que está en rojo, sustitúyelo por los datos que se piden de tu blog.

3ª PARTE.
Definitivamente el último paso consiste en añadir un tercer trozo de código, justo después de la etiqueta <body>, también es posible que te aparezca así:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>


<div id='fondoscuro' style='z-index:99; position:fixed; top:0px; left:0px; overflow:visible; height:100%; width:100%; background:#000000; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; -khtml-opacity: 0.8; display:none; color:white;'/>

<script type='text/javascript'>
var comprobar = getCookie(&quot;redesociales&quot;);
if (comprobar != null) {}
else {
var expiration = new Date();
expiration.setTime(expiration.getTime() + 86400000);
setCookie(&quot;redesociales&quot;,&quot;2&quot;,expiration);
setTimeout(&quot;redesociales()&quot;, 10000);
}
</script>


El trozo de código en rojo, es el tiempo en milisegundos que "vivirá la cookie", tras ese tiempo, el usuario podrá volver a ver el cuadro de las redes sociales. Está fijado en 1 día.
El trozo de código en verde, es el tiempo en milisegundos que tardará en abrirse el cuadro de compartir el blog. Está fijado en 10 segundos.

Si te funciono el truco o te gusta el post, un comentario se agradece.

4 comentarios:

  1. como siempre buena entrada amigo

    ResponderEliminar
  2. Muchas gracias Ramon, me alegro de que te gustara.

    ResponderEliminar
  3. Hola, amigo felicitaciones por los trucos. hice la prueba pero no encuentro la última parte: eso de body.. ese código que das.. ... eso que expandí todos los widgeds de la plantilla.. como puedo solucionar ese inconveniente. por lo demás excelente todo.

    ResponderEliminar
  4. Hola Yoel, es posible que ya hayas modificado la etiqeuta body en otra ocasión y por eso no la encuentres ahora.

    Una opción es que busques de nuevo esa etiqueta que digo, pero sin el > final, a ver si así la encuentras.

    ResponderEliminar

Puedes comentar todo tipo de cosas, absteniéndote de:
- Realizar SPAM.
- Escribir insultos faltando al respeto de los demás usuarios.
Recuerda que en este blog, la moderación de comentarios está activada, así que piénsalo bien antes de enviar tu comentario si tiene algo "prohibido".