Gadget de facebook Hitskin_logo Hitskin.com

Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema

Fórum dos Fóruns

Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Gadget de facebook

4 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode

Ir para baixo

Tópico resolvido Gadget de facebook

Mensagem por Psicop 24.04.13 2:19

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
Psicop
Psicop
*

Membro desde : 08/04/2013
Mensagens : 41
Pontos : 75

http://projetoa.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Gadget de facebook

Mensagem por Gmtp 24.04.13 2:43

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
Gmtp
Gmtp
Super Membro

Membro desde : 03/01/2013
Mensagens : 1044
Pontos : 1469

http://makerforum.forumeiros.com/ https://www.facebook.com/gyovany.francini

Ir para o topo Ir para baixo

Tópico resolvido Re: Gadget de facebook

Mensagem por Sennior 24.04.13 3:27

Saudações!

Veja amigo:

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

Até mais! Café
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Gadget de facebook

Mensagem por Psicop 24.04.13 6:16


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
Psicop
Psicop
*

Membro desde : 08/04/2013
Mensagens : 41
Pontos : 75

http://projetoa.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Gadget de facebook

Mensagem por Psicop 26.04.13 4:59

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/

Psicop
Psicop
*

Membro desde : 08/04/2013
Mensagens : 41
Pontos : 75

http://projetoa.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Gadget de facebook

Mensagem por Psicop 27.04.13 17:00

UP!
Psicop
Psicop
*

Membro desde : 08/04/2013
Mensagens : 41
Pontos : 75

http://projetoa.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Gadget de facebook

Mensagem por Psicop 28.04.13 23:38

UP!!
Psicop
Psicop
*

Membro desde : 08/04/2013
Mensagens : 41
Pontos : 75

http://projetoa.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Gadget de facebook

Mensagem por seender 01.05.13 2:53

Olá!

Em qual site viu esta "janelinha"?

Até mais!
seender
seender
Membro Entusiasta

Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455

http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode

 
Permissões neste sub-fórum
Não podes responder a tópicos