Instalar SDK e Open Graph do Facebook na Página Web WordPress

By | julho 14, 2011

O que é Facebook Open Graph? O Open Graph é um protocolo utilizado pelo Facebook para ler informações básicas de uma página na internet num formato fácil de compartilhar em qualquer rede social. Através do protocolo Open Graph é possível saber de uma página na internet informações essenciais de uma forma padronizada.

Mas para que uma página web esteja dentro do protocolo Open Graph, é necessário fazer algumas alterações no código HTML, inserido as variáveis básicas que a identificam.

Algumas variáveis básicas do Open Graph utilizadas pelo Facebook:

Nome variável Open GraphDescrição
TypeTipo do documento web
AdminsID do administrador da página
Descriptiondescrição da página web
ImageImagem de logotipo
TitleTítulo da página web
Site NameNome do site
Site URLendereço URL do site
URLendereço URL da página
Canonical URLendereço URL da página
App IdOpcional: Usado no caso de instalação do botão curtir para artigos

Ou seja, para cada link de um artigo na internet, é como se colocássemos uma etiqueta informando seus dados. Uma excelente maneira de padronizar e organizar artigos publicados na internet.

O mais importante disso é que como os documentos web ficam identificados, é mais fácil publica-los e compartilha-los nas redes sociais. Claro que este é o maior objetivo do Facebook.

Instalando Open Graph no WordPress

Veja como instalar Open Graph no Blogger

Para começar, você deve ter criado sua página no Facebook (a versão dela dentro da rede social) pois vamos precisar da identificação numérica dela chamada de “Page ID”.

Veja como criar uma página no Facebook

Para obter o Page ID, basta verificar o endereço no seu navegador:

facebook page ID

A tag admins você deve preencher com o Facebook ID do administrador da página criada no Facebook.

Para obter o Facebook ID do administrador é necessário um processo um pouco mais complicado. Se o administrador for você, vá até seu álbum de fotos e clique em qualquer um deles.

Na barra de endereços do seu navegador você verá um longo número. O último número depois do ponto é seu ID, chamado também de Facebook UID.

como obter o facebook ID admin ID

Agora voltando a interface do WordPress, vá até a seção de editar o seu tema.

Edite o arquivo header.php para inserir as meta tags tipo admins, app id, type e description logo após a tag head.

IMPORTANTE: Lembre-se de guardar uma cópia do arquivo header.php original para ter como backup em caso de qualquer erro.

<head>

<!-- facebook OG Code -->
<meta content='1234567890' property='fb:admins' />
<meta content='article' property='og:type' />
<meta content="1234567890" property="fb:page_id" />
<meta content='Gus SOS Brasil' property='og:description' />
<!-- fim facebook OG Code -->

Opcional – App Id:

<meta content='1234567890' property='fb:app_id' />

Salve o arquivo header.php para prosseguir.

No arquivo functions.php vamos inserir as funções para colocar automaticamente as tags de título de artigo e também da imagem associada ao artigo. O WordPress tem uma função que deixa pegar a imagem diretamente.

<?php
 
/* FaceBook Meta Tags
=================================================== */
function mfields_facebook_meta() {
    if ( is_singular() ) {
        $image = '';
        if ( has_post_thumbnail( get_the_ID() ) ) {
            $image = wp_get_attachment_url( get_post_thumbnail_id( get_the_ID() ) );
        }
        print "\n" . '<meta property="og:title" content="' . esc_attr( get_the_title() ) . '"/>';
        print "\n" . '<meta property="og:site_name" content="' . esc_attr( get_bloginfo() ) . '"/>';
        if ( ! empty( $image ) ) {
            print "\n" . '<meta property="og:image" content="' . esc_url( $image ) . '"/>';
        }
    }
}
add_action( 'wp_head', 'mfields_facebook_meta' );

Instalando SDK do Facebook no WordPress

Ainda no arquivo functions.php vamos agora colocar o script que chama as funções básicas presentes no Facebook SDK.

Lembre-se de ter em mãos o ID do seu aplicativo do Facebook para substituir no código abaixo onde está o valor 999999999999999.

 
/* FaceBook SDK
=================================================== */
if( !function_exists( 'mfields_facebook_sdk' ) ) {
    add_filter( 'wp_footer', 'mfields_facebook_sdk' );
    function mfields_facebook_sdk( $c ) {
        $app_id = '999999999999999';
        print <<<EOF
        <div id="fb-root"></div>
        <script>
          window.fbAsyncInit = function() {
            FB.init({appId: '{$app_id}', status: true, cookie: true,
                     xfbml: true});
          };
          (function() {
            var e = document.createElement('script');
            e.type = 'text/javascript';
            e.src = document.location.protocol +
              '//connect.facebook.net/en_US/all.js';
            e.async = true;
            document.getElementById('fb-root').appendChild(e);
          }());
        </script>
EOF;
    }
}
?>

Instalando Botão Curtir nos Artigos Automaticamente

Caso você queira colocar o botão curtir automaticamente, sem editar o single.php, então pode ainda no arquivo functions.php colocar a seguinte função.


/* FaceBook Like Link
=================================================== */
if( !function_exists( 'mfields_facebook_like_link' ) ) {
    add_filter( 'the_content', 'mfields_facebook_like_link', 20 );
    function mfields_facebook_like_link( $c ) {
        return $c . "\n\t" . '<p><fb:like href="' . get_permalink() . '" layout="button_count" font="tahoma"></fb:like></p>';
    }
}

Dica: A opção de instalar o botão Curtir diretamente é um pouco limitada pois não permite que você customize o local exato do seu posicionamento. A melhor maneira é gerar o código do botão curtir e depois instalar no arquivo single.php do WordPress

Veja como Instalar o botão Curtir do Facebook no Seu Site

Teste de Página do Facebook

Para testar se sua instalação está funcionando utilize a ferramenta URL Linter, criada pelo próprio Facebook.

Facebook URL Linter

Veja como instalar Open Graph no Blogger

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *