Comment Facebook Sharer sélectionner les images et autres métadonnées lors du partage de mon URL?
https://stackoverflow.com/questions/1138460
-
16-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Si vous utilisez Facebook Sharer, Facebook offrira à l'utilisateur la possibilité d'utiliser 1 de quelques images tirées de la source en avant-première pour leur lien. Comment ces images sélectionnées, et comment puis-je faire en sorte que toute image particulière sur ma page est toujours inclus dans cette liste?
La solution
Comment puis-je dire Facebook l'image à utiliser quand ma page est partagée?
Facebook a un ensemble de balises meta open-graphique qu'il examine de décider quelle l'image à afficher.
Les touches un pour l'image Facebook sont:
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
et il doit être présent dans la balise <head></head> en haut de votre page.
Si ces balises ne sont pas présents, il va chercher leur ancienne méthode de spécifier une image: <link rel="image_src" href="/myimage.jpg"/>. Si ni sont présents, Facebook se penchera sur le contenu de votre page et choisir des images de votre page qui correspondent à ses critères d'image d'actions: L'image doit être au moins 200px par 200px, un rapport d'aspect maximum de 3: 1, et en PNG, format JPEG ou GIF.
Puis-je spécifier plusieurs images pour permettre à l'utilisateur de sélectionner une image?
Oui, il vous suffit d'ajouter plusieurs images meta tags dans l'ordre que vous souhaitez les voir apparaître dans L'utilisateur sera alors présenté avec une boîte de dialogue de sélection d'image.
J'ai spécifié les balises meta d'images appropriées. Pourquoi pas Facebook accepte les modifications?
Une fois URL a été partagé, le robot d'exploration de Facebook, qui a un agent utilisateur de facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), auront accès à votre page et mettre en cache les méta-informations. Pour forcer les serveurs Facebook pour effacer le cache, utilisez la Facebook Url Debugger / Linter outil qu'ils lancé en Juin 2010 pour actualiser le cache et résoudre tous les problèmes de balise mETA sur votre page.
En outre, les images de la page doivent être accessibles au public à l'crawler Facebook. Vous devez spécifier des années URL absolue comme http://example.com/yourimage.jpg au lieu de simplement / yourimage. jpg.
Puis-je mettre à jour ces balises meta avec le code côté client comme Javascript ou jQuery? Non. Tout comme moteur de recherche robots d'exploration, le grattoir Facebook ne pas exécuter des scripts si tout balises meta sont présents lorsque la page est téléchargée sont les balises meta qui sont utilisés pour la sélection d'image.
L'ajout de ces balises provoque ma page à ne plus valider. Comment puis-je résoudre ce problème?
Vous pouvez ajouter les espaces de noms Facebook nécessaires à votre balise et votre page doit alors passer la validation:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
Autres conseils
Lorsque vous partagez Facebook, vous devez ajouter dans votre code HTML dans la section de tête des balises meta suivantes:
<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />
Et voilà!
Ajoutez le bouton que vous devez selon ce que FB vous dit.
Toutes les informations dont vous avez besoin est dans www.facebook.com/share/
En 2013, si vous utilisez facebook.com/sharer.php (PHP), vous pouvez simplement faire tout bouton / lien comme:
<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo urlencode(YOUR_TITLE);?>&p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>
Paramètres de la requête du lien:
p[title] = Define a page title
p[summary] = An URL description, most likely describing the contents of the page
p[url] = The absolute URL for the page you're sharing
p[images][0] = The URL of the thumbnail image to be used as post thumbnail on facebook
Il est clair simple: vous ne avez pas besoin de js ou d'autres paramètres. Est-ce juste un lien HTML brut. Le style de la Une étiquette de quelque façon que vous voulez.
Placez la balise suivante dans le head:
<link rel="image_src" href="/path/to/your/image"/>
De http://www.facebook.com/share_partners.php
En ce qui concerne ce qu'il choisit comme valeur par défaut en l'absence de cette balise, je ne suis pas sûr.
D'après mon expérience, le http://www.facebook.com/sharer.php ne pas utiliser les balises meta. Il utilise la chaîne que vous passez. Voir ci-dessous.
http://www.facebook.com/sharer.php ? s = 100 & p [title] = CE MON tITRE & p [résumé] = CECI EST MON rÉSUMÉ & p [url] = http: //www.MYURL.com&&p [images] [0] = http: //www.MYURL.com/img/IMAGEADDRESS
Les balises meta travaillent avec le développeur de Facebook comme / envoyer des boutons, tout comme l'autre information Open Graph. Donc, si vous utilisez l'un des éléments réels de Facebook comme les commentaires et autres, qui vont tous dans le lien des choses Open Graph.
Mise à jour: Il y a deux façons d'utiliser le partageur * notez que s par rapport à la valeur u dans la chaîne de requête
?
1 ==> STRING: http://www.facebook.com/ sharer.php? de + contenu ci-dessus de
~~> retirerai d'info de la chaîne.
2 ==> URL: http: //www.facebook. com / sharer.php? u = url où url équivaut à une URL réelle
~~> raclerai la page prévue à la valeur url
~~> Vous pouvez tester tester les valeurs ici: https://developers.facebook.com/tools/debug
Vieux chemin, ne fonctionne plus:
<link rel="image_src" href="http://yoururl/yourimage"/>
Rapporté nouvelle façon, ne fonctionne pas non plus:
<meta property="og:image" content="http://yoururl/yourimage"/>
Il a travaillé au hasard sous et hors tension au cours du premier jour, je mis en œuvre, il n'a pas travaillé du tout depuis.
La page Facebook linter, un utilitaire qui inspecte votre page, indique que tout est correct et fait afficher la vignette Comment choisir ... juste que la page elle-même share.php ne semble pas fonctionner. Doit être un bug sur Facebook à, un apparemment ils ne se soucient pas de fixer comme chaque rapport de bogue sur cette question que j'ai vu dans leur système tout dire résolu ou fixe.
Pour changer le titre, la description et l'image, nous avons besoin d'ajouter des balises meta sous la balise head.
ÉTAPE 1:
Ajouter meta tags sous la balise head
<html>
<head>
<meta property="og:url" content="http://www.test.com/" />
<meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
<meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
<meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />
PROCHAINE ÉTAPE:
Cliquez sur le lien ci-dessous
https://developers.facebook.com/tools/debug
Ajoutez votre URL dans la boîte de texte (par exemple http://www.test.com/ ) où vous mentionné les tags. Cliquez sur le bouton DEBUG.
Son fait.
Vous pouvez vérifier ici https: / /www.facebook.com/sharer/sharer.php?u=http://www.test.com/
url ci-dessus, u = lien de votre site
ENJOY !!!!
Pour HTTPS
<meta property="og:image:secure_url" content="https://image.path.png" />
J'ai eu ce problème et il fixe avec la suggestion de-84 manuel. En utilisant une image 400x400px fonctionnait très bien, alors que mon image plus petite n'a jamais montré dans le partageur.
Notez que Facebook recommande un minimum 200px image carrée comme og: balise image: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags
Voici ce qui a fonctionné pour moi: j'ai placé l'image miniature désirée sur la bonne page après la balise et d'en faire trop petit pour voir ..
<img src="imagename.jpg" width="1" height="1" />
Je ne l'ai pas testé avec la hauteur et la largeur 0 0 mais il faudra probablement encore travailler .. Cela ne garantit pas que l'utilisateur choisira cette image ..
En outre, il semble que Facebook met en cache les vignettes sur votre page et ne marche pas toujours vérifier pour de nouveaux .. essayez d'ajouter ceci à une autre page sur votre site et vous verrez que cela fonctionne.
Utilisez facebook dialogue d'alimentation au lieu de dialogue de partage pour afficher des images personnalisées
Exemple:
https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description
Je ne pouvais pas Facebook de choisir la bonne image à partir d'un poste spécifique, donc je ne ce qui est décrit sur cette page:
En d'autres termes, quelque chose comme ceci:
<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
<meta content='http://urlofyourimage.png' property='og:image'/>
</b:if>
En gros, vous allez à un code difficile si la déclaration en HTML de votre site pour l'obtenir pour changer le contenu méta pour tout ce que vous avez changé pour qu'un poste. Il est une solution en désordre, mais cela fonctionne.
