Comment puis-je contrôler Facebook comme une image? [fermé]

12

J'ai un blog avec quelques publications et chaque publication comporte un like intégré à Facebook. Appuyez sur le bouton pour ouvrir une boîte de dialogue afin que mes visiteurs puissent partager la publication sur Facebook avec un commentaire.

Toutefois, 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?

    
posée hannit cohen 03.11.2010 - 21:13

8 réponses

7

L'image utilisée pour le partage provient d'un bloc 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" />

Généralement, cela renvoie à 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, ce qui fonctionnerait. Donc, cela ressemblerait à quelque chose comme:

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

Cela voudrait dire que si vous avez des boutons semblables sur les pages qui répertorient plusieurs articles, 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é. 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 de publication dans single.php.

    
réponse donnée curtismchale 04.11.2010 - 16:04
11

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 à l'en-tête de votre page.

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

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

enlace

    
réponse donnée mattsay 19.03.2011 - 10:40
5

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 nombreux problèmes OG: liés (que j'ai votés), mais c'est faux.

enlace

Vous pouvez personnaliser de nombreux é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 demi-solutions, vous manquez 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.

    
réponse donnée bitwit 14.10.2011 - 23:07
1

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 obtient l'URL uniquement. 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.

Matt.

    
réponse donnée user4050 19.03.2011 - 00:36
1

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

enlace

    
réponse donnée Justin Burrow 27.07.2011 - 20:18
0

Si vous souhaitez utiliser la première image de votre message en tant que vignette avec un repli sur votre logo, essayez mon plug-in - enlace L’explication concernant l’ajout de l’image du logo de secours se trouve à l'adresse enlace

.     
réponse donnée Ashfame 19.03.2011 - 08:57
0
<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 comment conserver une image statique "similaire" tout en vous faisant choisir une image lorsque vous partagez une URL?

    
réponse donnée Yo-L 16.08.2011 - 16:18
0

OK, j’ai écrit un peu de javascript pour remplir le méta 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 article 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'est-à-dire

<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><scripttype="text/javascript">
$(document).ready( function(){
    var featured_image = $("#featured-image").attr("src");
    $('meta[property="og:image"]').attr("content",featured_image);
});
    
réponse donnée Anna Billstrom 06.03.2012 - 08:35

Lire d'autres questions sur les étiquettes