[TUTORIAL] Caixa de fãs do Facebook com lightbox
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1 • Compartilhe
[TUTORIAL] Caixa de fãs do Facebook com lightbox
Redes sociais |
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
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
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.// 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&width=290&height=290&show_faces=true&colorscheme=light&stream=false&show_border=true&header=true&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>')})}
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 |
Tópicos semelhantes
» [TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog
» [TUTORIAL] Efeito vídeo em lightbox em vídeos
» [TUTORIAL] Efeito lightbox para fóruns Forumeiros
» [TUTORIAL] Chatbox como o do Facebook
» [TUTORIAL] Box expansível do Facebook com efeito jQuery
» [TUTORIAL] Efeito vídeo em lightbox em vídeos
» [TUTORIAL] Efeito lightbox para fóruns Forumeiros
» [TUTORIAL] Chatbox como o do Facebook
» [TUTORIAL] Box expansível do Facebook com efeito jQuery
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|