Logo FacebookAvec la mise sur le marché d'Open graph par Facebook, les boutons "J'aime" et autres Fan Box font leur apparition sur un grand nombre de site web.

Base de la stratégie médias sociaux d'une entreprise, la présence sur des réseaux sociaux comme Facebook passe inévitablement par l'intégration sur son site d'éléments tierces mise à disposition par la marque au F bleu.

Icone FacebookAvant-propos

Icone objectifObjectif du tutoriel

  • Créer une intéraction entre Facebook et votre site Joomla

Icone niveauNiveau

  • Intermédiaire

Icone tempDurée

  • 30 minutes

Icone pré-requisPré-requis

  • Maîtriser l'outil Facebook

 

Icone FacebookIntégrer une Fan Box / Like Box sur son site Joomla

Deux solutions simples existent pour parvenir à nos fins.

La première, exclusivement pour un site Joomla 1.5.x, consiste à installer un module Fan Box comme celui proposé dans notre centre de téléchargement puis d'y inscrire sa clé API Facebook ainsi que son identifiant de page Facebook. (http://www.facebook.com/pages/NosyWeb/133875877576)

La seconde, celle que nous allons découvrir ensemble, consiste à récupérer tous les éléments chez Facebook.

Générer sa Fan Box

Pour se faire, rendez-vous sur votre page Facebook en vous connectant à votre compte afin d'avoir l'autorisation de vous rendre dans l'espace "Modifier : Page" de cette page.

Facebook Page

Cliquez ensuite sur Marketing => Un espace J’aime sur votre site web

Facebook Page Marketing

Précisez alors tous les champs renseignés avant de cliquer sur "Get code"

Créer une Like Box / Fan Box facebook

Notez que l'Url de votre page Facebook (Facebook Page URL) est récupérable dans la barre d'adresse de votre navigateur lorsque vous êtes sur la page Facebook mais doit être de la forme : http://www.facebook.com/pages/NosyWeb/133875877576.

L'aperçu sur la droite vous permet d'obtenir le rendu final.

Insérer le code nécessaire sur son site web

En cliquant sur "Get code" vous obtenez 2 codes au choix à insérer dans votre site :

Code Ifram et XFBML facebook

Nous vous conseillons d'insérer le code XFBML. Pour se faire, rien de plus simple, copier-coller le code et rendez-vous dans votre interface de gestion Joomla Extensions => Gestions des modules puis faites "Nouveau" en haut à droite. Une liste apparaît, choisissez alors "HTML personnalisé".

Vous arrivez alors sur la fenêtre suivante :

module HTML personnalisé

Terminez par les points suivants :

  • Donner un titre
  • Activer le module en cochant "Oui"
  • Choissisez la position sur votre template
  • Cliquez sur "Source" ou tout autre bouton vous permettant d'accèder au code (Ex : Basculer l'éditeur)
  • Coller le code Facebook que vous avez copié précédemment

Bravo ! Vous avez réussi à installer une Fan Box / Like Box Facebook sur votre site Internet.

L'auteur : un expert à votre service
Jean-Charles Gautard
Nom : Jean-Charles Gautard
Consultant, formateur et intégrateur web depuis plus de 10 ans, je mets mon expertise digitale au service des professionnels amorçant leur transformation digitale. A la recherche d'une stratégie digitale avec le CMS Joomla ? Besoin de conseils ? d'une formation ? d'un site Internet ou Intranet ? Contactez-nous

Commentaires (4)

This comment was minimized by the moderator on the site

J'adore les astuces et petits trucs....

This comment was minimized by the moderator on the site
Dernière édition du commentaire il y a environ 10 ans par Jean-Charles Gautard Jean-Charles Gautard
This comment was minimized by the moderator on the site

Bonjour, cette démarche est elle valable pour la version 2.5... ?
Merci de votre réponse.

This comment was minimized by the moderator on the site

Bonjour,
Les outils ont évolué, ce tutoriel n'est plus trop d'actualité.
De plus, il existe des modules tout fait sur le JED pour mettre en place sa Fanbox Facebook.

Il n'y a pas encore de commentaire pour cet article.

Ajouter vos commentaires

  1. Insérer un commentaire en tant qu'invité.
Pièces jointes (0 / 3)
Share Your Location
Contact

Scoop.It de NosyWeb

Twitter de NosyWeb

YouTube de NosyWeb

Facebook de NosyWeb

Google+ de NosyWeb

Flux RSS de NosyWeb

Inscription newsletter de NosyWeb