picture picture

Comment ajouter un bouton Facebook sur mon site ?

Logo Facebook

Vous souhaitez ajouter un bouton Facebook à votre site web ou à votre blog pour inviter vos lecteurs à partager ce qu’ils découvrent sur vos pages sur Facebook ? Tout comme les boutons de Tweet, ce sont des duplicateurs d’audience efficaces.

C’est très simple, il existe même sur le site de Facebook une méthode pour récupérer des « bouts de code » à copier-coller…

Ajouter un bouton « Partager sur Facebook »

Il suffit d’inclure:

une balise <a> à l’endroit où vous voulez le bouton
une balise <script> dans le header de la page (ou au même niveau que le bouton si vous préférez) :

<div><a name= "fb_share" type= "button">Partager</a>
<script src= "http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div>

Ce qui donne ceci :

Partager

(Cliquez et connectez vous à votre compte Facebook pour tester)

Par défaut, si vous ne renseignez pas le texte à afficher entre les balises <a>, le texte anglais « Share » apparaîtra.

Il existe plusieurs modes d’attichage des bulles de comptage des clics, elles se paramettrent simplememnt en modifiant l’attribut « type » dans la balise <a> : testez vous-même :

type="box_count" (bouton de 57 * 57 px)
type="button_count" (bouton de 96 * 18 px)
type="button" (bouton de 56 * 18 px)
type="icon_link" (bouton de 51 * 15 px)
type="icon"(bouton de 18 * 15 px)

Pour les flemmards, il existe un assistant de création de boutons sur le site Facebook , mais comme il est tout en anglais je préfère les faire moi même  :cool: !

1 2 3 4

61 Responses to “Comment ajouter un bouton Facebook sur mon site ?”

