Gadget de facebook

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Gadget de facebook

Mensagem por Psicop em 23/04/13, 10:19 pm

Qual é minha questão:

Olá alguém tem aquele gadget de facebook que aparece uma janelinha
com todas as pessoas que curtiram a página do facebook?

Eu ví um gadget que ficava a palavra Facebook na lateral
e quando passava o mouse na palavra aparecia a janelinha.

Se não tiverem nesse estilo pode ser outro diferente.

Obrigado.

Endereço do meu fórum:
http://dindin.forumais.com

Versão do fórum:
PHPBB3
avatar

Psicop
Nível 5

Masculino
Inscrito dia : 08/04/2013
Mensagens : 41
Pontos Ativos : 75

Ver perfil do usuário http://projetoa.forumeiros.com/

Resolvido Re: Gadget de facebook

Mensagem por Gmtp em 23/04/13, 10:43 pm

Olá,

Painel de controle > Visualização > Imagens e Cores > Cores > Folha de estilo CSS > e adicione o seguinte código CSS;

Código:
.box-curtir-flutuante{
background: url("http://3.bp.blogspot.com/-XmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/s1600/floatingfb.png") no-repeat scroll left center transparent !important;
display: block;float:
right;height: 270px;
padding: 0 5px 0 40px;
width: 245px;
z-index: 99999;
position:fixed;
right:-250px;
top:20%;
}
.box-curtir-flutuante div{border:none;position:relative;display:block;}
.box-curtir-flutuante span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.box-curtir-flutuante span a{color: #808080;text-decoration:none;}
.box-curtir-flutuante span a:hover{text-decoration:underline;}

As imagens podem ser substituídas quando você desejar.

Adição dos códigos Javascript:
Nosso JS padrão continha o símbolo chamado de "Octuturpi" ($), que quando adicionado em um widget, se perde devido suas configurações. Neste caso, tivemos que modificar esse JS para que a função funcione normalmente em seu fórum. Primeiro de tudo, vamos adicionar um script bem conhecido na rede de códigos, o AJAX do GOOGLE.

Código:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Por padrão, temos que adicioná-lo por dentro das tags <head></head> do fórum, mas como fazer isso se não podemos editar os templates PhpBB3 e Invision? Vamos acessar o Painel de controle em Geral > Promoção do fórum > Motores de busca > Bazilas adicionais > clique no botão + e no tipo de adição, escolha "Linkar um Javascript" e adicione somente o endereço do link do JS:

Código:
https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

Automaticamente já teremos a tag Script adicionada entre essas tags HTML <head> e </head>.

Feito isso, vamos acessar Painel de controle > Portal e Widgets > Gestão dos widgets do fórum > e dentro do mesmo widget com o código HTML que vamos criar, adicione este código Script:

Código:
<script type="text/javascript">
//<!-- ShiftActif - Dando mais vida a sua comunidade | Se tiver dúvidas, acesse o tutorial em www.shift.forumactif.com/
jQuery(document).ready(function() {jQuery(".box-curtir-flutuante").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
Ou se preferir, poderá adicionar em uma página JS:
Código:
//<!-- ShiftActif - Dando mais vida a sua comunidade | Se tiver dúvidas, acesse o tutorial em www.shift.forumactif.com/
jQuery(document).ready(function() {jQuery(".box-curtir-flutuante").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
Feito isso, salve e veja o resultado em seu fórum.

Elementos HTML e suas configurações:
Temos então o código HTML e o JS. Porém, vamos adicioná-los em locais totalmente diferentes. Como assim? O código Javascript pode ser adicionado nas páginas JS, e o código HTML em um widget ou até mesmo no próprio JS.

Código:
<div class="box-curtir-flutuante"><div><iframe src="//www.facebook.com/plugins/likebox.php?href=ENDEREÇO_DA_SUA_PAGINA_NO_FB&width=251&height=270&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe></div></div>

No lugar de "ENDEREÇO_DA_SUA_PAGINA_NO_FB" adicione o endereço da sua página no facebook. Por exemplo: https://www.facebook.com/ShiftActif Agora, você só precisa salvar!

Box expansível do Facebook com efeito jQuery

Até mais
avatar

Gmtp
Membro do Fórum

Masculino
Inscrito dia : 03/01/2013
Mensagens : 1034
Pontos Ativos : 1451

Ver perfil do usuário http://makerforum.forumeiros.com/ https://www.facebook.com/gyovany.francini

Resolvido Re: Gadget de facebook

Mensagem por Sennior em 23/04/13, 11:27 pm

Saudações!

Veja amigo:

Seta http://ajuda.forumeiros.com/t61140-

Até mais! Café
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Gadget de facebook

Mensagem por Psicop em 24/04/13, 02:16 am


Oii Gmtp obrigado pelo tutorial,
segui as orientações, e chegou a aparecer
a caixa flutuante do lado direito do fórum, porém
quando passo o mouse sobre a caixa ela abre mas ela está
toda branca.

Obrigado tbm Mikée.

Se alguém encontrar uma solução para o código que o Gmtp
me passou, chega a aparecer a caixa flutuante do lado do
fórum, porém ela não tem nada, está branca.

Obrigado
avatar

Psicop
Nível 5

Masculino
Inscrito dia : 08/04/2013
Mensagens : 41
Pontos Ativos : 75

Ver perfil do usuário http://projetoa.forumeiros.com/

Resolvido Re: Gadget de facebook

Mensagem por Psicop em 26/04/13, 12:59 am

UP!

esse que vc postou mikéé é um gadget q vem no fórum mas
o que eu desejo é um específico pra facebook, aquele que aparece
o pessoal que curtiu a página sabe? Geralmente é um quadrado que aparece os quadradinhos de perfis que curtiram a página do face.

Pode ser pra versão Punbb eu modifico a versão do meu fórum se
for necessário.

o/

avatar

Psicop
Nível 5

Masculino
Inscrito dia : 08/04/2013
Mensagens : 41
Pontos Ativos : 75

Ver perfil do usuário http://projetoa.forumeiros.com/

Resolvido Re: Gadget de facebook

Mensagem por Psicop em 27/04/13, 01:00 pm

UP!
avatar

Psicop
Nível 5

Masculino
Inscrito dia : 08/04/2013
Mensagens : 41
Pontos Ativos : 75

Ver perfil do usuário http://projetoa.forumeiros.com/

Resolvido Re: Gadget de facebook

Mensagem por Psicop em 28/04/13, 07:38 pm

UP!!
avatar

Psicop
Nível 5

Masculino
Inscrito dia : 08/04/2013
Mensagens : 41
Pontos Ativos : 75

Ver perfil do usuário http://projetoa.forumeiros.com/

Resolvido Re: Gadget de facebook

Mensagem por seender em 30/04/13, 10:53 pm

Olá!

Em qual site viu esta "janelinha"?

Até mais!
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum