ShiftActif fórum

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

Participe da melhor comunidade sobre fóruns!

Bem vindo [TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog 405374159 ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!! [TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog 1660898911

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

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

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

Mensagem por Shek em Seg 23 Jul - 9:46


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

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




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

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

[TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog 110111Arrow 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.
[TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog 110210Arrow 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- .
[TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog 110310Arrow 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.
[TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog 110410Arrow 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."
[TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog 110510Arrow 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.
[TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog 2_110


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

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

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.

[TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog Face11
[TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog 110111Arrow URL to comment on - Endereço do seu fórum para onde a caixa de comentários será exibida.
[TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog 110210Arrow Number of posts - Número de mensagens a serem exibidas.
[TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog 110310Arrow Width - Largura da caixa. De preferência, marque 700, logo depois de gerir o código, poderemos editá-lo.
[TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog 110410Arrow Color Scheme - Cor da caixa no seu fórum. Por padrão é branco, mas poderá mudar para outras cores.
[TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog 110510Arrow 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>


- 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 >>
[TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog Painel13
[TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog 110111Arrow Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog 110210Arrow 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.
[TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog 110310Arrow Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
[TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog 110410Arrow 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.


- 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 [TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog 3651928052 >. 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:
    [TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog Result46





© ShiftActif


[TUTORIAL] Caixa de comentários do Facebook no fórum tipo blog Act_bottom 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
Shek

Shek
Administrador

Masculino
Idade : 25
PointActif's : 5670
ReputActifs : 97
Mensagens : 2715
Inscrição : 13/04/2011

Localização : Vilhena - RO
100%

http://www.shiftactif.com/

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

Mensagem por Shek em Seg 5 Nov - 13:12

Shek

Shek
Administrador

Masculino
Idade : 25
PointActif's : 5670
ReputActifs : 97
Mensagens : 2715
Inscrição : 13/04/2011

Localização : Vilhena - RO
100%

http://www.shiftactif.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum