ShiftActif fórum


Participe da melhor comunidade sobre fóruns!

Bem vindo ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!!
Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
Adminactif
Adminactif
Masculino
Idade : 23
PointActif's : 4810
ReputActifs : 97
Mensagens : 2707
Inscrição : 13/04/2011

Localização : Vilhena - RO
100%
Ver perfil do usuáriohttp://www.shiftactif.com/

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

em Ter 18 Jun - 17:29


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: http://www.shiftactif.org/t449-tutorial-caixa-de-comentarios-do-facebook-no-forum-tipo-blog Beleza!



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




- 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. Piscada


- 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(\'http://i14.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
Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum