Facebook PS Shop Tab. Pré-requis Serveur. Pré-requis Facebook

Transcription

1 Facebook PS Shop Tab Version : Date de dernière mise à jour : 29/12/2011 Développement : Business Tech modules@businesstech.fr Démo : 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 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 et cliquez sur «Créer une application».

2 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 Si vous utilisez un certificat SSL mutualisé, il vous faudra demander l URL à votre hébergeur. Chez OVH, cette URL prend cette forme : - 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 : où arthusshop sera remplacé par le App Namespace que vous aurez choisi dans la configuration). Vous en aurez besoin pour la configuration du module.

3 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» 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.

4 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 : Pour l éditeur «HTML personnalisé», si vous insérez des images, veillez à ce que leur attribut src soit une URL absolue, comme - 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

5 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 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, 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 (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 Presta- Module Le module Facebook PS Shop Tab est compatible avec le module «Ads & Slideshow», version et supérieure, disponible sur 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»

6 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 ])