Aller au contenu principal Aide Panneau de contrôle

360kmh.com

à la vitesse de l'imagination

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 - le 31 mars 2011

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 - le 31 mars 2011

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 - le 31 mars 2011

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 - le 31 mars 2011

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 - le 1er avril 2011

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 - le 1er avril 2011

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 - le 1er avril 2011

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 - le 1er avril 2011

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 :

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 - le 7 avril 2011

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 - le 7 avril 2011

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).


Bertrand - le 7 avril 2011

Merci !

Il n'existerai pas une doc FB à ce sujet ?


Alain Lesage - le 8 avril 2011

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 - le 19 avril 2011

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 - le 11 décembre 2011

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 - le 11 décembre 2011

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 - le 12 décembre 2011

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.


Loic Vicaire - le 27 juillet 2012

bonjour tous le monde,

je suis développeur sur symfony 1.4, j'ai ajouté le bouton partage sur un site. Par contre il y a un problème, quand je demande à partager ma page, il ne m'envoie aucune information que j'ai renseigné dans mes metas.

Auriez-vous une idées ?

Merci d'avance

ciolvic


Alain Lesage - le 27 juillet 2012

Bonjour Loic,

comme je l'indique dans un commentaire ci-dessus, Facebook a beaucoup changé depuis que j'ai écrit ce billet, et tu devrais probablement vérifier à la source : http://developers.facebook.com/docs/plugins/

Désolé d'être si bref, je quitte ce matin pour quelques jours. Bonne chance !