← Desenvolvimento

Problema redes sociais - Thumbnail

Lida 2963 vezes

Offline
A

Angelicous 
Membro
Mensagens 67 Gostos 0
Troféus totais: 18
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 3 Level 2 Level 1 50 Posts 10 Posts First Post

Ora boas a todos.

Mais uma vez preciso da vossa ajuda  :superlol:

É o seguinte, tenho o seguinte website:

www.porreiropah.com

Com a ajuda do nosso amigo Luis Marques, consegui fazer umas alterações no theme, uma das quais, meter aquela barra com os botões das 3 principais redes sociais que conseguem ver por baixo do vídeo.

Mas ao testarmos os botões(neste caso o do facebook) o texto que aparecia nos facebooks era o dos anuncios adsense. O Luis aconselhou então a implementação de um programa SEO para escrever lá a descrição e que nas partilhas depois aparecia certinho. Testamos, e tudo correcto.

O problema é que os thumbnails(imagens miniatura) não aparecem correctos. O Thumbnail que aparece no facebook é uma imagem da sidebar. Nova possível solução: colocar imagens de destaque. O theme que tenho não o tinha o botão de imagens de destaque embutido, por isso tive que acrescentar o código. Na altura actualizei também o wordpress para a última versão.

Ora nos post agora aparece também os videos thumbnail. Se fizer um search ele encontra o video do youtube, actualiza o video thumbnail e mete a mesma imagem na imagem de destaque. Optimo.

Fomos testar o botão Share mas continua a meter a imagem da sidebar  :-?

Fiz um novo post para ver se não seriam problemas de indexação ou assim, mas resultado é o mesmo. Já copiei o link do post e colei no facebook para poder escolher a imagem... mas nem sequer aparece a imagem do thumbnail definida...

Precisava então de possíveis soluções para este problema.

O site é novo, e ainda não teve um lançamento "oficial", mas não o queria lançar sem ter este problema resolvido pois estes botões de partilha são bastante importantes para o crescimento do site.

Eu tenho outros websites e nunca tive problemas deste género com os botões...

Será que alguém consegue dar uma ajuda?

Desde já obrigado

EDIT: fica aqui o print da imagem de destaque/video thumbnail que falei, do último post com os thumb actualizados.

Offline
d

diogoosorio 
Membro
Mensagens 134 Gostos 1
Feedback +1

Troféus totais: 22
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

http://developers.facebook.com/docs/reference/plugins/like/

Vê o "Passo 2", nomeadamente a tag og:image. É questão de integrares essas tags na header das páginas em que queres definir tu qual a thumb a que o FB deve dar preferência.

Assumo que por esta altura existam n plugins que até te devem fazer isto automaticamente, é questão de procurares um pouco.
Offline
A

Angelicous 
Membro
Mensagens 67 Gostos 0
Troféus totais: 18
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 3 Level 2 Level 1 50 Posts 10 Posts First Post

diogo, desculpa a pergunta que sou um bocado noob nisto, mas como é que mexo com o header de cada post individualmente?
Offline
D

Diogo Pinto 
Administrador
Mensagens 4400 Gostos 371
Feedback +4

Troféus totais: 37
Trófeus: (Ver todos)
Avatar Search Level 6 Linux User Mobile User Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes

Adicione o seguinte código ao ficheiro functions.php do
seu tema:

function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i',
$post->post_content, $matches);
$first_img = $matches [1]
  • ;

return $first_img;
}

Agora, adicione o seguinte código entre as tags
<head></head> do ficheiro header.php do seu tema:


<meta property="og:image" content="<?php echo catch_that_image(); ?>" />

Utilize o link para um artigo do seu site em https://developers.facebook.com/tools/debug e verifique se todas as propriedades estão correctas.
Offline
A

Angelicous 
Membro
Mensagens 67 Gostos 0
Troféus totais: 18
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 3 Level 2 Level 1 50 Posts 10 Posts First Post

Object at URL 'http://www.porreiropah.com/2012/02/bebe-talentoso-faz-furor-na-net-a-jogar-ping-pong/' of type 'article' is invalid because the given value 'Array' for property 'og:image:url' could not be parsed as type 'url'.

A imagem que fica automaticamente me destaque tem este url:

http://www.porreiropah.com/wp-content/uploads/2012/02/03.jpg
Offline
d

diogoosorio 
Membro
Mensagens 134 Gostos 1
Feedback +1

Troféus totais: 22
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Citação de: Diogo Pinto em 20/Fev/2012 16:33
Adicione o seguinte código ao ficheiro functions.php do
seu tema:

function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i',
$post->post_content, $matches);
$first_img = $matches [1]
  • ;

