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