Comment intégrer un bouton facebook

13 déc. 2017, 13:41

Bonjour,
Je ne pratique plus le php depuis plusieurs années, mais mon site entièrement écrit il y a 10 ans en PHP, fonctionne toujours très bien.
J'aimerais lui adjoindre un bouton Facebook "j'aime" et "partager".
J'ai mis une solution toute prête, qui fonctionne, mais ralenti le site, et surtout ne permet pas d'avoir un aperçu de la page partagée sur son mur Facebook.
Pouvez-vous m'aider, en tenant compte que je ne suis plus très fort en PHP, donc faudra m'expliquer lentement

La difficulté c'est que chaque page à un index genre machin.php?ID=1156 donc çà serait bien de passer par le php pour écrire cet index dans le lien Facebook. Ou alors, mais je rêve sans doute c'est que le lien Facebook contiennent automatiquement le lien sur lequel il y a le bouton... sans le réécrire....
D'avance merci pour une réponse.

13 déc. 2017, 15:15

Bonjour,

3 solutions :
1) Utiliser le configurateur de bouton de Facebook
https://developers.facebook.com/docs/pl ... are-button

2) Utiliser un service tiers comme par exemple AddThis où tu as juste à copier un petit bout de javascript et tes visiteurs pourront partager sur tous les réseaux sociaux et pas que Facebook.
http://www.addthis.com/fr
http://panzi.github.io/SocialSharePrivacy/ (celui ci respecte la vie privée et est recommandée par la CNIL)

3) Faire un bête lien vers l'url suivante où il faudra bien sûr remplacer forum.phpfrance.com par la page de ton choix préalablement url-encodée (via urlencode() en PHP ou encodeURI() en Javascript :
https://www.facebook.com/sharer/sharer. ... france.com

L'avantage des solutions 1 et 2 c'est que tu n'as pas besoin de repréciser l'url de ta page, c'est repris automatiquement.
Pour le 3) tu peux développer ne javascript la récupération de l'url de ta page courante mais ça demande de développer un petit peu.

Et enfin, si tu veux que ton site s'affiche le mieux possible quand il est cité par exemple sur Facebook, il faut ajouter des balises meta opengraph (reconnaissables par le préfixe og:) sur toutes tes pages :

<html>
<head>
  <title>Titre de ta page</title>
    <!-- + d'infos sur Open Graph : https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="https://www.your-domain.com/path/image.jpg" />
</head>
<body>
<!-- Le reste de ta page -->

14 déc. 2017, 11:07

Merci de ta réponse.
Solution 1) c'est celle que j'ai mise en ligne, qui fonctionne, mais qui donne un résultat moche sur un mur FB
2) lien 1 : faut s'inscrire, j'aime pas çà
lien 2 : j'ai mis en place le code 1 dans le head, le code 3 à l'endroit où je veux les boutons. Enregistré, testé (en local).... rien ne s'affiche
3) pas testé, mais j'y connais rien en javascript. Si je récupère l'url en php, Est-ce que çà marchera, genre :
https://www.facebook.com/sharer/sharer.php?u=<? echo $lurldelapage; ?>

enfin, les fameuses balises meta opengraph, je les ai mises en place dans la solution 1, mais apparemment rien ne se passe , exemple
<meta property="og:image" content="lien vers une image quelconque de mon site pour voir" />
n'affiche rien du tout dans mon mur FB.

14 déc. 2017, 11:47

pour la solution 3, ca devrait marcher mais il est conseillé d'utiliser en plus la fonction urlencode() comme suggéré par @rthur
https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($lurldelapage); ?>

EDIT : par défaut php utilise une balise "longue" d'ouverture. la balise courte <? peut être utilisé si la configuration le permet mais sans en être sur, utilise la balise normal <?php

14 déc. 2017, 12:17

En full javascript, tu as juste à intégrer le code suivant où tu veux dans ton doc :

<script>
document.write("<a href='https://www.facebook.com/sharer/sharer.php?u="+encodeURI(document.location)+"' onclick='window.open(this.href, \"popup\",\"width=600,height=400\"); return false;'>Partager sur Facebook</a>");
</script>

