Popup con información de redes sociales mediante jQuery y CSS

Las redes sociales son los portales más importantes de Internet hoy en día. Es por eso que es muy importante tener presencia en dichos sitios web para ganar más tráfico. Ya no es una opción si eres administrador de un site, es una necesidad. Como he dicho antes, una de las maneras más sencillas de atraer a más visitantes a tu web es la promoción en redes sociales.

Toda red social cuenta con sus propios botones para compartir, darle a like, seguir en la red social, etc. Los más populares son el Like de Facebook, el seguir de Google+, el seguir en Twitter y el seguir en LinkedIn. En este tutorial veremos cómo crear un popup jQuery, que se mostrará al hacer scroll hacia abajo en la página, en el que se representarán varios de estos botones anteriormente descritos. Esto ayudará a los visitantes a encontrar las páginas de las redes sociales de tu sitio web y a darle a Like.

Para implementar todo este sistema utilizaremos jQuery, CSS y HTML. Una vez completado, podrás añadirlo a tu proyecto de una manera muy, pero que muy, sencilla. Además, también podrás mostrar un formulario de suscripción por correo electrónico o cualquier cosa en este popup.

Código Javascript

Lo primero que tenemos que hacer es incluir la librería jQuery

<script src="//http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Utilizaremos la función $(window).scroll() para detectar el evento scroll. También utilizaremos la función personalizada closeSPopup() para gestionar el cierre del popup.

$(window).scroll(function(){
    if($(document).scrollTop()>=$(document).height()/5)
        $("#spopup").show("slow");else $("#spopup").hide("slow");
});
function closeSPopup(){
    $('#spopup').hide('slow');
}

Código CSS

Estilos que necesitaremos para que se muestre el popup correctamente.

#spopup{
    background:#f3f3f3;
    border-radius:9px;
    -moz-border-radius:9px;
    -webkit-border-radius:9px;
    -moz-box-shadow:inset 0 0 3px #333;
    -webkit-box-shadow:inset 0 0 3px #333;
    box-shadow:inner 0 0 3px #333;
    padding:12px 14px 12px 14px;
    width:300px;
    position:fixed;
    bottom:13px;
    right:2px;
    display:none;
    z-index:90;
}

Código HTML

Inserta el contenido del popuo dentro del div “spopup”

<div id="spopup" style="display: none;">
    <!--close button-->
    <a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeSPopup();">
        <img src="ico-x.png" width="18" height="18"/>
    </a>
    <!--inserta el contenido del popup aqui-->
</div>

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP