[TUTORIAL] Caixa de fãs do Facebook com lightbox

Neste tutorial vamos trabalhar com um pequeno JS que pode ser modificado por qualquer internauta com muita facilidade, sendo ele, responsável por um efeito desejado em muitos fóruns que optaram pela ferramenta que mostra os seguidores de uma FÃ PAGE do facebook na página do fórum.
Temos algo do gênero que poderá gostar também: https://shift.forumactif.com/t449-tutorial-caixa-de-comentarios-do-facebook-no-forum-tipo-blog

--> Tutoriais <--
Caixa de fãs do Facebook com lightbox

1º - Criar e capturar um ID:
Antes de prosseguir, acesse a seguinte página e personalize a sua caixa de qualquer maneira: https://developers.facebook.com/docs/reference/plugins/like-box/ Ao acessar, crie uma box de qualquer jeito, porque vamos precisar somente do ID do aplicativo para continuar. LEMBRE-SE de determinar o nome da sua página no Facebook antes de clicar em GET CODE.


Depois de determinar como IFRAME, copie somente o APPID ou ID do aplicativo IFRAME, porque no código Javascript teremos o poder para editá-lo como queremos.


2º - Aplicação do código Javascript:
Agora vamos colar o seguinte código nas páginas Javascript do seu painel. Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >> Criar um novo Javascript > Investimento > No índice

// ShiftActif - Código disponível no Fórum ShiftActif. Por favor, não remova esse trecho, pois ele não interfere no funcionamento do código.
var adress="URL_DA_PAGINA_QUE_VAI_APARECER";if(window.location.href==adress){jQuery(function(){jQuery("body").eq(0).append('<div id="msgmask" style="position: fixed; width: 100%; height: 100%; background: #222; opacity: .7; top: 0px; left: 0px; z-index: 100000"></div><div id="msgwelcome" style="background: url(\'https://i.servimg.com/u/f14/16/87/99/88/s-foru10.png\') no-repeat 440px 30px #FFF; padding: 10px; border-radius: 5px; box-shadow: 0 1px 40px #000; position: fixed; top: 100px; left: 30%; font-size: 14px; height: 290px; padding-right: 60px; z-index: 10000000"><span style="font-size: 24px; color: #BEE916"><b>Curta nossa página no Facebook!</b></span><br><br><center><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2NOME_DA_PÁGINA&amp;width=290&amp;height=290&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=true&amp;appId=453777874671284" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:290px;" allowTransparency="true"></iframe></center><br><br><a href="#" style="float: right" id="closeen" onclick="$(\'#msgmask\').fadeOut();jQuery(\'#msgwelcome\').fadeOut();">Fechar</a></div>')})}

No Azul Forumeiros, você vai determinar a página em que o código vai atuar. Se for na página principal, basta marcar o Investimento no índice, e no lugar do texto, colocar a URL completa da página principal.
Azul: Adicione o nome da sua página. Ou seja, o endereço da página no seu facebook. Como é ShiftActif, no lugar do texto colocaríamos o nome Shiftactif.
Laranja: ID do aplicativo que você teve no começo do tutorial. Somente os números é o que valem.
Violeta: Altura da caixa do Facebook

Feito essas edições, salve o JS e veja na página que determinou o efeito:

• Resultado esperado:
  
  

---

© ShiftActif

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:[Dúvida] Caixa de fãs do Facebook com lightbox