Diversos

Como integrar os comentários do Facebook no WordPress

Google+ Pinterest LinkedIn Tumblr
Anúncios Google

A vantagem em ter visitantes comentando pelo Facebook em seu blog é óbvia: cada opinião postada vira uma nova via de divulgação do artigo, já que será exibido na timeline daquele comentarista. A desvantagem (se considerarmos como desvantagem) é que o comentário não fica no banco de dados de seu blog, e sim no Facebook.

Há muitos tutoriais ensinando a integrar os comentários do Facebook no WordPress; eu mesmo testei alguns que acabaram não me satisfazendo totalmente por deficiências diversas. Existem plugins que funcionam bem, mas não oferecem tudo o que eu queria.

Como a ideia é sempre reduzir ao máximo o uso de plugins, continuei buscando um método que funcionasse 100%, até que depois de várias tentativas, descobri esse do WPTuts. Com ele, conseguimos inserir os comentários do Facebook no blog sem remover o sistema nativo do WordPress, além de criar um contador que exibe o total de comentários feitos pelas duas vias, e por fim criar um meio de moderar os comentários através de sua conta no Facebook.

Acompanhe e veja que não é tão difícil, mesmo pra quem tem pouca experiência em mexer nos templates WordPress.

Criar App

Comece criando um aplicativo no Facebook, responsável por exibir a caixa de comentários e conectá-la corretamente às páginas do blog. Basta seguir à página de criação de apps (você deve se logar em sua conta no Facebook). Quando solicitado, permita o acesso à sua conta. Não se preocupe pois não vai postar nada lá no seu perfil, é só pra manter o aplicativo sob sua autoria e controle.

Clique em Criar novo aplicativo.

Novo aplicativo do Facebook

Digite então um nome para ao aplicativo (qualquer coisa, como “Comentários no meu blog”, marque a caixa concordando com os termos de uso e siga em frente.

Novo aplicativo do Facebook

Na configuração do aplicativo, digite as informações: e-mail de contato em Contact Email, e em App Domain, entre com o URL do blog em que os comentários vão aparecer, sem o www, como na imagem abaixo (com o seu url).

Digite os dados no aplicativo

Mais abaixo, clique na guia Website e digite o URL completo do blog em que os comentários aparecerão, como visto abaixo (com o seu URL).

Insira o endereço do site que receberá a caixa de comentários

Clique em Salvar e pronto. O aplicativo está pronto para funcionar.

Aplicativo pronto para uso

Codificando a caixa de comentários

Agora, pra não apelar a plugins que tornam o blog mais lento, vamos botar a caixa pra funcionar via código. Deixe a preguiça e o medo de lado e comece a fazer essas pequenas alterações “na unha”, pois seu conhecimento aumenta com a prática.

NOTA: antes de fazer alterações no tema é recomendável criar uma cópia de segurança dele todo; caso algo saia errado e não consiga recuperar, você tem o backup. O ideal é fazer essas alterações em temas-filho (child themes).

Abra o arquivo header.php do seu tema, procure pela tag <body> (use a função de busca do editor de texto, normalmente acessada através de Ctrl + F), e logo depois dela, cole esse 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&appId=SEU APP ID AQUI";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Em SEU APP ID AQUI, coloque o ID do aplicativo que você criou.

Onde está? Lá na página do aplicativo. Veja:

APP ID do aplicativo

Então, supondo que o ID seja algo como 1234567890, o código ficaria assim:

<div id="fb-root"></div>
<script type="text/javascript">
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&appId=1234567890";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// ]]>
</script>

Bem simples. Agora, no mesmo header.php, procure pela tag <head>, e logo depois dela cole o seguinte código:

<meta property="fb:app_id" content="SEU APP ID AQUI"/>

Nem preciso explicar o SEU APP ID AQUI, não? Salve o arquivo e mande pro servidor (se estiver editando localmente).

Abra o arquivo comments.php, e logo no início dele cole esse código:

<div class="fb-comments" data-href="<?php the_permalink() ?>" data-num-posts="5" data-width="450" data-colorscheme="light" data-mobile="false"></div>

Com isso será mostrada a caixa de comentários padrão. Até 5 comentários serão exibidos sem precisar clicar no botão para mostrar mais, e ela terá 450 pixels de largura.

Você pode editar o código: para uma caixa mais larga ou estreita, mude o valor do data-width; para obter uma caixa escura, mude o data-colorscheme para dark. O data-href é um trecho de PHP que vai pegar o URL da página e usar como base, para que o Facebook consiga identificar qual caixa de comentários exibir quando uma página de seu blog for aberta. Se você usar seu URL básico (www.seublog.com.br) em vez do <?php the_permalink() ?>, os comentários feitos em um artigo aparecerão em todas as caixas de comentário (em todo o site serão os mesmos comentários).

Salve o arquivo e mande-o para o servidor. Teste seu blog. A caixa de comentários já deve estar funcionando.

Combinar contagem de comentários do WordPress e Facebook

Muitos temas (ou quase todos) exibem a contagem de comentários do artigo. Para que os comentários do Facebook sejam incluídos na contagem: abra o arquivo functions.php do seu tema. Se não existir esse arquivo crie um na raíz do tema. Coloque o seguinte código nele:

<?php
function full_comment_count() {
global $post;
$url = get_permalink($post->ID);  

$filecontent = file_get_contents('https://graph.facebook.com/?ids=' . $url);
$json = json_decode($filecontent);
$count = $json->$url->comments;
$wpCount = get_comments_number();
$realCount = $count + $wpCount;
if ($realCount == 0 || !isset($realCount)) {
    $realCount = 0;
}
return $realCount;
}
?>

Com isso feito, basta alterar o código responsável por mostrar a contagem de posts no tema. Ele pode aparecer em alguns arquivos normalmente no single.php e index.php, mas dependendo da estrutura do tema, vai estar em outros lugares como templates personalizados, arquivos de funções específicas, etc.

Um formato comum do código de contagem é:

<?php comments_popup_link('0','1','%'); ?>

Ele deve ser substituído por:

<?php echo full_comment_count(); ?>

Formatos mais complexos, com uma sentença em vez de números:

<?php
    $commentCount = full_comment_count();
    if ( $commentCount == 0 ) {
        echo '<h3>Seja o primeiro a comentar</h3>';
    }
    else if ( $commentCount == 1 ) {
        echo '<h3>Um comentário</h3>';
    }
    else {
        echo '<h3>' . $commentCount . ' comentários</h3>';
    }
?>

Como moderar os comentários do Facebook

A mais simples de todas: basta acessar a ferramenta de moderação do Facebook, e com seu aplicativo selecionado, clicar em Configurações.

Ferramenta de moderação de comentários

Na caixa Moderadores, insira o nome de usuário do Facebook que terá essa função. Em Modo de Moderação, “Make every post public” permite que os comentários apareçam assim que forem feitos. Se ficar em “Let me approve each comment before it appears“, todos os comentários deverão passar por moderação antes de publicados.

Editar configurações de comentários na moderação do Facebook

Agora, sempre que alguém fizer um comentário, você receberá uma notificação padrão do Facebook.

Notificações do Facebook

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

Pin