Démo fonctionnelle : https://jsfiddle.net/3ecqqf43/

Merci de ta réponse.
Solution 1) c'est celle que j'ai mise en ligne, qui fonctionne, mais qui donne un résultat moche sur un mur FB

Si ça te donne un résultat moche, c'est que tu n'as pas intégré les balises méta opengraph et que Facebook essaye d'extraire automatiquement des infos pertinentes de ta page sans y parvenir.
Cf mon post plus haut pour les balises méta

17 déc. 2017, 12:49

Merci,
Alors y a du mieux mais c'est pas encore çà.
J'utilise la méthode https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($lurldelapage); ?>
quand je clique sur le lien çà me met un aperçu de ce que çà va donner sur FB, et cette fois le meta opengraph marche avec la photo choisie.
mais quand je clique sur "partager sur Facebook", çà bloque, rien ne se passe, apparemment il y a un problème de fermeture de cet aperçu (le lien se termine par un close vide).
Je ferme cette page bloquée.
J'ouvre Facebook, et là çà a marché, l'article est bien paru avec l'image.
Donc 1er problème : pourquoi çà plante au moment de publier ?
second problème : çà m'embête cette histoire de choisir une image pour tout le site avec meta opengraph, car on doit mettre la balise dans le head, et à ce moment là du code j'ai pas encore programmé d'image à afficher, çà va être trop galère à changer.
L'idéal serait d'afficher une capture d'écran de la page partagée, mais çà doit pas exister ?

17 déc. 2017, 14:29

mais quand je clique sur "partager sur Facebook", çà bloque, rien ne se passe, apparemment il y a un problème de fermeture de cet aperçu (le lien se termine par un close vide).

Quel est le message d'erreur exact et où s'affiche-t-il ?

Tu peux valider que ton HTML soit correct en utilisant le validateur du W3c : https://validator.w3.org/

second problème : çà m'embête cette histoire de choisir une image pour tout le site avec meta opengraph, car on doit mettre la balise dans le head, et à ce moment là du code j'ai pas encore programmé d'image à afficher, çà va être trop galère à changer.

Si tu n'indique pas de balises opengraph alors Facebook va essayer de trouver automatiquement une image dans ta page qu'il pourrait utiliser.
C'est Facebook qui cherche une image qui pourrait convenir et les règles ne sont pas précisées. Pour avoir + de chance que ça fonctionne, il faut que l'image soit relativement grande, en début de page et que ton HTML soit correctement formé (cf validateur W3c cité plus haut)

19 déc. 2017, 12:57

Il n'y a pas de message d'erreur,
Mais quand on clique sur mon bouton partager, çà ouvre une page "partager sur Facebook", je clique sur le bouton en bas à droite "Publier sur Facebook" et là çà ouvre une page blanche où rien ne se passe, son url est https://www.facebook.com/dialog/return/close#_=_
Je ferme, et çà a marché quand même sur mon mur FB.
Sauf que j'avais un espoir, comme tu dis, qu'en enlevant la balise opengraph, FB afficherait ne serait-ce qu'une image de la page partagée, hélas, on revient comme dans la situation précédente, aucune image n'est affichée, c'est moche.
Donc j'ai toujours les 2 même problèmes...

19 déc. 2017, 13:13

Ha pi pour le vérificateur de code, c'est la première fois que l'on m'en parle, je viens d'essayer.
Il trouve 138 erreurs !
mais je suis perplexe, car par exemple il me trouve çà comme erreur :

Line 14, Column 30: required attribute "TYPE" not specified <script language="JavaScript">

C'est un peu exagéré, non ?

19 déc. 2017, 13:31

je clique sur le bouton en bas à droite "Publier sur Facebook" et là çà ouvre une page blanche où rien ne se passe, son url est https://www.facebook.com/dialog/return/close#_=_

Alors effectivement Facebook a changé son fonctionnement et ne ferme plus automatiquement la popup.
La solution, trouvée sur le net est de rajouter dans ton lien le paramètre &redirect_uri= en indiquant ensuite l'url d'une de tes page qui fait fermer la popup.
Je n'ai pas testé toutefois.

