[TUTORIAL] Box expansível do Facebook com efeito jQuery

Item: [TUTORIAL] Box expansível do Facebook com efeito jQuery
Rating: 1

por **Sphartcus** Ter 27 Nov - 14:32

Box expansível do Facebook com efeito jQuery

O facebook é uma das redes sociais mais acessadas do planeta com mais de 1 bilhão de pessoas, quase a quantidade da população da China (1,3 bilhão e meio de pessoas). Por isso, a chance de aumentar as chances de ter seu fórum em primeiro lugar dos mais acessados, é usando uma caixa expansível do FB no fórum.

--> Tutoriais <--
Box expansível do Facebook com efeito jQuery

1º - Conceito básicos e direitos autoriais:
O código que vamos usar não foi desenvolvido por ShiftActif ou seus desenvolvedores. Este código está disponível em vários e vários sites da internet, principalmente em nosso blog ShiftActif. Decidimos trazê-lo como dica para ajudar na publicação do seu fórum, principalmente para usuários que tem uma "FÃPAGE" ou uma página no facebook.

2º - Código CSS:
Antes de tudo, temos que ter em mente que o CSS é indispensável neste momento por dois motivos.

Ele personaliza sua função HTML;
Ele muda a posição do objeto HTML para outras localidades da página.

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

.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. Beleza!

3º - 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.

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

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"> // </script>

Ou se preferir, poderá adicionar em uma página JS:

Código:: //

Feito isso, salve e veja o resultado em seu fórum.

4º - 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!

Resultado previsto:

facebook - [TUTORIAL] Box expansível do Facebook com efeito jQuery Act_bottom

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Box expansível do Facebook com efeito jQuery