ArtigosGadget 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
Página 1 de 1
Gadget de facebook
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
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- *
- Membro desde : 08/04/2013
Mensagens : 41
Pontos : 75 -
Re: Gadget de facebook
por Gmtp 24.04.13 2:43
Olá,
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.
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:
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:
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.
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
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>
- 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);});
//-->
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- Super Membro
- Membro desde : 03/01/2013
Mensagens : 1044
Pontos : 1469 -
Sennior- Principal Contribuidor
- Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903 -
Re: Gadget de facebook
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- *
- Membro desde : 08/04/2013
Mensagens : 41
Pontos : 75 -
Re: Gadget de facebook
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/
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- *
- Membro desde : 08/04/2013
Mensagens : 41
Pontos : 75 -
Psicop- *
- Membro desde : 08/04/2013
Mensagens : 41
Pontos : 75 -
Psicop- *
- Membro desde : 08/04/2013
Mensagens : 41
Pontos : 75 -
seender- Membro Entusiasta
- Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455 -
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos