Tribune web « Réseautage social sur le web « Comment ajouter à votre site un bouton de partage sur Facebook «
Discussion : Comment ajouter à votre site un bouton de partage sur Facebook
Instructions détaillées pour ajouter un bouton Facebook personnalisé à votre site web ou à votre blogue
Denis SAVEY - Bonjour,
Tout d'abord merci pour cet artcile.
Je souhaiterais par ailleurs savoir comment faire pour insérer une description, une image, etc dans la pop-up qui souvre pour partager...
Merci bcp
Denis
Alain Lesage - Bonjour Denis, et bienvenue sur mon blogue.
Je ne m'en suis guère occupé depuis un an et il est possible que certaines infos soient périmées. Je remarque en particulier que les options pour le bouton (dans le tableau) ne semblent plus fonctionner (du moins ici même).
Pour répondre plus directement à votre question, il n'y a rien de particulier que vous puissiez faire, à ma connaissance, pour choisir le contenu qui s'affiche dans la fenêtre pop-up. C'est Facebook qui extrait le titre, le sous-titre et une image de votre page web pour la proposer comme contenu à partager, avec l'hyperlien menant à votre page.
Bon succès.
Denis SAVEY - Tout d'abord merci pour votre réponse si rapide ! C'est vraiment gentil de bien vouloir m'aider !
Pour tout vous expliquer :
J'héberge une page sur un serveur OVH que j'appelle dans une Iframe sur facebook.
Et lorsque je clique sur "share" cela me met la pop-up suivante (impr. en fichier joint) alors que mon code est celui-ci : (tout n'est pas forcement super juste dans le <head>)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="title" content="Century 21 Fortis Immo en 360°"/>
<meta name="description" content="Visitez nos agences Century 21 Fortis Immo en 360°" />
<link rel="image_src" href="http://www.visitezen360.com/facebook/agences360/logoc21.jpg" />
<link rel="target_url" href="https://www.facebook.com/pages/Test-pour-apr%C3%A8s/181354048577828?sk=app_156218351098324" />
<title>Faites estimer votre appartement</title>
</head>
<body>
<a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</body>
</html>
imgpartager.jpg
Alain Lesage - Je ne suis pas certain de comprendre. Dites-vous que quand vous cliquez sur le bouton que vous avez mis dans VOTRE page, le popo-up indique MA page ?
Ça semble impossible. Avez-vous vidé vos caches de navigateur, juste en cas ?
Pouvez-vous me donner accès à la page où vous avez mis le bouton ?
Denis SAVEY - Je ne comprends rien non plus !!!
Je trouve cela délirant... D'autant que comme vous avez pu le constater le code ne fait à aucun moment référence à votre site...
Et oui le cache est bien vidé ^^
Le lien est le suivant : https://www.facebook.com/pages...156218351098324
Denis SAVEY - Tout d'abord merci pour votre réponse si rapide ! C'est vraiment gentil de bien vouloir m'aider !
Pour tout vous expliquer :
J'héberge une page sur un serveur OVH que j'appelle dans une Iframe sur facebook.
Et lorsque je clique sur "share" cela me met la pop-up suivante (impr. en fichier joint) alors que mon code est celui-ci : (tout n'est pas forcement super juste dans le <head>)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="title" content="Century 21 Fortis Immo en 360°"/>
<meta name="description" content="Visitez nos agences Century 21 Fortis Immo en 360°" />
<link rel="image_src" href="http://www.visitezen360.com/facebook/agences360/logoc21.jpg" />
<link rel="target_url" href="https://www.facebook.com/pages/Test-pour-apr%C3%A8s/181354048577828?sk=app_156218351098324" />
<title>Faites estimer votre appartement</title>
</head>
<body>
<a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</body>
</html>
imgpartager.jpg
Denis SAVEY -
Ca y est !!! J'ai trouvé d'où venait le problème !!!
En réalité comme je n'arrivais pas à faire ce que je voulais, j'ai voulu prendre vos balises pour tenter de comprendre.
Sauf que facebook semble enregistrer les infos.
J'ai changé le nom de ma page sur mon serveur, et tout a bien marché !!
Par contre dans le partage il y a deux choses que je voudrais corriger... :
=> Le nom du site (qui s'affiche en dessous du titre) est le nom du site qui héberge la page. Est-il possible par une balise de le faire pointer vers un autre site ? (ici le site qui héberge est "www.visitezen360.com" et je souhaiterai que se qui s'affiche soit "http://www.century21-fortisimmo-paris.com/"
=> le lien dans le titre amène sur la page hébergé par le serveur, toute l'interface de facebook disparait donc...
Avez vous une idée pour corriger cela ?
Encore merci pour votre aide !!
Denis
partage2.jpg
Alain Lesage - Hoah ! ça devient compliqué.
Content cependant que vous ayez résolu le premier problème. J'ai testé : c'est bon.
Pour ce qui est de diriger vers une autre page, vous pouvez tenter d'utiliser les options que je mentionne :
- dans la balise <a, ajoutez share_url="http://www.century21-fortisimmo-paris.com/" comme attribut
- je ne suis pas certain que l'attribut sera accepté par le système (cela dépend notamment des configurations de l'hébergeur)
- à défaut, vous pouvez faire une redirection de la page www.visitezen360.com vers http://www.century21-fortisimmo-paris.com/, mais on ne pourra plus accéder à la première
Pour ce qui est de préserver l'interface de Facebook à l'ouverture d'une page externe, je ne vois pas comment ce serait possible. Il faudrait pouvoir créer un iFrame à la volée, en spécifiant Facebook comme page parent. Je n'imagine pas de façon de faire ça.
Cependant, vous pourriez tenter d'ouvrir votre popup dans une page différente, qui laisse la page Facebook ouverte « derrière » celle que vous appelez. Je ferais un test en ajoutant, toujours dans la balise <a du popup, l'attribut target="_blank".
Remarquez que je crains que Facebook bloque ce genre de chose car je vois régulièrement des avertissements m'indiquant "vous quittez Facebook, ce peut être dangereux, voulez-vous vraiment continuer... ".
Je vous souhaite bonne chance mais je crains de ne pouvoir vous aider au-delà de ces quelques suggestions. Je ne suis pas programmeur, ni spécaliste de Facebook, seulement ce que les américains appellent peut-être un « power user ».
Bon succès. Laissez-moi savoir comment ça tourne.
Alain
Bertrand - Bonjour,
J'étais déjà venu prendre des infos sur votre site il y a quelque temps. merci !
J'ai une question si vous avez 5 min :
Le bouton FB fonctionne parfaitement cependant il ne reprend jamais le chapeau (extrait de l'article) 
le titre aucun problème mais la photo est choisie aléatoirement (pas grave) par contre le chapeau ne s'affiche pas !
Y'a t-il un style "marqueur" spécifique à FB ? Ou avez vous une idée pour résoudre cela ?
Merci d'avance.
fb.jpg
Alain Lesage - Je ne sais pas comment Facebook choisit son extrait (chapeau) mais on peut voir que sur cette page, il choisit la ligne qui est sous le titre. Si ça peut vous mettre sur une piste, cette ligne est un < div > HTML affublée d'une class=introduction et d'une règle CSS qui l'affiche en caractères gras (font-weight: bold).
Alain Lesage - Si, il existe bien une doc sur Facebook, mais elle est en anglais : http://developers.facebook.com...e/plugins/like/
Bon succès.
Alain Lesage - Pour ceux qui voudraient aller plus loin, j'ai trouvé cette doc, en anglais toujours... et en code 
http://developers.facebook.com/docs/opengraph/#
Vincent Drapier - bonjour , grace a vous je suis parvenue a inserer sur mon site ( creer avec iweb ) un bouton partage.
ce que j'aimerai savoir c'est comment avoir la petite vignette lorsqu'on partage .
je travail sur iweb .
merci beaucoup
Vincent Drapier - bonjour , grace a vous je suis parvenue a inserer sur mon site ( creer avec iweb ) un bouton partage.
ce que j'aimerai savoir c'est comment avoir la petite vignette lorsqu'on partage .
je travail sur iweb .
merci beaucoup
Alain Lesage - Si vous avez suivi les instructions les plus récentes (dont je fournis les liens dans les commentaires précédents), il vous suffit ensuite d'jouter le meta tag OpenGraph og:image dans le head de votre page web, avec l'hyperlien de l'image que vous voulez afficher dans votre vignette.
