Como posso controlar a imagem do Facebook? [fechadas]

A imagem que é usada para compartilhar é retirada de um trecho de código no cabeçalho do seu site que se parece com isso:

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

Normalmente, vincula-se à captura de tela do seu site no tema. Se você removeu o código do cabeçalho do arquivo e em single.php coloque-o dentro do loop e chamou sua imagem de miniatura de post para o elemento href, eu acredito que funcionaria. Então, seria algo parecido com:

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

Isso significa que, se você tiver botões nas páginas que listam várias postagens, provavelmente você não terá uma imagem. Se você incluísse algum código condicional que o removesse apenas em single.php, você teria a imagem normal em qualquer página com várias postagens e um botão semelhante e a miniatura da postagem quando o modelo single.php estiver sendo usado. Então, 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 em 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 plug-in para fazer isso automaticamente.

Apenas faz este trabalho e não são necessárias configurações.

enlace

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

enlace

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

Se eu não seguisse o Protocolo OG para todo o trabalho do FB que eu faço, eu seria demitido.

Se você fizer o seguinte:

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

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

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; ?>" />

você recebe apenas o URL. É provavelmente o caminho mais longo e provavelmente encurtado, mas definitivamente resolve o problema.

Espero que isso o coloque no caminho certo.

Matt.

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

enlace

Se você quiser usar a primeira imagem de sua postagem como a miniatura com um substituto para algo como seu logotipo, tente meu plug-in - enlace A explicação para adicionar a imagem do logotipo substituto está em enlace

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

Este método funciona para "like": s mas mais tarde, se você quiser compartilhar um link no seu log (por exemplo.), esta imagem é autoselecionada.

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

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

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

No post do meu wordpress, eu adiciono o id "featured-image" (eu sei que depois o wordpress está embutido, eu estou em um antigo).

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

Eu 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><scripttype="text/javascript">
$(document).ready( function(){
    var featured_image = $("#featured-image").attr("src");
    $('meta[property="og:image"]').attr("content",featured_image);
});