60 Commentaires

  1. Bartols dit :

    je voudrai mettre un bonton sur ma page facebook comment faire ? très facile!

    Facebook / like box sur la page / pour blog –> http://surlapage.fr/widget/facebook-slider

  2. Presc dit :

    Hello,

    Voici un complément de ce super tuto pour installer le bouton sur vos forums :)

    http://forum.forumactif.com/t280609-facebook-connect#2487815

    Bonne journée et à bientot

  3. MaKulture.com dit :

    Bonjour,

    Je sais pas si vous connaissez sharethis, qui permet de mettre en place un système de partage plus au moins complét … qlq1 l’avait essayer ?

    Je l’ai mis dans l’actualités sur mon site : http://www.makulture.com, le seul souci c’est qu’il propose pas un système d’analyse (quel lien partagé etc…)

  4. josé dit :

    bonjour à vous,
    je voudrai mettre un bonton sur ma page facebook comment faire ?
    merci

  5. Pour tous ceux à qui pourrait intéresser !!
    pour créer un lien de son site vers so fb si le site build ne le propose pas alors
    1- ouvrez la propieté d’une photo ou lettres etc ou il y ai de marqué lien.laissez ouvert vous n’avez pas encore cette adresse de votre lien fb.
    si vous trouvez ça c gagné !!!!
    2- ouvrez un nouvel onglé dans votre navigateur et allez sur votre fb
    3-clic doit sur votre photo de profil par exemple. « tout bêtement »,dans la fênetre qui s’ouvre selectionnez «  »copiez l’adresse du lien «  »
    4- retournez sur votre site et collez là dans la caisse que vous aviez laissé ouverte.
    validez et testez.

  6. webtolosa dit :

    c’est le pb des attributs FB … Il y a une solution lourde mais valide W3C : passe ton lien en javascript. Regarde ici :
    http://forum.webrankinfo.com/validation-xhtml-transitional-t133208.html

  7. Martin dit :

    Bonsoir à vous,
    Merci pour ce script qui permet de partager une page FB à partir d’une page perso.

    J’ai un petit souci cependant: le script ne passe pas la validation W3C, une des raisons est que l’attribut « name » est obsolete; ensuite je pense être obligé d’ajouter l’attribut share_url= »http://www.facebook.com/mapage », qui lui non plus ne passe pas la validation, y’a t’il des solutions svp ?

    Merci d’avance

  8. webtolosa dit :

    regarde ici, il y a des éléments intéressants sur la gestion avancée des dates en PHP : http://julien-pauli.developpez.com/tutoriels/php/dates/
    Bons développements !

  9. BENALI dit :

    Bonjour,
    Je suis un passionné informatique depuis longtemps, je touche un peu en php et java orinté objet.
    Question:
    new DateTime() me donne une erreur en php5, Je n’arrive pas de trouver le problème de ça.
    Pouvez-vous aider? et merci.

  10. Tsiory dit :

    bonjour j’ai reussi a mettre le l’icon j’aime de fb sur un site local mais est-il possible de changer cette icon par un autre?

  11. Bendrole dit :

    Merci en retard car j’avais utilisé ton code mais maintenant il ne fonctionne plus pour moi. Je ne vois que le mot partager.

    Même à cette instant, je regarde l’exemple qui est donner en haut et je ne vois que le mot « partager »

    Suis-je le seul ?

    Merci !

  12. laurent75 dit :

    désolé mais le code d’intégration ne s’affiche pas sur vos pages.

    Partager

  13. laurent75 dit :

    le code d’intégration est le suivant :

    Partager

  14. laurent75 dit :

    bonjour,

    pour ma part, j’ai le bouton partager de facebook sur mes pages « article » qui depuis 2 jours environ ne fonctionne plus. s’agit-il d’un bug temporaire de facebook ?

    J’ai intégré le bouton ainsi dans la page article, soit :

    Partager

    >> exemple : http://www.handicapinfos.com/informer/eyebrain-integre-institut-cerveau-moelle-epiniere-icm_26155.htm

    le bouton n’apparait plus, seule le mot partager est visible sur la page sans l’image du picto facebook.

    quelqu’un a-t-il une idée sur ce problème ? :(
    Merci par avance pour vos réponses,
    laurent75

  15. MiKeY dit :

    Bonjour,

    Tout d’abord, merci pour vos infos qui sont simples et faciles a comprendre.

    Je travaille actuellement sur WordPress et souhaite intégrer un bouton partage Facebook. Jusque là, aucuns soucis. :lol:
    Mais quand on clique sur « partager », le texte de description n’est pas celui que je voudrais faire apparaitre.

    Existe t-il une solution pour changer le texte apparaissant dans la boite « partage »? :?::?:

  16. webtolosa dit :

    @live4ever
    euh… mettre à jour IE ou passer à Firefox/chrome/opera/safari ? :wink:

    Sinon pour le choix de la photo je ne pense pas j’ai l’impression qu’il prend la première qu’il trouve dans le code de la page

  17. live4ever dit :

    Bonjour,
    Merci pour les codes, cela fonctionne très bien.
    J’ai cependant un problème avec internet explorer, cela ne marche pas, il y a juste le mot « Partager ». Comment faire ?
    Autre question, peut-on spécifier la photo à prendre, sinon on en propose plusieurs et notamment les logos de mon site ?
    Merci

  18. Jean-Michel dit :

    Je voudrais insérer ce logo avec web creator 5 pro..
    Je ne sais pas comment faire.
    Merci d’avance

  19. fabrice dit :

    J’ai la réponse, quand on clique sur partage de la page de visulaisation, la photo ne s’affiche pas mais quand on clique sur partage sur le réel lien de la page cela apparait.
    Merci pour le code super.

    Fabrice

  20. fabrice dit :

    Bonjour,

    J’ai trouvé votre tutoriel sympa et les réponses élégantes.
    Je me permet de poser une autre question:
    J’ai insérer votre premier code dans mon word press dans la partie HTML. Je l’ai publier et l’ai testé. Ca a été une réussite mais aprés avoir changé quelques détails du côté Visuel, ca m’a tout bouleversé. J’ai donc tout recommencé et réinsérer le code mais la photo n’apparassait plus lors du partage.
    Vous auriez une explication?
    Merci,
    Fab

One Trackback

  1. […] de 18 * 15 px)Sinon, il existe un assistant de création de boutons sur le site Facebook.Cliquez ici pour lire l’article original The Facebook n'est pas l'auteur de cet article. Cet article est un extrait d'une publication […]

Commentaire

Name

Mail (ne sera pas publié)

Website

Laisser ces deux champs tels quels :
:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: