Publicado em por Paulo Künzel

Gerenciando os plug-ins do Facebook em arquivos JS

[download id=”383″]

Introdução

Nesse artigo rápido, veremos como é possível centralizar o controle das tags do Facebook em um único arquivo JavaScript. O objetivo é facilitar o gerenciamento dos componentes que eles oferecem e remover todas as tags <script> com código embutido.

Para entender este artigo você precisará ter conhecimentos básicos de HTML, JS e da API de plug-ins sociais do Facebook. Apesar dos plug-ins serem um pouco mais complexos do que os iniciantes estão acostumados, a documentação é bem direta e boa parte do código é gerado automaticamente.

Passo 1

A primeira coisa que você precisa fazer é criar um arquivo JS onde colocaremos o código. Você pode nomeá-lo como quiser, mas para esse artigo o chamaremos de “codigoFB.js”. Dentro dele adicione o evento conforme abaixo e já explicaremos o que ele significa.

window.onload = function () {
    (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/sdk.js#xfbml=1&version=v2.10&appId=9999999";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}

O que fizemos aqui foi o seguinte, estamos dizendo que ao carregar a tela deve ser executada uma função. Por enquanto a única coisa que colocamos dentro desta função é outra função que é a fornecida pelo Facebook (ver códigos da API no link deles) para ser possível utilizar os plug-ins deles.

Importante: Se você simplesmente copiar e colar, não dará certo pois o appID não é valido, será necessário ter o seu appID e/ou copiar o mesmo código fornecido em paginas como https://developers.facebook.com/docs/plugins/like-button.

Passo 2

A segunda coisa que faremos serão os objetos de configuração. Neste artigo, para fins de simplificação, iremos configurar apenas dois plug-ins, o de curtir e o de comentários.

No botão de comentários padrão fornecido no site, você pode ver que ele tem uma classe e 2 atributos.

<div class="fb-comments" 
    data-href="http://www.linkpaginaseusite.com.br" 
    data-numposts="5"></div>

Vamos tranforma-los em um objeto com o seguinte formato

let configFbComments = {
    classes: ["fb-comments"],
    atributos: [{
        nome: "data-href",
        valor: window.location.href
    },
    {
        nome: "data-numposts",
        valor: 5
    }]
};

Como você pode ver, o objeto é composto por duas propriedades, classes e atributos, e elas contem respectivamente um vetor de strings e um vetor de objetos. Note que como o comentário precisa utiliza o link da sua página como referência, para podermos reutilizar o objeto foi colocado o window.location.href que mudará em cada página.

Para o botão de curtir (e compartilhar), faremos um exemplo um pouco mais complexo.

let configFbLike = {
    classes: ["fb-like","FloRight"],
    atributos: [{
        nome: "data-href",
        valor: window.location.href
    },
    {
        nome: "data-layout",
        valor: "button_count"
    },
    {
        nome: "data-action",
        valor: "like"
    },
    {
        nome: "data-size",
        valor: "small"
    },
    {
        nome: "data-show-faces",
        valor: "true"
    },
    {
        nome: "data-share",
        valor: "true"
    }]
};

Aqui temos duas classes, sendo que “fb-like” é obrigatória, e diversos atributos, mas a lógica ainda é a mesma, um objeto com duas propriedades que são vetores. Agora precisamos de uma forma inteligente de processar nossos a plug-ins sem precisarmos nos importar com quais ou quantos dados são fornecidos, o que importa é apenas o formato. Segue abaixo o código para processarmos eles:

function configurarPlugin(elementoHTML, config) {
    elementoHTML.classList.add(config.classes);

    config.atributos.forEach(attr => {
        elementoHTML.setAttribute(attr.nome, attr.valor);
    });
}

O que estamos fazendo aqui? Estamos passando um elemento HTML e o objeto de configuração. Utilizando os métodos do classList, adicionamos todas as classes e após, percorremos o vetor de atributos e os adicionamos um a um ao elemento.

Após isso, basta fazermos a chamada das configurações após termos carregado a função do Facebook que adicionamos la no começo da página. No meu caso, eu fiz uma função (pluginsFacebook) que as adiciona e passa 2 divs que tenho na página, mas seria possível chama-las direto também.

window.onload = function () {
    (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/sdk.js#xfbml=1&version=v2.10&appId=999999";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    pluginsFacebook();
}

function pluginsFacebook() {
    configurarPlugin(document.getElementById("btnCurtirFb"), configFbLike);
    configurarPlugin(document.getElementById("frameComentariosFb"), configFbComments);
}

Conclusão

Como podemos ver, é possível separar a lógica de programação fornecida pelos plug-ins sociais do Face sem afetar negativamente a experiência do usuário. Pessoalmente eu prefiro este formato pois permite que a pessoa acessando veja o conteúdo da página antes do processamento deles iniciar, o que causa a impressão de conteúdo carregado mais rápido. Existem outros jeitos de fazermos o código acima, mas acredito que está tenha sido uma das formas mais rápidas e simples de implementar a funcionalidade proposta.

Deixe um comentário