Como posso controlar a imagem do Facebook? [fechadas]

Eu tenho um blog com algumas postagens, e cada post tem um botão de curtir do Facebook incorporado . Pressionar o botão abre uma caixa de diálogo para que meus visitantes possam compartilhar a postagem no Facebook com um comentário.

Ao compartilhar, no entanto, a imagem selecionada pelo Facebook é um ícone de correio genérico e não a miniatura da postagem.

Como posso controlar a imagem usada ao compartilhar?

A imagem usada para compartilhar é obtida de um pedaço de código no cabeçalho do seu site que terá a seguinte aparência:

<link rel="image_src" href="path/to/theme/screenshot.png" />

Normalmente, ele é vinculado à captura de tela do seu site no tema. Se você removeu o código do cabeçalho do arquivo e no single.php, coloque-o dentro do loop e chame a imagem em miniatura da postagem no elemento href, acredito que funcionaria. Então, seria algo como:

<link rel="image_src" href="<?php the_post_thumbnail(); ?>" />

Isso significa que, se você tiver botões como nas páginas que listam várias postagens, provavelmente não terá uma imagem. Se você incluísse algum código condicional que o removesse apenas no single.php, você teria a imagem normal em qualquer página com várias postagens e um botão like e a miniatura da postagem quando o modelo single.php estiver sendo usado. Portanto, o código do cabeçalho seria:

<?php if ( is_single() ) { /* do nothing on single pages */ } else { ?>
<link rel="image_src" href="path/to/theme/screenshot.png" />
<?php } ?>

Então você ainda usaria o código para incluir a miniatura da postagem no single.php.

O Facebook agora usa o protocolo opengraph. Você pode adicionar imagens usando:

<meta property = "og: image" content = "http: // YOUR_IMAGE_URL" />

Adicione esta linha ao cabeçalho da sua página.

Como alternativa, você pode usar meu plugin para fazer isso automaticamente.

Ele apenas faz esse trabalho e nenhuma configuração é necessária.

http://shailan.com/wordpress/plugins/facebook-meta-tags-plugin/

Você precisa usar o Facebook Open Graph Protocol. Não sei por que a resposta Aceita não é uma das muitas respostas relacionadas ao OG (que votei), mas está errada.

http://developers.facebook.com/docs/opengraph/

Você pode personalizar muitas coisas, incluindo título, imagem, descrição, categoria, última atualização, etc ... se usar o Open Graph. Se você usar essas outras meias soluções, estará perdendo toda a imagem.

Se eu não seguisse o Protocolo OG por todo o trabalho que fiz no FB, seria demitido.

Se você fizer o seguinte:

<link rel="image_src" href="<?php the_post_thumbnail(); ?>" />

Você verá que o Wordpress gera o html necessário para exibir a imagem, não apenas o SRC, que é o que você realmente deseja.

Fazendo algo como:

<?php

// Featured Image for FB Like
$feature_image = get_the_post_thumbnail($post->ID);

// Get image source
$doc = new DOMDocument();
$doc->loadHTML($feature_image);
$imageTags = $doc->getElementsByTagName('img');

foreach($imageTags as $tag) {
        $image_url = $tag->getAttribute('src');
    }
?>
<link rel="image_src" href="<?php echo $image_url; ?>" />

fornece apenas o URL. Provavelmente é o caminho mais longo e provavelmente pode ser encurtado, mas definitivamente resolve o problema.

Espero que isso o coloque no caminho certo.

Matt.

Certifique-se de lintar seu URL aqui se a imagem especificada não estiver aparecendo corretamente:

http://developers.facebook.com/tools/lint/

Se você quiser usar a primeira imagem da sua postagem como miniatura com um substituto para algo como o seu logotipo, experimente meu plugin - http://wordpress.org/extend/plugins/facebook-like-thumbnail/ Explicação para adicionar o a imagem do logotipo substituto está em http://blog.ashfame.com/?p=888

<meta property="og:image" content="http://YOUR_IMAGE_URL" />

Esse método funciona para "like": s, mas mais tarde, se você deseja compartilhar um link em seu log (por exemplo.), Essa imagem é selecionada automaticamente.

Sem essa metatag, você pode selecionar entre todas as imagens no site vinculado.

Alguém conhece alguma maneira de manter a imagem estática, mas ainda faz você escolher uma imagem ao compartilhar um URL?

OK, escrevi um pouco de javascript para preencher a imagem Meta og: com a imagem em destaque de minha escolha. É um hack único que você adiciona ao seu arquivo de cabeçalho.

No meu post no wordpress, eu adiciono o id "imagem em destaque" (eu sei que com o wordpress posterior isso está embutido, estou usando um antigo).

<xmp><img src="http://mysite.com/catphoto.jpg" id="featured-image" /></xmp>

Escrevo uma metatag para a imagem og: com um espaço reservado, como o log do meu blog. Adicione "id =" meta-imagem "à tag, ou seja,

<meta property="og:image" src="http://mysite.com/logo.jpg" id="meta-image" />

Em seguida, adicione este javascript no cabeçalho:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>

<script type="text/javascript">
$(document).ready( function(){
    var featured_image = $("#featured-image").attr("src");
    $('meta[property="og:image"]').attr("content",featured_image);
});