Plugin WordPress Facebook Like : WP FB Like this

By | avril 26, 2010 at 26 04 10 | 134 comments | Plugins, Wordpress | Tags: , ,

English version below ↓

Facebook a annoncé la semaine dernière l’évolution de son fameux bouton « J’aime » / « I like ». Effectivement, cette option était jusqu’à présent disponible uniquement sur la plateforme. La grande nouveauté est que vous pouvez ajouter ce bouton directement sur votre site / blog. Ainsi, dès que votre lecteur aime un article, il peut le faire savoir à toute sa communauté grâce à un simple clic.

Version courante : 0.3

Nouveau ! Maintenant en français !

Afin de faciliter l’intégration de cette nouvelle fonctionnalité, nous avons mis en place un plugin WordPress. Voici les étapes à suivre pour l’installation.

La partie Facebook n’est pas nécessaire ni disponible pour le moment, passez directement à l’étape WordPress, ci-dessous.

Première partie : côté Facebook

  1. Commencez par créer une application pour votre blog. Pas de panique, c’est très simple ! Vous pouvez le faire en vous rendant sur la page des développeurs Facebook : http://www.facebook.com/developers/apps.php
  2. Cliquez en haut à droite « Créer une application »
    screenshot4 Plugin Wordpress Facebook Like : WP FB Like this
  3. Donnez un nom à votre application. Mettez le nom de votre blog par exemple.
    screenshot5 620x342 Plugin Wordpress Facebook Like : WP FB Like this
  4. Indiquez un mail de contact et de support, ça peut être le même, le votre. Mais c’est pour la forme plus qu’autre chose.
    screenshot6 620x125 Plugin Wordpress Facebook Like : WP FB Like this
  5. Indiquez une langue pour votre « application », cela servira pour les boites de dialogue
  6. Dans l’onglet « Connexion », renseignez l’ »URL Connect » qui sera l’adresse principale de votre blog : http://www.monblog.com
    screenshot7 620x272 Plugin Wordpress Facebook Like : WP FB Like this
  7. Dans ce même onglet, renseignez le « Domaine de base », qui est le nom de domaine de votre blog. Ex : monblog.com
  8. Cliquez en bas sur « Enregistrer les modifications ».
  9. Une fois de retour sur la page de gestion de vos applications, copiez le numéro « ID de l’application » qui est rapporté à votre blog.
    screenshot8 Plugin Wordpress Facebook Like : WP FB Like this

2ème partie : la partie plugin, c’est simple :

  1. Téléchargez le plugin ou cherchez-le dans le répertoire des plugins WordPress à partir de votre admin
  2. Uploadez le sur votre serveur (dans le répertoire /wp-content/plugins/) ou procédez à l’installation automatique si vous êtes passés par l’admin
  3. Activez le plugin
  4. Allez sur la page Réglages > WP-FBLikeThis
  5. Dans « Facebook app ID », rentrez l’ID de votre application que vous aviez précédemment créée (étape 9)
  6. Réglez les paramètres d’affichage du widget pour coller à votre blog (facultatif)
  7. Modifiez votre CSS pour faire afficher le widget comme vous le souhaitez (facultatif)
    screenshot21 Plugin Wordpress Facebook Like : WP FB Like this
  8. Enregistrez les paramètres
  9. Retournez sur votre blog : vous devez voir apparaître un bouton « J’aime » à la fin de vos articles quand ils sont affichés en entierscreenshot1 Plugin Wordpress Facebook Like : WP FB Like this

A savoir : quand vous allez « aimer » un article, cela apparaîtra sur votre mur sous cette forme :
screenshot3 Plugin Wordpress Facebook Like : WP FB Like this

Le 1er lien étant le titre et le permalien vers l’article, et le 2nd le nom de votre blog et un lien vers celui-ci. Plutôt sympa, hein ?

Voilà quelques captures (merci à Marion pour avoir béta-testé la bête) :

N’hésitez pas à nous faire part de vos suggestions dans les commentaires, le plugin va évoluer et nous restons à votre écoute !

Télécharger le plugin WP – Facebook Like This


English version

Facebook announced the well-known « I like » button last evolution last week. You could only « like » something on Facebook platform. The great news is that you’re allowed to add this button on YOUR website / blog. So each time someone is « liking » a post, he can spread it to his community within a click.

Current version : 0.3