return $first_img;
}

Agora, adicione o seguinte código entre as tags
<head></head> do ficheiro header.php do seu tema:


<meta property="og:image" content="<?php echo catch_that_image(); ?>" />

Utilize o link para um artigo do seu site em https://developers.facebook.com/tools/debug e verifique se todas as propriedades estão correctas.

Uff que trecho de código tão feio...

Eu ia mais para uma coisa deste género:

Código: (php) [Seleccione]
<?php

add_action('wp_head', 'adiciona_imagem_fb');

funcion adiciona_imagem_fb(){
global $post;
// Verificar se a página actual é um post
 if(is_single($post->ID)){

 // Puxar o ID do thumbnail do post actual
 $id = get_post_thumbnail_id($post->ID);
if(!empty($id)){
// Obter a informação do anexo
 $image  = wp_get_attachement_image_src($id, array(100, 100);
 $image_src = $image['url'];
// Construir a meta tag
 $meta = sprintf('<meta property="og:image" content="%s" />', $image_src);
// Cuspir a meta tag
 echo $meta;
 }
 }
}
Não testei, mas parece-me uma solução bastante mais elegante que a proposta pelo Diogo (que basicamente atira um Regex contra o conteúdo da página).

Ainda mais simples, é mesmo utilizar o Google: http://wordpress.org/extend/plugins/search.php?q=facebook+meta
Offline
A

Angelicous 
Membro
Mensagens 67 Gostos 0
Troféus totais: 18
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 3 Level 2 Level 1 50 Posts 10 Posts First Post

Bem não sei qual a solução que funcionou. Na dúvida coloquei o código do Diogo Pinto, e foi-me sugerido pelo Luis meter o WP Facebook Open Graph protocol.

Os novos post funcionam já :D

Obrigado a todos. Penso que podem encerrar :)
Offline
D

Diogo Pinto 
Administrador
Mensagens 4400 Gostos 371
Feedback +4

Troféus totais: 37
Trófeus: (Ver todos)
Avatar Search Level 6 Linux User Mobile User Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes

Olá Diogo,

Esse código, se não estou em erro, vinha com os temas da Elegant Themes... Sem certezas, acho que copiei de lá, nunca gastei muito tempo a investigar... Mas obrigado pela tua sugestão... ;) Não posso testar já mas vou ver se testo noutra altura!
Offline
C

Celso Azevedo 
Membro
Mensagens 3500 Gostos 38
Feedback +12

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Tenth year Anniversary Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Se usarem o plugin Wordpress SEO, ele faz isso automaticamente. É só activar a opção "social" e ativar a opção ;)
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Podes adicionar mais opções, eu uso o seguinte:

Só precisas de adicionar ao functions.php

Código: (php) [Seleccione]
/** OpenGraph Facebook */
function get_page_thumb() {
$files = get_children('post_parent='.get_the_ID().'&post_type=attachment&post_mime_type=image');
  if($files) :
    $keys = array_reverse(array_keys($files));
    $j=0;
    $num = $keys[$j];
    $image=wp_get_attachment_image($num, 'thumbnail', false);
    $imagepieces = explode('"', $image);
    $imagepath = $imagepieces[1];
    $thumb=wp_get_attachment_thumb_url($num);
$large_img=wp_get_attachment_url($num);
ob_start();
return $thumb;
ob_end_flush();
  endif;
 
}
 
function wpc_fb_opengraph() {
if (is_single()) {
$wpc_image_url = get_page_thumb();
?>
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:type" content="blog" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php the_title(); ?>" />
<meta property="fb:admins" content="1301293331"/>
<meta property="og:image" content="<?php echo get_page_thumb(); ?>"/>
<link rel="image_src" href="<?php echo get_page_thumb(); ?>" />
<?php } else {
?>
<meta property="og:title" content="<?php bloginfo('name'); ?>" />
<meta property="og:url" content="<?php echo get_option('home'); ?>" />
<meta property="og:type" content="blog" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="fb:admins" content="1301293331"/>
<meta property="og:image" content="http://libertytuga.com/wp-content/uploads/2011/02/novo-LibertyTuga.jpg"/>
<link rel="image_src" href="http://libertytuga.com/wp-content/uploads/2011/02/novo-LibertyTuga.jpg" />
<?php
}
}
add_action('wp_head', 'wpc_fb_opengraph');
/** END OpenGraph Facebook */

Páginas: 1

Posts relacionados

Social Media

Redes sociais.

passal

Sugestões

Integração com Redes Sociais

J
João Godinho

Social Media

Gestão e dinamização de marcas na Redes sociais

Nuno