Facebook PS Shop Tab

Facebook PS Shop Tab
Version : 2.2.7
Date de dernière mise à jour : 29/12/2011
Développement : Business Tech – [email protected]
Démo : http://www.facebook.com/arthusandco
Pré-requis Serveur
La nouvelle authentification Facebook utilise l’extension PHP CURL. La plupart des hébergeurs
supportent cette extension, mais dans le doute, contactez votre hébergeur.
Vous devez aussi avoir un certificat SSL installé sur votre serveur si vous souhaitez que les utilisateurs
Facebook puissent voir votre onglet en mode sécurisé SSL / https. Le module a été testé avec un
certificat SSL mutualisé OVH avec une adresse du type https://ssl10.ovh.net/~mon_username/
Pré-requis Facebook
Vous devez avant tout enregistrer une application sur Facebook afin de la lier à votre module
Prestashop. Cette application sera ensuite installée sur votre page fan Facebook, une fois le module
correctement installé et configuré sur le back-office de Prestashop.
Rendez-vous sur https://developers.facebook.com/apps/ et cliquez sur « Créer une application ».
Utilisez le modèle ci-dessus pour renseigner votre configuration. Remplacez bien sûr
« arthusandco.com » par votre vrai nom de domaine. Pour le « App. namespace » choisissez un nom
court, composé uniquement de lettres minuscules non accentuées (a – z). Ce nom sera utilisé pour
construire votre URL de canevas (vous en aurez besoin à la fin).
Pour « Secure Page Tab URL », mettez bien le préfixe https://. Si vous utilisez un certificat SSL
mutualisé, il vous faudra demander l’URL à votre hébergeur. Chez OVH, cette URL prend cette forme :
https://ssl10.ovh.net/~mon_username/modules/facebookpsshoptab - Le ssl10 peut changer et avoir
un autre suffixe, comme ssl8 ou ssl12 ou autre, selon le serveur sur lequel vous êtes hébergé). Le
mon_username correspond généralement à votre identifiant FTP.
Une fois que vous revenez à l’écran d’accueil de votre application, notez votre Application ID,
Application Secret et adresse de Page de canevas (ex : http://apps.facebook.com/arthusshop où
arthusshop sera remplacé par le App Namespace que vous aurez choisi dans la configuration). Vous
en aurez besoin pour la configuration du module.
Pré-requis Prestashop
Il n’y a qu’un seul pré-requis pour Prestashop : vous devez créer une nouvelle taille d’image de 160
pixels x 160 pixels dans le back-office (sauf si vous avez déjà une taille 160 x 160 disponible). Rendezvous sur l’onglet « Préférences », puis « Images » et créez un nouveau type. Choisissez le nom que
vous voulez. Activez « Produits » et « Catégories ».
160
160
Puis, régénérez vos miniatures.
Installation du module
Comme pour tout autre module, décompressez le .zip et chargez le dossier « facebookpsshoptab »
dans le répertoire « modules » de votre serveur via FTP.
Mettez des droits d’écriture récursifs (propager aux sous-dossiers et fichiers) sur les sous-répertoires
« images » et « home_html ».
Installez le module via le back-office comme d’habitude.
Quelques notes sur la configuration du module
Paramètres application Facebook
Reportez l’Application ID et l’Application Secret précédemment notés.
Les autres paramètres d’application Facebook sont expliqués sur l’écran de configuration.
Paramètres Header et haut de page
Choisissez le modèle existant de meta-tags pour votre module. En toute logique, choisissez
normalement celui de la page d’accueil, « index ».
Paramètres de menu
Certaines boutiques comptent un grand nombre de catégories et sous-catégories. Depuis que
Facebook a modifié la largeur de son layout de 760 pixels à 520 pixels, le menu de catégories a été
placé en haut, sous forme de menu déroulant « suckerfish ». Pour les grosses boutiques, il peut être
nécessaire de limiter la profondeur des sous-catégories à 1 ou 2. C’est à cela que sert la case
« Profondeur max. pour les sous-catégories ».
Si vous êtes dans ce cas et limitez la profondeur des sous-catégories, vous devrez alors également
mettre le réglage « Afficher sous-catégories ? » sur « Oui » dans la section « Paramètres de listes de
catégories et produits » afin que les visiteurs puissent tout de même naviguer dans vos souscatégories.
Paramètres de page d’accueil
Rien de bien compliqué ici, hormis le champ « Lien pour image page d'accueil »
Vous pouvez entrer 2 types de liens ici : un lien relatif à l’application (pages de votre « miniboutique » sur Facebook), ou un lien absolu pointant vers l’extérieur (pages de votre « vraie »
boutique Prestashop).
Sont valides comme liens relatifs à l’application :
./?ctx=best-sales (page meilleures ventes de votre application)
./?ctx=prices-drop (page promotions de votre application)
./?ctx=new-products (page nouveautés de votre application)
./?ctx=category&id_category=xx (une page de catégorie de produits de votre application, en
remplacant xx par l’ID de la catégorie)
Sont valides comme liens absolus externes :
Toute URL pleinement qualifiée comme : http://www.monsite.com/chemin/page.html
Pour l’éditeur « HTML personnalisé », si vous insérez des images, veillez à ce que leur attribut src
soit une URL absolue, comme http://www.monsite.com/modules/facebookpsshoptab/images/img.jpg Si vous insérez des liens, la logique des liens présentée ci-dessus est également applicable.
Paramètres de listes de catégories et produits
Etant donné les CSS de base du module, le nombre de produits par rang en mode d’affichage
« grille » est de 3 par ligne. Pour l’affichage en mode grille, entrez donc un multiple de 3 pour
« Nombre de produits par page ». Pour un affichage en mode « rangs » choisissez ce que vous
voulez, mais pour que la page se charge assez rapidement sur Facebook, évitez de dépasser 10 de
toute façon.
Le paramètre « Afficher sous-catégories ? » peut être réglé sur « Non », « Oui, avec images » ou
« Oui, avec liens texte ». Si vous sélectionnez « Oui, avec liens texte », le module affichera les
produits associés à la catégorie principale, avec des liens texte vers les sous-catégories affichées en
texte en haut de la section de contenu principale. Ceci est lié au réglage « Profondeur max. pour les
sous-catégories » des réglages du menu. Les très grosses boutiques avec de nombreuses catégories
et sous-catégories voudront limiter la profondeur de menu à 1 ou 2 et donner accès aux souscatégories dans la section de contenu principale. Ces options de « Oui » vous donnent simplement le
choix de la présentation. N’hésitez pas à expérimenter avec les réglages pour voir ce qui fonctionne le
mieux pour vous.
Dernière étape : installation de votre application sur votre page Facebook
Il ne vous reste plus qu’à rattacher votre application Facebook à votre page Facebook en tant
qu’onglet.
Rendez-vous à l’adresse
http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
Remplacez YOUR_APP_ID par l’Application ID de votre application précédemment créée et YOUR_URL
par votre URL de canevas (dans notre exemple, http://apps.facebook.com/arthusshop/, mais
« arthusshop » sera remplacé par votre App. Namespace ).
Bravo, c’est fini !
FAQ Technique
Je veux bricoler un peu mon module. Comment faire pour tester facilement ?
Dans la configuration back-office Prestashop du module, désactivez temporairement l’authentification
Facebook. Puis, allez sur http://www.monsite.com/modules/facebookpsshoptab (remplacez
monsite.com par votre site bien sûr).
Pourquoi les pages d’infos boutique s’ouvrent sur mon site Prestashop ?
Les pages infos boutique (pages CMS) créées à la base pour une vraie boutique Prestashop
comportent souvent une mise en page adaptée à la largeur de votre site, plus éventuellement des
classes de style personnalisées, non présentes dans la feuille de style du module. Pour éviter des
problèmes d’affichage potentiels ou de devoir modifier le code HTML des pages CMS, nous avons
décidé d’ouvrir ces pages directement sur votre site.
Note sur la compatibilité avec le module « Ads & Slideshow » de PrestaModule
Le module Facebook PS Shop Tab est compatible avec le module « Ads & Slideshow », version 1.3.2
et supérieure, disponible sur http://addons.prestashop.com/fr/diaporamas/2656-ads-a-slideshow.html
Le fonctionnement est simple : Le module Ads & Slideshow vous permet de créer des slideshows et de
les greffer sur différents hook. En collaboration avec Presta-Module, leur module prend en compte le
hook fbpsstHome de Facebook Shop Tab, qui affiche la page d’accueil de votre onglet Shop Facebook.
Ceci vous permet de remplacer l’image statique JPEG téléchargée via l’écran de configuration du
module Facebook par un slideshow animé, beaucoup plus vendeur.
Pour activer cette fonctionnalité, suivez ces étapes :
1) Achetez et installez le module « Ads & Slideshow »
2) Dans l’écran de configuration du module Facebook, réglez « Afficher image / bannière ? » sur
« Non »
3) Dans le module « Ads and Slideshow », créez votre slideshow dans l’onglet « fbpsstHome »
(référez vous à la documentation d’Ads & Slideshow pour plus d’informations sur ce module)
C’est tout. Le slideshow animé remplacera à présent l’image statique du module Facebook.
Note aux développeurs
Le module implémente 6 nouveaux hooks , sur lesquels il s’autogreffe: fbpsstCore, fbpsstHeader,
fbpsstTop, fbpsstRight, fbpsstHome et fbpsstBottom. Il est donc possible d’empiler d’autres modules
sur chacun de ces hooks (leurs CSS devront en revanche être copiés dans la feuille de style principale
de ce module).
Par ailleurs, le hook fbpsstHome - lui-même exécuté par le hook fbpsstRight – ayant été rendu
indépendant, il est possible de dégreffer le module Facebook PS Shop Tab de ce hook, et de greffer
un nouveau module à la place. Ceci permet aux développeurs de créer de nouveaux mini-modules de
présentation de page d’accueil pour PS Shop Tab, en gardant les autres fonctionnalités du module.
La fonction hookFbpsstRight attend un paramètre $_GET[‘ctx’] pour l’exécution des actions
appropriées. Pour l’instant, seules 4 actions / valeurs de ctx sont implémentées :
-
home (par défaut)
best-sales
prices-drop
new-products
search
category (category attend un paramètre $_GET[‘id_category’])