In order to make the embedding of  this new functionnality easier, we developped a plugin for your WordPress blog. You’ll find below the install steps to follow.

Facebook part is neither necessary and available yet. Skip to WordPress step below.

First part: Facebook side

  1. First, you have to create a Facebook app for your blog. No panic: it’s very simple! You can do it by visiting the Facebook developers page: http://www.facebook.com/developers/apps.php
  2. Click on the upper right of this page on « Create an application »
    screenshot4 Plugin Wordpress Facebook Like : WP FB Like this
  3. Give a name to your application. Fill it with the name of your blog for example.
    screenshot5 620x342 Plugin Wordpress Facebook Like : WP FB Like this
  4. Fill in a contact and support mail. It can be the same, yours for example. It’s just used for reference.
    screenshot6 620x125 Plugin Wordpress Facebook Like : WP FB Like this
  5. Fill in a lang for your application. That’ll be used for the dialog boxes.
  6. In the « Connection » tab, fill in the « Connect URL » which will be the main url of your blog, ie: http://www.myblog.com
    screenshot7 620x272 Plugin Wordpress Facebook Like : WP FB Like this
  7. In this very same tab, fill in the « Base domain » which is the domain name of your blog. Ex: myblog.com
  8. Click on the bottom of the page on « Save modifications »
  9. Once you’re back on your main apps management page, copy the « Application ID » which is used for your blog settings (see below)
    screenshot8 Plugin Wordpress Facebook Like : WP FB Like this

2nd part: WordPress side:

  1. Download the plugin or find it in WordPress plugins repository from your admin page
  2. Upload it on your FTP (in /wp-content/plugins/ folder) or proceed to automatic installation
  3. Activate the plugin
  4. Go to Settings > WP-FBLikeThis
  5. In « Facebook app ID » you can now fill in the previously generated app ID (step 9 above)
  6. Setup plugin display parameters to fit to your blog layout (optional)
  7. Modify your CSS file to maket the plugin show the way you want (optional)
    screenshot21 Plugin Wordpress Facebook Like : WP FB Like this
  8. Save settings
  9. Go back to your blog: you can now see a « I like » button at the end of your posts when they are fully displayed
    screenshot1 Plugin Wordpress Facebook Like : WP FB Like this

NB: when you’ll « like » a post, it will be displayed on your wall this way:
screenshot3 Plugin Wordpress Facebook Like : WP FB Like this

1st link is the title and the permalink to the post and the 2nd one the name of your blog and a link to it. Preatty neat uh?

Don’t hesitate to give us your suggestions in comments! This plugin is going to evolve and you’re gonna be a part of it!

Download WP – Facebook Like This plugin

Like it? Tweet it!

About the Author

Tim

