Isso é simples!
Hoje estarei mostrando como criar um pop-up com a opção para curtir seu site no Facebook.
Antes de iniciarmos, é preciso dizer que você precisa ter a sua Fan Page criada no Facebook.
O Código
O nosso pop-up terá a frente a janela de curtir do Facebook, sendo acompanhada do famoso fundo preto transparente.Basta você incluir as duas partes do código do pop-up no seu HTML de acordo com as partes indicadas abaixo.
Vamos começar pela tag HEAD.
Inclua:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function()
{
function tamanhoMask()
{
$('div#mask').css({'height' : $(document).height(), 'width': $(document).width()});
}
function posicaoPopup()
{
$('div#popup').css('top', ($(window).height() - $('div#popup').height())/2);
$('div#popup').css('left', ($(window).width() - $('div#popup').width())/2);
}
$(window).resize(function()
{
posicaoPopup();
tamanhoMask();
});
setTimeout(function(){
posicaoPopup();
tamanhoMask();
$('div#mask').fadeTo(500,0.7);
$('div#popup').fadeIn();
}, 5000);
$('a#fechar').click(function()
{
$('div#popup, div#mask').fadeOut();
});
</script>
<style type='text/css'>
div#mask{
position : absolute;
z-index:100;
top:0;
left:0;
right:0;
display:none;
background:black;
}
div#popup{
display:none;
position:absolute;
z-index:101;
background:white;
padding:10px;
}
div#popup p{
text-align:right;
padding:0;
}
</style>
</head>
Esse é o conteúdo que vai no corpo (BODY) do seu HTML:
<body> <div id='mask'></div> <div id='popup'> <p><a href='#' id='fechar'>fechar</a></p> <iframe src="http://www.facebook.com/plugins/likebox.php?id=SEUIDAQUI&width=276&connections=8&stream=false&header=false&height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:276px; height:250px;" allowtransparency="true"></iframe></div> </body>Agora basta você substituir o SEUIDAQUI que está no segundo código pelo Número de identificação de página do Facebook.
Você irá encontrar o id da sua Fan Page assim:
- Abra o perfil da sua Fan Page;
- Clique em Editar Configurações;
- Clique na aba Informações da página;
- No último item da página, você encontrará Número de identificação de página do Facebook e, logo à frente, o seu id da Fan Page.
- Substitua o texto mencionado acima por esse número.
Pronto! Espero que seja útil!
Dê uma olhada no código do pop-up funcionando aqui:
Pop-up para curtir Fan Page
Marcadores: jQuery