Como coloco pop-up de curtir página do facebook

[Bruninho._]

Qual é minha questão:
Queria que fosse igual a este:



Endereço do meu fórum:
http://www.csi-nwd.forumeiros.com

Versão do fórum:
PHPBB3

[Alcohol]

Leia
https://ajuda.forumeiros.com/t12181-tutorial-criar-e-personalizar-a-sua-pop-up

[Bruninho._]

Mas eu não quero esse estilo de pop-up não =/

[Alcohol]

Ola,
por esse motivo o tutorial diz criar e personalizar!

Essa é apenas o exemplo da imagem que aparecerá no fórum e para adicionar a pagina do facebook você terá de personalizar!

[Bruninho._]

Pois é não estou conseguindo personalizar para aquela forma da imagem que postei no tópico se alguém puder me ajudar ficaria muito grato.

[Roevs]

Olá,

Poderia me passar o link aonde viu este poup ?

Até

[Sennior]

Olá Bruninho._!

O mesmo não é possivel. O senhor deseja um sistema de Pop Up para quando entrassem o fórum o mesmo abria uma Pop - Up do facebook.

Isso não é possivel pois não damos suporte à códigos Java Scripts.

Até mais!

[Roevs]

Olá,

Mikéé isso e possível sim já tive um desse em meu fórum e só por o código na Mensagem da página inicial e depois por um código na folha de estilo CSS

Até

[Sennior]

Olá!

Temos mesmo amigão! Olá,

https://ajuda.forumeiros.com/t12181-

Depois, aceda à:

https://developers.facebook.com/docs/plugins/

Escolha o plugin desejado e aplique.

Atenciosamente.

[Bruninho._]

Da forma que vc me passou Mikéé funcionou, mas ficou feio pacas kkkkk

tem como me ajuda a ficar parecido com o desse fórum

http://www.thegtasc.net/

[Roevs]

Olá,

Primeiro vá em :

Painel de Controle Visualização Página Inicial Geral Mensagem na Página Inicial.

Adiciona o seguinte código

Código:

<div style="padding-bottom: 57px; padding-right: 28px; display: block; width: 322px; height: 371px; top: 113.5px; left: 328.5px;" id="colorbox" class=""><div id="cboxWrapper" style="height: 428px; width: 350px;"><div style=""><div id="cboxTopLeft" style="float: left;"></div><div id="cboxTopCenter" style="float: left; width: 322px;"></div><div id="cboxTopRight" style="float: left;"></div></div><div style="clear: left;"><div id="cboxMiddleLeft" style="float: left; height: 371px;"></div><div id="cboxContent" style="float: left; width: 322px; height: 371px;"><div id="cboxLoadedContent" style="width: 322px; overflow: auto; height: 366px;"><div id="subscribe" style="padding:10px; background:#fff;">
<center>
<a href="http://www.facebook.com/thegtasc" target="_blank"><img src="http://1.bp.blogspot.com/-Ckucdu-p--w/UG8l8hpxyhI/AAAAAAAAASU/H1g41jp1nZQ/s1600/curtir_fb.png"></a><br>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fthegtasc&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
</div></div><div id="cboxLoadingOverlay" style="height: 371px; display: none;" class=""></div><div id="cboxLoadingGraphic" style="height: 371px; display: none;" class=""></div><div id="cboxTitle" style="display: block;" class=""></div><div id="cboxCurrent" style="display: none;" class=""></div><div id="cboxNext" style="display: none;" class=""></div><div id="cboxPrevious" style="display: none;" class=""></div><div id="cboxSlideshow" style="display: none;" class=""></div><div id="cboxClose" style="" class="">close</div></div><div id="cboxMiddleRight" style="float: left; height: 371px;"></div></div><div style="clear: left;"><div id="cboxBottomLeft" style="float: left;"></div><div id="cboxBottomCenter" style="float: left; width: 322px;"></div><div id="cboxBottomRight" style="float: left;"></div></div></div><div style="position: absolute; width: 9999px; visibility: hidden; display: none;"></div></div>

Depois adiciona este código na sua Folha de estilo CSS

Código:

#colorbox {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}
#colorbox, #cboxOverlay, #cboxWrapper {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
overflow: hidden;
}
#cboxTopLeft {
width: 14px;
height: 14px;
background: url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat 0 0;
}
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif;
color: #666;
background: white;
}
#cboxLoadedContent {
margin-bottom: 5px;
}
.pluginButton {
background: #ECEEF5;
-webkit-border-radius: 3px;
border: 1px solid #CAD4E7;
cursor: pointer;
padding: 2px 6px 4px;
white-space: nowrap;
color: #3B5998;
}
.pluginButton:hover {
border-color: #9DACCE;
}
.plm {
padding-left: 10px;
}

Até

[Ngw_PedroC]

Funciono?? ....

[Bruninho._]

Ficou meio bugado mais funcionou.

Não ficou centralizado;
Não apareceu o botão X (Fechar);
e Não deu aquele filtro q o fundo fica escuro;

[Roevs]

Olá,

Poderia me informar se o poup ainda esta em seu fórum ?

Até

[Bruninho._]

não eu retirei mas posso coloca-lo novamente.


@Edit

Coloquei novamente no Forum, v como q ficou =/

[Roevs]

Olá,

Acho que eles retirou o poup do the gta então só tem como eu pegar o código para por o botão e arrumar o fundo se eles tivessem com o poup não sei se eles tirou estarei vendo se e meu navegador

