[TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1 • Compartilhe
[TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog
Facebook Connect |
Adicionar efeitos com pluings do Facebook ficou fácil. Com este tutorial vamos reproduzir um efeito magnifico, ao qual você pode personalizar ainda mais a função fórum tipo blog.
--> Tutoriais <--
Caixa de comentários do Facebook no fórum tipo blog
Caixa de comentários do Facebook no fórum tipo blog
1º - Função do Facebook:
Não vamos usar a função do Facebook para isso, mas é importânte que você conheça os detalhes dela.
Painel de controle :seta: Módulos :seta: Facebook Connect :seta: Configuração :seta:
Chave de aplicação - A chave de aplicação consiste em números ou letras que identificara o vínculo do facebook connect com seu fórum. |
Código secreto - Os códigos secretos são vários caracteres contendo números e letras com objetivo de manter a segurança da conexão do Facebook Connect com seu fórum. Essa função necessita de sua atenção, e se você tiver templates personalizados, por favor, confira as informações do seguinte tutorial: http://ajuda.forumeiros.com/t56717- . |
Ativar módulo "Facebook Connect" - Ao marcar a opção em Sim, você está permitindo que a função do Facebook funcione em seu fórum. |
Ativar a conexão automática através do Facebook - Permite aos membros estarem conectados de maneira automática no fórum se também estão no Facebook. Segundo uma pesquisa, 80% dos usuários se mantém conectados." |
Ativar a mensagem para convidar os amigos - Quando estiver em sim, todos os seus amigos do Facebook recebem um convite enviado por você pelo seu Painel de Controle, para participar das discussões de seu fórum. |
2º - Gerir código pelo site dos desenvolvedores:
Para obter o código esperado no resultado, temos que acessar o site dos desenvolvedores do Facebook. Por isso, clique neste link: https://developers.facebook.com/docs/plugins/ Lembre-se, esteja logado para acessar a página.
Clique no link "Comments" e logo após, vamos preencher os campos com os dados do seu fórum. Vejamos abaixo a descrição de cada item.
URL to comment on - Endereço do seu fórum para onde a caixa de comentários será exibida. |
Number of posts - Número de mensagens a serem exibidas. |
Width - Largura da caixa. De preferência, marque 700, logo depois de gerir o código, poderemos editá-lo. |
Color Scheme - Cor da caixa no seu fórum. Por padrão é branco, mas poderá mudar para outras cores. |
Pré-visualização - Visualização de como será exibido em seu fórum, a caixa de comentários. |
Clique no botão "Get code", e logo após uma grande caixa aparece com os códigos. Copie o Javascript e o HTML para aplicar-mos no fórum. Exemplo:
- Código:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://ajuda.forumeiros.com/" data-num-posts="10" data-width="470"></div>
3º - Páginas Javascript:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.
Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>
Título Correspondente ao nome da página JavaScript/jQuery que será criada. |
Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. Pode ser na galeria, nos fóruns ou sub-fóruns. Vamos ver algumas opções: No índice : O código será aplicado ao índice do fórum. No portal : O código será aplicado ao Portal do fórum. Nos sub-fóruns (Fóruns) : O código será aplicado nos Fóruns e Sub-fóruns. Sobre os temas : O código será aplicado aos tópicos do fórum. Na galeria : O código será aplicado na sua Galeria de imagens. Em todas as páginas : O código será aplicado em todas as páginas do fórum. |
Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery. |
Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum. |
Você vai usar o seu código HTML no JS:
E colocar dentro da tag JS:<div class="fb-comments" data-href="http://ajuda.forumeiros.com/" data-num-posts="10" data-width="470"></div>
Ou seja:jQuery(document).ready(function(){jQuery('#blog_comments').after('<center>CÓDIGO_HTML</center>')});
Marque a opção "Nos tópicos" e cole este código:
Azul Forumeiros: Classe CSS onde o efeito vai funcionar. Você pode mudar para outras tags CSS, mas como o tutorial ensina somente para fórum tipo Blog, então você terá que estudar o CSS da sua versão.jQuery(document).ready(function(){jQuery('#blog_comments').after('<center><div class="fb-comments" data-href="ENDEREÇO_DO_FORUM'+location.pathname+'" data-num-posts="10" data-width="700"></div></center>')});
Vermelho: Endereço do seu fórum que deve conter o HTTP. Exemplo: http://ajuda.forumeiros.com/.
Verde: Número de comentários do Facebook a serem exibidos.
Violeta: Largura da caixa.
Clique em Confirmar.
4º - Adicionar código HTML:
Tudo pronto, mas falta a parte que faz com que o efeito seja possível. Então, temos que adicionar o resto do código em um widget. Painel de controle > Mòdulos > Portal e Widgets > Gestão dos widgets do fórum > Selecione um widget >. Adicione este código:
- Código:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
- Resultado:
© ShiftActif
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Caixa de comentários do Facebook no fórum tipo blog |
Re: [TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog
Vídeo tutorial |
https://www.youtube.com/watch?v=K77lUkSQPMM&feature=plcp
Tópicos semelhantes
» Caixa de comentários do Facebook no fórum tipo blog
» Caixa de comentários do Facebook no fórum
» [TUTORIAL] Caixa de fãs do Facebook com lightbox
» Ativar comentarios via facebook
» Alterar cor da fonte de comentários do Facebook
» Caixa de comentários do Facebook no fórum
» [TUTORIAL] Caixa de fãs do Facebook com lightbox
» Ativar comentarios via facebook
» Alterar cor da fonte de comentários do Facebook
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|