[TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog

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

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:

<div class="fb-comments" data-href="http://ajuda.forumeiros.com/" data-num-posts="10" data-width="470"></div>

E colocar dentro da tag JS:

jQuery(document).ready(function(){jQuery('#blog_comments').after('<center>CÓDIGO_HTML</center>')});

Ou seja:

Marque a opção "Nos tópicos" e cole este código:

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>')});

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