134 Comments

  1. travail a domicile (1 year ago)

    je vous remercie pour cette info . je vais l’essayer pour mes blogs.

  2. tchat (12 months ago)

    Merci pour ce tuto!

  3. samsung galaxy s2 (11 months ago)

    Ca fait deux heures que je cherche un plugin pour faire exactement ça ! Merci veaucoup !

  4. Carla (11 months ago)

    My Facebook Like button is not showing up at all today. Is there a problem with it? I really need it, as I made it part of a contest. Thanks for the great plugin!

  5. rencontre (11 months ago)

    Bonjour, Sympa ce bouton en effet, il va falloir que j’en mette un ^^ Par contre est il possible de trouver ce plug in pour PluXML ? Je n’arrive pas à mettre la main dessus. Peut être un développeur indépendant pourrait se lancer dans la conception de ce bouton pour ce type de blog ?

  6. Blog de Fille (10 months ago)

    Merci pour ce plugin , justement je le cherchais !

  7. Cours à domicile (10 months ago)

    Je l’utilise et je le recommande !

  8. retraite complementaire (10 months ago)

    c’est un très bon tuto pour les newbies comme moi

  9. Sourcing Services (10 months ago)

    Merci pour le plugin, c’est très sympa. Je vais le mettre sur mon site

  10. Recruitment Consultants UAE Dubai Abu Dhabi (10 months ago)

    Vraiment cool et didactique!

  11. euroleague basket (10 months ago)

    Merci pour ce tuto
    Par contre moi j’ai un « soyez le premier à liker… » comment puis-je l’enlever ?

    Merci d’avance

  12. xperia arc (10 months ago)

    Excellent je cherchais justement ce plugin. Merci !

  13. Fußball (10 months ago)

    Thanks a lot for this plugin. Its just what I was looking for.

    Would be good if you could include twitter as well :)

  14. cfa test (10 months ago)

    Il faut donc toujours préfixer une classe par une balise (et se souvenir qu’il faut commencer par un ID) :
    var active_light = $(‘#traffic_light input.on’);
    Note : Le sélecteur de classe est l’un des plus lents dans jQuery, sous Internet Explorer il boucle sur le DOM complet. Evitez de l’utiliser chaque fois que c’est possible.

  15. google (10 months ago)

    I’m writing to make you know of the amazing discovery my cousin’s daughter obtained using your site. She realized so many things, which included what it is like to have a marvelous helping heart to make a number of people without hassle thoroughly grasp selected impossible subject areas. You actually surpassed visitors’ desires. I appreciate you for offering the insightful, trustworthy, explanatory and also cool guidance on this topic to Julie.

  16. Facebook Like Review by Best Plugins for Wordpress (10 months ago)

    [...] your blog, it automatically posts it as shared with your Facebook profile picture on the thumbnail. Facebook Like WordPress plugin is capable of sharing your link via user’s friend news feeds. This helps [...]

  17. konzerttickets (10 months ago)

    Nice, I will try this for my Worpress Blog, Merci pour ce tuto!

  18. rencontre (10 months ago)

    Il est bien réussi votre tutoriel , merci beaucoup

  19. Petite mise à jour | Just Sln (10 months ago)

    [...] l’ai trouvé sympa et après recherches je suis tombé sur Le journal du Blog qui propose ce petit plug-in. Donc le voilà un nouveau petit plug-in bien sympa, puisque les seul utilisant le « add [...]

  20. chatroulette (9 months ago)

    Merci pour le tuto!

  21. Adnan Hodzic (9 months ago)

    In case you want to get rid of this plugin and you de-activate it, only a header of your index page will be displayed.

  22. Rebbecca Mehdizadeh (9 months ago)

    This blog seems to get a great deal of visitors. How do you promote it? It gives a nice unique twist on things. I guess having something useful or substantial to say is the most important thing.

  23. dvd sex (9 months ago)

    There was clearly this period when i was bored to death reading through other’s viewpoints as well as mind through their blog site. But merely before long once i got right here on your posts, the interest of reading and also smiling on peoples’ daily post seem to come back, my personal fascination has actually peaked once again all thanks to you actually my friend. I think you will continue doing this a long time. Good job my friend.

  24. parfumerie en ligne (8 months ago)

    Perso une ligne de code et c’est réglé

  25. tchatche (7 months ago)

    Merci pour ce tutoriel

  26. rencontre (7 months ago)

    Super, ce tuto est vraiment très utile, je vous en remercie !

  27. tchatche (7 months ago)

    ça résume bien ce que je pensais

  28. chat (7 months ago)

    facebook partout en ettend que ça

  29. rencontre coquine (6 months ago)

    Il y a que sa FB , FB , c’est bon oh..

  30. iPhone 5 (5 months ago)

    Super tutoriel merci beaucoup pour toutes ces infos je vais aller essayer tout de suite de l’installer

  31. wholesale mac makeup (5 months ago)

    Legend dictates that in 1477, a lovestruck Austrian, Archduke Maximilian, came up with a gem of an idea: why not give Mary of Burgundy a diamond ring to celebrate their imminent engagement? He placed it on the third finger of her left hand – the finger believed by ancient Egyptians to have a vein that led straight to the heart in circumstance you need to moisturize your skin, coupled using the optimistic factors of excellent coloring make-up collection from the Mac could possibly be considered a merchandise or service, you can possibly need to determine Mac make-up Wholesale right here to acquire your Mac make-up discount coupons

  32. Maroc (3 months ago)

    Je vais tester ça, merci bien pour cette astuce :)

  33. mac cosmetics (2 months ago)

    writing to make you know of the amazing discovery my cousin’s daughter obtained using your site. She realized so many things, which included what it is like to have a marvelous helping heart to make a number of people without hassle thoroughly grasp selected impossible subject areas.

  34. jeux de mafia (4 weeks ago)

    C’est pas mal mais c’est vrai qu’on voit du facebook partout même à la tv et les grandes chaines en parlent!

Comments

© 2011 WideZine. All rights reserved.