Como integrar o Facebook Open Graph com o WordPress

O protocolo Facebook Open Graph permite que você compartilhe o conteúdo do seu blog não apenas com seus leitores, mas também com seus amigos do Facebook. A melhor parte é - sempre que alguém gostei seu (s) conteúdo (s), ele será publicado em seu perfil no Facebook. Mas isso não é tudo, o Open Graph permite que você explore formas mais interessantes de interagir e interagir com seus leitores. Por fim, se isso for feito corretamente, ela aumenta sua marca e aumenta o tráfego do seu site.

No post de hoje, vamos dar uma olhada como integrar o Facebook Open Graph com um WordPress auto-hospedado em um detalhado guia passo-a-passo. Será necessário editar os Temas WordPress existentes e criar um aplicativo do Facebook (se você não tiver um).

Pronto? Vamos acionar o navegador e seu editor de código favorito. Guia completo após o salto.

Passo 1. Crie um aplicativo do facebook

Nós precisaremos de um ID do aplicativo e para obter isso, você precisará criar um aplicativo do Facebook. Se você já tem um, vá para o passo 2.

Criar uma aplicação é fácil, aqui está o que você faz:

1. Faça o login no Facebook, vá para a página do desenvolvedor.
2. Clique "Configurar um novo aplicativo"botão no canto superior direito.
3. Dê um nome para o seu novo aplicativo, aceita para os termos do Facebook, clique em Criar aplicativo.
4. Vamos para Local na rede Internet aba, encher URL do site e Domínio do site.
5. Anote o valor de ID do aplicativo em algum lugar e aperte o botão "Salvar alterações"botão.

Isso é tudo! Você sempre pode voltar mais tarde para preencher o restante das informações.

Etapa 2. Substituir Tag

Abra o arquivo de cabeçalho do seu tema (header.php) no seu editor favorito. Mantenha sempre uma cópia de segurança apenas para o caso de algo correr mal.

Procure esta linha de código a seguir, ou uma que comece com >

Substitua por:

Mantenha o header.php aberto, vamos precisar dele para o 3º passo.

Etapa 3. Inserir OG Tag

Cole o seguinte código logo após tag ou antes tag.

       "/>          

Aqui estão alguns dos valores que você precisará alterar:

• Linha 3: substituir your_fb_app_id com o ID do aplicativo da etapa 1.
• Linha 4: você pode obter your_fb_admin_id na sua página do Facebook Insights, (Mais informações). Clique no "Insight para o seu site"botão verde, pegue a seqüência inteira de código e substitua a Linha 4.
• Linha 12: Esta linha determina a imagem que representa sua postagem. Se o seu tema suportar o WordPress Post Thumbnails, ele deve funcionar bem. Mas se isso não acontecer, irá falhar graciosamente sem uma imagem. Confira o Passo 3a para uma alternativa alternativa.
• Linha 19: Substituir logo.jpg com um URL para o logotipo do seu blog. Ele será exibido quando uma página não postada no seu blog for compartilhada no Facebook.

Etapa 3a - quando "wp_get_attachment_thumb_url" falha

Quando wp_get_attachment_thumb_url () não funcionou, você provavelmente acessará um atributo de conteúdo sem valor, como mostrado abaixo:

Uma solução simples será substituir a Linha 12 pelo seguinte código:

Em seguida, abra funções.php e insira o seguinte código:

função catch_that_image () global $ post, $ posts; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ matches); $ first_img = $ matches [1] [0]; if (empty ($ first_img)) // Define uma imagem padrão $ first_img = "/images/default.jpg";  return $ first_img; 

Este código de substituição tenta usar uma chamada de função catch_that_image () para capturar e exibir o URL da primeira imagem que encontra. Substitua a linha 10 por URL para uma imagem padrão se a função não conseguir encontrar sua primeira imagem.

Etapa 4. Inserir o SDK JavaScript do Facebook

O Javascript a seguir permite que você acesse todos os recursos da API e das caixas de diálogo do Graph. Ele também permite que você integre plugins sociais do Facebook como o botão Curtir, Facepile, Recomendações, etc com facilidade.

Coloque em header.php, logo depois

Substituir your_fb_app_id na linha 4 com ID do aplicativo da etapa 1 mais cedo.

Etapa 5. Vamos testá-lo!

Estamos concluindo a integração do Facebook Open Graph no blog do WordPress. Vamos dar um par de teste para ter certeza de que fizemos as coisas corretamente.

Teste nº 1 - Visualizar o código-fonte

Dê uma olhada nos códigos-fonte de um dos posts do blog, você deve ter algo parecido com isto:

Verifique as propriedades e seus valores, verifique se estão corretos.

Teste # 2 - Instale uma caixa semelhante

Se você não instalou um botão semelhante ao Facebook, provavelmente é hora de comprar um. Coloque o seguinte código em qualquer lugar (preferencialmente antes do conteúdo ou depois do conteúdo) dentro single.php:

Em seguida, peça a um amigo para Gostar isto. Você deve ver algo semelhante aparecendo em seu perfil no Facebook:

Extra: Plugin WordPress

Se de alguma forma você não conseguiu instalar os códigos ou precisa que isso seja feito rápido e fácil - há um plugin para WordPress para isso.

O Facebook Open Graph Meta no WordPress é um plugin para WordPress que adiciona metadados do Facebook para evitar problemas com miniaturas, problemas com títulos incorretos, problemas com descrições erradas, etc..