Sauf que j'avais un espoir, comme tu dis, qu'en enlevant la balise opengraph, FB afficherait ne serait-ce qu'une image de la page partagée, hélas, on revient comme dans la situation précédente, aucune image n'est affichée, c'est moche.

Y a-t-il une image de grande taille dans ta page que facebook pourrait récupérer pour illustrer ta page ?
Si non, alors c'est normal qu'il n'y ait pas d'image d'illustration.
Si oui, alors il faut que tu vérifies que ton HTML soit correct.

Ha pi pour le vérificateur de code, c'est la première fois que l'on m'en parle, je viens d'essayer.

C'est pourtant la base pour vérifier que son code HTML est correct et pour développer le plus proprement possible.

mais je suis perplexe, car par exemple il me trouve çà comme erreur :
Line 14, Column 30: required attribute "TYPE" not specified <script language="JavaScript">

C'est un peu exagéré, non ?

Non ce n'est pas exagéré.
Quand on développe il y a des règles a respectée pour que ça fonctionne bien sur tous les navigateurs.
Chaque navigateur est plus ou moins permissif en fonction des erreurs que tu mets dans ton code, mais pour que tout fonctionne au mieux il est préférable de tendre vers le 0 erreurs au validateur du W3c, ou tout du moins si tu as encore des erreurs, de bien les comprendre pour être sûr de volontairement les laisser

22 déc. 2017, 18:47

je clique sur le bouton en bas à droite "Publier sur Facebook" et là çà ouvre une page blanche où rien ne se passe, son url est https://www.facebook.com/dialog/return/close#_=_
Alors effectivement Facebook a changé son fonctionnement et ne ferme plus automatiquement la popup.
La solution, trouvée sur le net est de rajouter dans ton lien le paramètre &redirect_uri= en indiquant ensuite l'url d'une de tes page qui fait fermer la popup.
Je n'ai pas testé toutefois.

Toujours pas.
Mais j'ai peut-être mal codé : <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($url)."&redirect_uri=".urlencode($url); ?>"><img src="images/partager-facebook.png" width="25" height="25"></a>

22 déc. 2017, 18:54

Sauf que j'avais un espoir, comme tu dis, qu'en enlevant la balise opengraph, FB afficherait ne serait-ce qu'une image de la page partagée, hélas, on revient comme dans la situation précédente, aucune image n'est affichée, c'est moche.
Y a-t-il une image de grande taille dans ta page que facebook pourrait récupérer pour illustrer ta page ?
Si non, alors c'est normal qu'il n'y ait pas d'image d'illustration.
Si oui, alors il faut que tu vérifies que ton HTML soit correct.

Oui, mes pages sont pleines de photos de grandes tailles, seulement voilà, toutes les photos sont générées en PHP/MYSQL
et peut-être que çà marche pas car les balises meta property=og sont écrites dans le head donc au tout début du code à un moment où il n'y a pas encore de photos, ou alors seconde possibilité, en enlevant la balise meta property=og, et à l'endroit où je mets mon bouton "partager sur Facebook", là non plus à ce moment du code aucune image n'est générée...

22 déc. 2017, 20:30

On ne peut pas + t'aider, que de te redire la même chose :
- soit tu indiques une image avec la balise meta og
- soit Facebook essayera d'en récupérer une dans ta page automatiquement

Dans ton cas, Facebook n'arrive pas à en récupérer une automatiquement, la raison n'est connue que par Facebook, la plus probable est que ta page n'est pas codée proprement.

Donc tu as 2 solutions :
1) soit tu te débrouille pour mettre une image dans la balise meta og, et là tu à 100% de chance que ça fonctionnera
2) soit tu corriges ton HTML pour qu'il soit correct, et je dirai que tu as 70% de chance que ça marche (les 30% d'incertitudes sont liés au fait que Facebook n'indique pas comment fonctionne sa récupération automatique de photo)

Comment intégrer un bouton facebook

Qui est en ligne