Module - Facebook PS Connect - margauxlonnberg.com · Page 2 / 25 9, Rue Paul Cézanne, Sophia Antipolis, 06560 Valbonne – Tél : +33 (0)8 99 25 33 35 S.A.R.L au capital de 7.625

Page 1 / 25 9, Rue Paul Cézanne, Sophia Antipolis, 06560 Valbonne – Tél : +33 (0)8 99 25 33 35 9, Rue Paul Cézanne, Sophia Antipolis, 06560 Valbonne – Tél : +33 (0)8 99 25 33 35

S.A.R.L au capital de 7.625 Euros – RCS Grasse 450 947 106 – TVA : FR 814 509 471 06

Module - Facebook PS Connect Date : 07 Janvier 2014 Service Business Tech : Installation & Personnalisation Si vous avez besoin d’une assistance, nous pouvons vous fournir une installation complète que vous pourrez acheter sur notre boutique d’Addons :

• http://prestashop-modules.businesstech.fr/fr/installation-service/14-installation-and-configuration-service.html

IMPORTANT : N’oubliez pas de sélectionner le bon nom de module dans le menu déroulant.



Table des matières

Objet du Module 2

Description Technique 2

Pré-requis serveur 2

Installation du module 2

Configuration du module 2

Créer une application Facebook 2

Créer une application Twitter 2

Créer une application Google 2

Créer une application Paypal 2

Paramètres de base 2

Proposer l'association de compte Facebook / Prestashop au login Standard : 2

Afficher le bloc login client : 2

Gérer les connecteurs 2

Gérer les Hooks 2

Etat de santé du système 2

Visualisation du Module 2

Note aux Développeurs 2

Astuces 2

Fonctionnelles 2



Techniques 3 Objet du Module Un système complet d’authentification sur votre boutique via les principaux réseaux sociaux : Facebook, Twitter, Google + Paypal. En plus de vous connecter via un réseau social, il vous permet aussi d’associer le compte Prestashop existant de vos clients à leur compte Facebook. Le gros avantage de ce module est aussi de récolter les informations relatives à vos produits selon les envies de vos clients, que cela soit d’aimer ou de vouloir un produit. Le Module «Facebook PS Connect» vous permettra de configurer tous vos boutons de connexion: - à partir d’une interface intuitive et complète. - d’ordonner vos boutons de connexion par «Hook». - avec une intégration idéale des boutons de connexion dans les zones d’affichage

stratégiques de votre boutique. Ainsi, il permettra à vos clients une authentification rapide sur votre boutique, en plus d’enregistrer le comportement social de vos clients. Description Technique Version : 1.3.0 Date de dernière à jour : 22/11/2013 Développement : Business Tech – http://www.businesstech.fr/fr/contactez-nous Démo : http://prestashop-demo.businesstech.fr/admin-demo/index.php E-mail : [email protected] Mot de passe : demodemo Pré-requis serveur Version minimale : Prestashop 1.2. Serveur Web : doit renseigner 2 clés dans la variable «$_SERVER» : - ‘HTTP_HOST’ - ‘REQUEST_URI’ Installation du module Comme pour tout autre module, décompressez le .zip et chargez le dossier « facebookpsconnect » dans le répertoire « modules » de votre serveur via FTP.



Installez le module via le back-office comme d’habitude Configuration du module Au préalable, vous devez avoir créé un compte personnel sur chaque réseau que vous voudrez ajouter. En plus d’un compte, il va vous falloir créer une application pour chaque réseau utilisé. Créer une application Facebook Pour créer une application sur Facebook, vous devez absolument être connecté avec un compte personnel Facebook et non avec un compte page Fan. Ensuite rendez-vous à l’adresse suivante : https://developers.facebook.com/apps/ La procédure qui suit utilise l’ancien visuel de la plateforme developers.facebook.com, si vous souhaitez suivre la procédure de création d’app Facebook avec le nouveau visuel, suivez ce lien : http://faq.businesstech.fr/faq.php?id=71&lg=fr

Cliquez sur « créer une nouvelle application » Saisissez le nom technique de votre application :



Ensuite, veuillez renseigner le nom de domaine de votre boutique et l’URL du site (website with facebook login) :



ATTENTION : n’oubliez surtout pas de désactiver le mode bac à sable Sauvegardez et votre application est prête à être utilisée. Vous aurez besoin de l’app ID et du app secret pour la configuration du connecteur.



Créer une application Twitter Pour créer une application sur Twitter, vous devez absolument être connecté avec un compte personnel Twitter. Ensuite rendez-vous à l’adresse suivante : https://dev.twitter.com/apps/

Cliquez sur « Create New App»

Saisissez le nom technique et le nom de domaine de votre boutique pour votre application : Ne pas saisir l’url de callback ( elle sera renseignée une fois la première étape validée) Cocher la case “ Yes agree “



Cliquer sur “ Create your twitter application ” Cliquer sur “ Acess Level “



Choisir « Read and Write » et cliquer sur « Update Setting »

Cliquer sur “ Settings “ et saisir la “callback url “ : http://www.monsite.com/modules/facebookpsconnect/twitter-callback.php

