Cómo añadir un botón de Me Gusta de Facebook en un Pop-Up

El crecimiento de Facebook ha motivado a la mayoría de webmasters a por lo menos crear una página en Facebook, ya además la red social dispone de varios plugins para webmasters.
Uno de los plugins más usados es el “Like Box”, mediante el cual nuestros visitantes con tan solo un clic se pueden hacer Fan de nuestra página en Facebook.

Una de las formas para ganar mayor cantidad de Fans a nuestra página sería poniendo este botón “Me Gusta” en PopUp, además añadiéndole un tiempo de espera el cual al terminar desaparezca automáticamente.
Para instalar en nuestra web hacemos lo siguiente:


Pegamos el siguiente código en el “Head” de tu web

<style type="text/css">
#fblikepop {
background-color: #fff;
display: none;
position: fixed;
top: 200px;
_position: absolute;
/* hack Para IE 6*/
width: 450px;
border: 10px solid #6F6F6F;
z-index: 200;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
margin: 0pt;
padding: 0pt;
color: #333333;
text-align: left;
font-family: arial,sans-serif;
font-size: 13px;
}

#fblikepop body {
background: #fff none repeat scroll 0%;
line-height: 1;
margin: 0pt;
height: 100%;
}

.fbflush {
cursor: pointer;
font-size: 11px !important;
color: #FFF !important;
text-decoration: none !important;
border: 0 !important;
}

#fblikebg {
display: none;
position: fixed;
_position: absolute;
/* hack Para IE 6*/
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000000;
z-index: 100;
}

#fblikepop #closeable {
float: right;
margin: 7px 15px 0 0;
}

#fblikepop h1 {
background: #6D84B4 none repeat scroll 0 0;
border-top: 1px solid #3B5998;
border-left: 1px solid #3B5998;
border-right: 1px solid #3B5998;
color: #FFFFFF !important;
font-size: 14px !important;
font-weight: normal !important;
padding: 5px !important;
margin: 0 !important;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
}

#fblikepop #actionHolder {
height: 30px;
overflow: hidden;
}

#fblikepop #buttonArea {
background: #F2F2F2;
border-top: 1px solid #CCCCCC;
padding: 10px;
min-height: 50px;
}

#fblikepop #buttonArea a {
color: #999999 !important;
text-decoration: none !important;
border: 0 !important;
font-size: 10px !important;
}

#fblikepop #buttonArea a:hover {
color: #333 !important;
text-decoration: none !important;
border: 0 !important;
}

#fblikepop #popupMessage {
font-size: 12px !important;
font-weight: normal !important;
line-height: 22px;
padding: 8px;
background: #fff !important;
}

#fblikepop #counter-display {
float: right;
font-size: 11px !important;
font-weight: normal !important;
margin: 5px 0 0 0;
text-align: right;
line-height: 16px;
}
</style>

Ahora pegamos el siguiente código en la sidebar (si quieres que se muestre en todas las páginas) o también en cada página en el cual deseas que se muestre el popUp.

<script type="text/javascript" src="http://www.google.com/jsapi">// <![CDATA[

// ]]></script><script type="text/javascript">// <![CDATA[
google.load("jquery", "1");
// ]]></script><script type="text/javascript" src="http://connect.facebook.net/es_LA/all.js#xfbml=1">// <![CDATA[

// ]]></script><script type="text/javascript">// <![CDATA[
kakinetworkdotcom01username="tupaginadefacebook",
kakinetworkdotcom01title="Hazte Fan!",
kakinetworkdotcom01time="15",
kakinetworkdotcom01wait="0",
kakinetworkdotcom01lang="es"
// ]]></script><script type="text/javascript" src="http://espacioforos.miarroba.st/1924848/webmastercv/popupfb.js">// <![CDATA[

// ]]></script><script type="text/javascript">// <![CDATA[
$(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
// ]]></script>


Cambia “tupaginadefacebook” por el nombre o ID de tu Página en Facebook
15 es el tiempo en segundos que tardará en desaparecer el PopU🙂

Interesante opción para hacerlo manual pero si hubiese una DEMO fuera mucho mejor🙂

Aqui esta la foto de como es el Pop-up Me Gusta Facebook! 🙂🙂🙂

Gracias por el aporte 😀