Até

[seender]

Olá!

Adicione este código na sua home page:

Código:

<div style="padding-bottom: 57px; padding-right: 28px; display: block; width: 322px; height: 371px; top: 113.5px; left: 328.5px;" id="colorbox" class=""><div id="cboxWrapper" style="height: 428px; width: 350px;"><div style=""><div id="cboxTopLeft" style="float: left;"></div><div id="cboxTopCenter" style="float: left; width: 322px;"></div><div id="cboxTopRight" style="float: left;"></div></div><div style="clear: left;"><div id="cboxMiddleLeft" style="float: left; height: 371px;"></div><div id="cboxContent" style="float: left; width: 322px; height: 371px;"><div id="cboxLoadedContent" style="width: 322px; overflow: auto; height: 366px;"><div id="subscribe" style="padding:10px; background:#fff;">
<center>
<a href="http://www.facebook.com/thegtasc" target="_blank"><img src="http://1.bp.blogspot.com/-Ckucdu-p--w/UG8l8hpxyhI/AAAAAAAAASU/H1g41jp1nZQ/s1600/curtir_fb.png"></a><br>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fthegtasc&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
</div></div><div id="cboxLoadingOverlay" style="height: 371px; display: none;" class=""></div><div id="cboxLoadingGraphic" style="height: 371px; display: none;" class=""></div><div id="cboxTitle" style="display: block;" class=""></div><div id="cboxCurrent" style="display: none;" class=""></div><div id="cboxNext" style="display: none;" class=""></div><div id="cboxPrevious" style="display: none;" class=""></div><div id="cboxSlideshow" style="display: none;" class=""></div><div id="cboxClose" style="" class="">close</div></div><div id="cboxMiddleRight" style="float: left; height: 371px;"></div></div><div style="clear: left;"><div id="cboxBottomLeft" style="float: left;"></div><div id="cboxBottomCenter" style="float: left; width: 322px;"></div><div id="cboxBottomRight" style="float: left;"></div></div></div><div style="position: absolute; width: 9999px; visibility: hidden; display: none;"></div></div>

Adicione em:
Painel...-> Visualização -> Página inicial -> Geral / Mensagem na home page
E também este css:

Código:

#colorbox {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}
#colorbox, #cboxOverlay, #cboxWrapper {
position: absolute;
top: 0;
left: 0;
z-index: 999;
overflow: hidden;
}
#cboxLoadedContent{
  width:350px !important;
  margin-left:0px;
  height:700px !important;
  margin-top:10px !important;
}
#colorbox{margin-left:120px;background-color:#fff;}
#cboxTopLeft {
width: 14px;
height: 14px;
background: url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat 0 0;
}
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif;
color: #666;
background: white;
}
#cboxLoadedContent {
margin-bottom: 5px;
}
.pluginButton {
background: #ECEEF5;
-webkit-border-radius: 3px;
border: 1px solid #CAD4E7;
cursor: pointer;
padding: 2px 6px 4px;
white-space: nowrap;
color: #3B5998;
}
.pluginButton:hover {
border-color: #9DACCE;
}
.plm {
padding-left: 10px;
}

Adicione em:
Painel...-> Visualização -> Imagens e cores -> Cores / Folha estilo CSS

Melhores cumprimentos,
seender

[Bruninho._]

Não ficou legal =/

[seender]

Olá!

O que não ficou legal? funciona perfeitamente, veja: http://brazucas.forumado.net/

Até mais!

[NWD_Gui]

Use este código:

Código:

<!-- This Is A CopyRight Code.It Is Free To Use But With HTML Design Code.
If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
<style type="text/css">
 
/***********************************************
* CSS POP-UP With Light Box Effect- © EXEIdeas (www.exeideas.com)
* This notice must stay intact for use.
* Visit http://www.exeideas.com/ for full source code.
***********************************************/
* html #exestylepopupdiv {position:absolute;}
#exestylepopupdiv {display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-image:url('https://lh3.googleusercontent.com/-rUv4L_9nz-8/T9sfSSJaZNI/AAAAAAAACf0/ETEgFKt-rR4/s128/exeideasopacity0.5.png');margin:0; overflow-y:auto;z-index:999999;}
#exestylepopup {background-color: #fff; overflow:none;z-index:999999;}
.exestylepopup {width:400px; height:420px; position:fixed; top:45%; left:50%; margin-top:-210px; margin-left:-200px; border: 10px solid #999; padding: 20px;z-index:999999;}
.exe-title {background:#000;color: #fff;font-size: 20px !important;font-weight:bold;margin:5px 0;border:20px solid #ddd;padding:10px;line-height:25px; font-family:arial !important;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<div id="exestylepopupdiv">
<div id="exestylepopup" class="exestylepopup">
<center><h3 class="exe-title">Receive All Updates Via Facebook. Just Click the Like Button Below...</h3></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=[b][color=red]LINK DA SUA PÁGINA[/color][/b]&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
<br />
<center style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" "> N/A</a></center>
<center style=" float:left; margin-left:35px; font-size:9px;cursor:pointer;" ><a style=" font-size:9px; color:#3B78CD; text-decoration:none;" onmouseup="document.getElementById('exestylepopupdiv').style.display='none'">Skip To Continue</a></center>
</div>
</div>
<!-- This Is A CopyRight Code.It Is Free To Use But With HTML Design Code.
If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->

[Bruninho._]

Aee Gui o teu funcionou bacana!!! vlw ae =D