Page 10 / 25 9, Rue Paul Cézanne, Sophia Antipolis, 06560 Valbonne – Tél : +33 (0)8 99 25 33 35


Ne pas oublier de cocher

Après avoir sauvegardé, retournez sur l’onglet « Api Keys »

Vous devez récupérer :

- API Key - API Secret

Ces informations seront à renseigner dans la configuration du connecteur dans le back-office du module. ATTENTION EN COPIANT LES INFORMATIONS : Il arrive qu’un espace soit copié comme le montre l’image ci-dessous.

Vous devez avoir le cas suivant



Créer une application Google Pour créer une application (project) sur Google, vous devez absolument être connecté avec un compte personnel Google. Ensuite rendez-vous à l’adresse suivante : https://code.google.com/apis/console/ Si vous souhaitez utiliser l’ancienne console Google API, suivre les recommandations de l’image ci-dessous :

Une fois que vous arrivez à cet écran, cliquez sur « API Project » en haut à gauche, puis dans le menu déroulant sur « Create ».

Après avoir créé l’application, créez votre OAuth client Id :



Renseignez les informations liées à votre boutique :



Ensuite vous obtiendrez cet écran :

Cliquez sur « edit settings » à droite de votre écran pour obtenir ceci et changer l’URL de callback :



callback : http://www.monsite.com/modules/facebookpsconnect/google-callback.php Mettez à jour les informations ci-dessus. Vous aurez besoin du « project number », du client ID et du client secret pour la configuration du connecteur.



Créer une application Paypal Pour créer une application sur Paypal, vous devez absolument être connecté avec un compte personnel Paypal. Ensuite rendez-vous à l’adresse suivante : https://developer.paypal.com/webapps/developer/applications



Premier écran de création de compte :

callback : http://www.monsite.com/modules/facebookpsconnect/paypal-callback.php



Deuxième écran :

Veuillez sélectionner les droits demandés par l’application tels qu’ils sont sélectionnés ci-dessus.



Une fois l’application créée vous obtiendrez ceci :

Vous aurez besoin du client ID et client secret pour la configuration du connecteur. Paramètres de base



Proposer l'association de compte Facebook / Prestashop au login Standard : Si vous activez cette option, au moment de la connexion classique sur votre boutique, vos clients se verront proposer une petite fenêtre leur offrant la possibilité d’associer le compte Facebook à leur compte Prestashop. Afficher le bloc login client : Si vous activez cette option, vous verrez apparaître un bloc login client dans l’une des 2 colonnes si vous avez configuré les hooks colonne gauche et droite. Tout est expliqué dans le texte à côté de l’option. Tester CURL SSL Avant de faire la configuration du module vous devez tester cURL avec SSL, dans l’onglet « Prérequis ».

Seul Facebook peut fonctionner sans cURL SSL, à condition d’avoir sélectionné une méthode de connexion dans l’onglet « Paramètre de base »



Gérer les connecteurs Par défaut, vous aurez cet écran :

Cela vous indique la liste des connecteurs utilisables dans le module avec leur état de configuration (le connecteur lui-même + les hooks dans lesquels il a été ajouté). En cliquant sur le bouton «Editer», vous pourrez configurer tous vos connecteurs. Chaque formulaire apparaitra dans une pop-up comme suit :

Vous devrez récupérer l’app ID et secret via l’URL que vous avez saisie préalablement pour la création de votre application Facebook. Idem pour chaque bouton de réseau.



Cliquez sur «Mettre à jour» après avoir rempli les champs souhaités. Votre connecteur sera mis à jour ainsi que son état dans la liste des connecteurs.

Gérer les Hooks ( Attention avec Prestashop 1.6 les HOOKS « Block user info » et « right column » n’existent plus ) Par défaut, vous aurez cet écran :

Cela vous indique la liste des hooks utilisables dans le module avec leur état de configuration (le hook lui-même + les connecteurs qui lui ont été ajoutés). En cliquant sur le bouton «Editer», vous pourrez configurer tous les Hooks de la liste. Chaque formulaire apparaitra dans une pop-up comme suit :



Vous pouvez déplacer les connecteurs avec le «drag & drop». Une fois ajoutés dans la liste «connecteurs actifs», vous pouvez les classer de haut en bas avec le «drag & drop». Cliquez sur «Mettre à jour» après avoir ajouté les connecteurs souhaités. Votre Hook sera mis à jour ainsi que son état dans la liste des Hooks.



Visualisation du Module





Note aux Développeurs Astuces Fonctionnelles Utilisez à bon escient l’affichage des boutons sur votre boutique pour équilibrer le visuel des boutons. Techniques Chaque classe métier utilisée dans lib/admin ou lib/hook doit retourner un tableau associatif : ‘tpl’ => nom du template à utiliser ‘assign’ valeurs assignées à smarty Ainsi, la fonction d’affichage displayModule() centralise l’affichage.

Documents

Module - Facebook PS Connect - margauxlonnberg.com · Page 2 / 25 9, Rue Paul Cézanne, Sophia Antipolis, 06560 Valbonne – Tél : +33 (0)8 99 25 33 35 S.A.R.L au capital de 7.625