ShiftActif fórum


Participe da melhor comunidade sobre fóruns!

Bem vindo 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!!!
Conectar-se

Esqueci minha senha

Os membros mais ativos do mês
Shek
 

Quem está conectado
17 usuários online :: Nenhum usuário registrado, Nenhum Invisível e 17 Visitantes :: 1 Motor de busca

Nenhum

[ Ver toda a lista ]


O recorde de usuários online foi de 671 em Sex 20 Abr - 13:08

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

Ir em baixo

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

Mensagem por Shek em Seg 23 Jul - 9:46



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:


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


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

Arrow URL to comment on - Endereço do seu fórum para onde a caixa de comentários será exibida.
Arrow Number of posts - Número de mensagens a serem exibidas.
Arrow Width - Largura da caixa. De preferência, marque 700, logo depois de gerir o código, poderemos editá-lo.
Arrow Color Scheme - Cor da caixa no seu fórum. Por padrão é branco, mas poderá mudar para outras cores.
Arrow 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 >>
Arrow Título Correspondente ao nome da página JavaScript/jQuery que será criada.
Arrow 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.
Arrow Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
Arrow 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 >. 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
avatar
Shek
Administrador

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

Localização : Vilhena - RO
100%

Ver perfil do usuário http://www.shiftactif.com/

Voltar ao Topo Ir em baixo

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

Mensagem por Shek em Seg 5 Nov - 13:12

avatar
Shek
Administrador

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

Localização : Vilhena - RO
100%

Ver perfil do usuário http://www.shiftactif.com/

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

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