Comment puis-je contrôler l'image de Facebook? [fermé]

J'ai un blog avec quelques articles, et chaque article a un bouton J'aime Facebook . Appuyer sur le bouton ouvre une boîte de dialogue 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 contrôler l'image utilisée lors du partage?

L'image utilisée pour le partage provient d'un morceau de code dans l'en-tête de votre site qui ressemblera à ceci:

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

En règle générale, il renvoie à la capture d'écran de votre site dans le thème. Si vous supprimez le code de l'en-tête du fichier et sur single.php, mettez-le dans la boucle et appelez votre image miniature dans l'élément href, je pense que cela fonctionnerait. Cela ressemblerait donc à quelque chose comme:

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

Cela signifie que si vous avez des boutons J'aime sur les pages qui répertorient plusieurs publications, vous n'aurez probablement pas d'image. Si vous incluiez du code conditionnel qui le supprimait uniquement sur single.php, vous auriez l'image normale sur n'importe quelle page avec plusieurs publications et un bouton similaire et la miniature de la publication lorsque le modèle single.php est utilisé. Le code d'en-tête serait donc:

<?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 du message dans single.php.

Facebook utilise désormais le protocole opengraph. Vous pouvez ajouter des images en utilisant:

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

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

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

Il fait juste ce travail et aucun réglage n'est nécessaire.

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

Vous devez utiliser le protocole Facebook Open Graph. Je ne sais pas pourquoi la réponse acceptée n'est pas l'une des nombreuses OG: réponses liées (que j'ai votées), mais c'est faux.

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

Vous pouvez personnaliser beaucoup de choses, y compris 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 l'image complète.

Si je ne suivais pas le protocole OG pour tout le travail FB que je fais, je serais viré.

Si vous procédez comme suit:

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

Vous constaterez que Wordpress affiche le code HTML requis pour afficher l'image, et pas seulement le code SRC, ce que vous voulez vraiment.

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 obtient l'URL uniquement. C'est probablement le long chemin et peut probablement mais raccourci, mais cela résout définitivement le problème.

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

Mat.

Assurez-vous de pelucher votre URL ici si l'image spécifiée n'apparaît pas correctement:

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

Si vous souhaitez utiliser la première image de votre article comme miniature avec un repli sur quelque chose comme votre logo, essayez mon plugin - http://wordpress.org/extend/plugins/facebook-like-thumbnail/ Explication pour ajouter le l'image du logo de secours se trouve sur http://blog.ashfame.com/?p=888

<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 parmi toutes les images du site lié.

Quelqu'un sait-il comment garder l'image statique "comme" mais vous fait quand même choisir une image lors du partage d'une URL?

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

Dans mon article wordpress, j'ajoute l'ID "en vedette-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é, comme mon journal de blog. Ajoutez "id =" meta-image "à la balise, ie

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

Ajoutez ensuite 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);
});