Instala botones para compartir en las redes a modo de ventana de inicio

Artículo muy recomenable tomado de http://laventanadewindows.blogspot.com


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.

<script type='text/javascript'> //<![CDATA[ // Grabar function setCookie(name, value, expires, path, domain, secure) { document.cookie = name + "=" + escape(value) + ((expires == null) ? "" : "; expires=" + expires.toGMTString()) + ((path == null) ? "" : "; path=" + path) + ((domain == null) ? "" : "; domain=" + domain) + ((secure == null) ? "" : "; secure"); } // Leer function getCookie(name){ var cname = name + "="; var dc = document.cookie; if (dc.length > 0) { begin = dc.indexOf(cname); if (begin != -1) { begin += cname.length; end = dc.indexOf(";", begin); if (end == -1) end = dc.length; return unescape(dc.substring(begin, end)); } } return null; } //Borrar function delCookie (name,path,domain) { if (getCookie(name)) { document.cookie = name + "=" + ((path == null) ? "" : "; path=" + path) + ((domain == null) ? "" : "; domain=" + domain) + "; expires=Thu, 01-Jan-70 00:00:01 GMT"; } } //]]> </script> <script type='text/javascript'> function redesociales() { document.getElementById('redessociales').style.display="block"; document.getElementById('fondoscuro').style.display="block"; } </script> <script type='text/javascript'> function redesocialescerrar() { document.getElementById('redessociales').style.display="none"; document.getElementById('fondoscuro').style.display="none"; } </script>

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.