web-dev-qa-db-fra.com

Comment puis-je contrôler l'image Facebook?

J'ai un blog avec quelques articles, et chaque article a un Facebook incorporé comme le bouton . En appuyant sur le bouton, une boîte de dialogue s'ouvre pour que mes visiteurs puissent partager la publication sur Facebook avec un commentaire.

Cependant, lors du partage, l’image sélectionnée par Facebook est une icône de courrier générique et non la vignette du message.

Comment puis-je contrôler l'image utilisée lors du partage?

facebook
13
hannit cohen

L'image utilisée pour le partage est tirée d'un morceau de code situé dans l'en-tête de votre site et qui ressemble à ceci:

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

En règle générale, il est lié à la capture d'écran de votre site dans le thème. Si vous avez supprimé le code de l'en-tête du fichier et que vous l'avez placé dans single.php, il a inséré votre vignette de publication dans l'élément href. Je pense que cela fonctionnerait. Donc, cela ressemblerait à quelque chose comme:

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

Cela signifierait que si vous avez des boutons similaires sur les pages qui répertorient plusieurs publications, vous n'aurez probablement pas d'image. Si vous avez inclus un code conditionnel qui ne l’a supprimé que sur single.php, vous obtiendrez l’image normale sur une page comportant plusieurs publications, un bouton de recherche et la vignette de publication lorsque le modèle single.php est utilisé. Donc, le code d'en-tête serait:

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

Ensuite, vous utiliseriez toujours le code pour inclure la vignette de publication dans single.php.

7
curtismchale

Facebook utilise maintenant le protocole opengraph. Vous pouvez ajouter des images en utilisant:

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

Ajoutez cette ligne à votre en-tête de page.

Sinon, vous pouvez utiliser mon plugin pour le faire automatiquement.

Il fait juste ce travail et aucun paramètre n'est nécessaire.

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

11
mattsay

Vous devez utiliser le protocole Facebook Open Graph. Je ne suis pas sûr de savoir pourquoi la réponse acceptée ne fait pas partie des nombreuses questions relatives aux OG: réponses connexes (que j'ai votées), mais c'est faux.

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

Vous pouvez personnaliser beaucoup d'éléments, notamment le titre, l'image, la description, la catégorie, la dernière mise à jour, etc. si vous utilisez Open Graph. Si vous utilisez ces autres demi-solutions, il vous manque la vue d'ensemble.

Si je ne suivais pas le protocole OG pour tout le travail que je faisais sur le FB, je me ferais virer.

5
bitwit

Si vous procédez comme suit:

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

Vous constaterez que Wordpress génère le code HTML requis pour afficher l'image, pas seulement le code SRC, ce que vous souhaitez réellement.

Faire quelque chose comme:

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

vous donne l'URL seulement. C'est probablement le chemin le plus long et peut probablement être raccourci, mais cela résout définitivement le problème.

J'espère que cela vous met sur la bonne voie.

Mat.

1
user4050

Assurez-vous de laisser votre URL ici si l'image spécifiée ne s'affiche pas correctement:

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

1
Justin Burrow

OK, j’ai écrit un peu de javascript pour remplir le Meta og: image avec l’image sélectionnée de mon choix. C'est un hack que vous ajoutez une fois à votre fichier d'en-tête.

Dans mon post wordpress, j'ajoute l'id "sélectionnée-image" (je sais qu'avec Wordpress plus tard, c'est intégré, je suis sur un ancien).

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

J'écris une balise meta pour l'image og: avec un espace réservé, tel que le journal de mon blog. Ajoutez "id =" méta-image "à la balise, c.-à-d.

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

Ensuite, ajoutez ce javascript dans l'en-tête:

<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);
});
0
Anna Billstrom

Si vous souhaitez utiliser la première image de votre message en tant que vignette avec un remplacement de votre logo, essayez mon plugin - http://wordpress.org/extend/plugins/facebook-like-thumbnail/ L’explication concernant l’ajout de l’image du logo de secours se trouve à http://blog.ashfame.com/?p=888

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

Cette méthode fonctionne pour "like": s mais plus tard si vous souhaitez partager un lien dans votre journal (par exemple.), Cette image est sélectionnée automatiquement.

Sans cette balise META, vous pouvez sélectionner toutes les images du site lié.

Quelqu'un sait-il qu'il est possible de conserver l'image statique "like" tout en vous faisant choisir une image lorsque vous partagez une URL?

0
Yo-L