L’extension Flow-Flow de Social Streams permet d’afficher sur votre site internet les publications que vous faites sur vos réseaux sociaux pour composer ce que l’on appelle un « social wall ». Vous proposez ainsi en quelques clics à vos visiteurs un aperçu complet de vos publications sur vos réseaux sociaux.
Le plugin est disponible en version gratuite (limitée à l’affichage de 4 réseaux : Facebook, Twitter, Instagram et Pinterest). La version payante (36$ payable une fois pour toutes) permet de gérer 14 flux : Facebook, Twitter, Instagram, Google+, Pinterest, SoundCloud, LinkedIn, Foursquare, Dribble, YouTube, Vimeo, Flickr, Tumblr, WordPress et Flux RSS.
Sommaire
Autorisez Facebook et Instagram
authentification unifiée depuis février 2021
Étape 1 : Connectez-vous au Tableau de bord de votre site et rendez-vous dans la section Social Apps > Flow-Flow Lite.
Étape 2 : Cliquez sur l’onglet « AUTH » puis accédez à la section « Facebook and Instagram integration« .
Étape 3 : Cliquez sur le bouton « CONNECT » :
Étape 4 : Vous êtes redirigé vers Facebook à vous connecter à votre compte et à accepter l’interaction avec Flow-Flow : sélectionnez votre Page Facebook et, si c’est votre choix, votre compte Instagram, puis suivez les étapes de validation.
Étape 5 : A la fin de cette procédure, vous êtes redirigé sur la page des réglages de Flow-Flow : le code d’authentification du champ « ACCESS TOKEN » sera renseigné.
Sauvegardez en cliquant sur le bouton vert « Save Changes ».
Autorisez Twitter
Récupérez vos clés d’authentification sur Twitter :
- Connectez-vous à Twitter et rendez vous sur cette page : https://apps.twitter.com pour créer une application qui va permettre la connexion entre votre site et votre Twitter.
- Cliquez sur « Create New App »
- Remplissez les champs : Name (ce que vous souhaitez, par exemple Flow-Flow pour mon site) ; Description (une petite phrase qui vous permettra de vous souvenir à quoi sert cette application) ; Website (l’url – l’adresse – du site qui doit recevoir cette autorisation, sous la forme : https://www.mirobolus.fr/)
- Cocher la case de consentement puis validez votre action en cliquant sur le bouton « Create your Twitter application »
- Sur la page suivante, cliquez sur l’onglet « Key Access and Tokens » : vous y trouverez les clés d’authentification à insérer dans la configuration de votre plugin sur votre site.
Insérez vos clés d’authentification dans les réglages de Flow-Flow sur votre site :
- Connectez-vous à votre tableau de bord et rendez-vous dans la section Social Apps > Flow-Flow Lite
- Cliquez sur l’onglet « AUTH » puis accédez à la section qui concerne Twitter
- Copiez-collez les 2 clés « CONSUMER KEY (API KEY) » et « CONSUMER SECRET (API SECRET) » délivrées par Twitter et enregistrez.
Générez l’Access Token
- Retournez sur la page de Twitter, toujours dans l’onglet “Key Access and Tokens”, et cliquez sur le bouton « Create my access token ».
- Copiez les nouveaux codes générés ACCESS TOKEN et ACCESS TOKEN SECRET dans la page de réglages de votre plugin.
Sauvegardez en cliquant sur le bouton vert « Save Changes »
Ajouter un nouveau réseau social
Créez votre fil de publications Facebook
- Rendez vous sur l’onglet “FEEDS”
- Cliquez sur le bouton “CREATE FEED” puis sélectionnez l’icône Facebook
- Vous avez alors le choix entre 3 types de contenus :
- Le contenu d’un profil ou d’une page Facebook public : entrez son identifiant dans le champ “CONTENT TO SHOW”.
Trouver l’identifiant d’un profil Facebook
Trouver l’identifiant d’une Page Facebook
- Le contenu d’un groupe Facebook : entrez son identifiant dans le champ “CONTENT TO SHOW”.
Trouver l’identifiant d’un groupe Facebook
- Un album photo Facebook : entrez son identifiant (album ID) dans le champ “CONTENT TO SHOW”.
Trouver l’identifiant d’un album Facebook
- Le contenu d’un profil ou d’une page Facebook public : entrez son identifiant dans le champ “CONTENT TO SHOW”.
Sauvegardez en cliquant sur le bouton vert « Save Changes »
Créez votre fil de publications Instagram
- Rendez vous sur l’onglet “FEEDS”
- Cliquez sur le bouton “CREATE FEED” puis sélectionnez l’icône Facebook
- Vous avez alors le choix entre 4 types de contenus :
- User feed = les photos d’un compte Instagram : entrez le nom d’utilisateur que vous trouverez dans l’URL du compte Instagram dans le champ “CONTENT TO SHOW”.
- User’s likes = les photos aimées par un utilisateur : entrez le nom d’utilisateur que vous trouverez dans l’URL du compte Instagram dans le champ “CONTENT TO SHOW”.
- Hastag = les publications liées à un hashtag en particulier : entrez le hashtag dans le champ “CONTENT TO SHOW”.
- Location = les publications liées à un lieu : entrez l’identifiant Instagram de ce lieu (voir image ci-dessous) dans le champ “CONTENT TO SHOW”.
Trouver l’identifiant d’un lieu sur Instagram
Sauvegardez en cliquant sur le bouton vert « Save Changes »
Créez votre fil de publications Twitter
- Rendez vous sur l’onglet “FEEDS”
- Cliquez sur le bouton “CREATE FEED” puis sélectionnez l’icône Twitter
- Vous avez alors le choix entre 5 types de contenus :
- Home Timeline = Votre fil Twitter : entrez votre nom d’utilisateur dans le champ “CONTENT TO SHOW”
- User feed = Le fil Twitter d’un autre twittos : entrez son nom d’utilisateur dans le champ “CONTENT TO SHOW”
- Tweets by search = des tweets par hashtag : entrez le hashtag dans le champ “CONTENT TO SHOW”
- User list = Les tweets de la liste d’abonnés d’un twittos : entrez son nom d’utilisateur dans le champ “CONTENT TO SHOW” et le nom de sa liste dans le champ “LIST NAME”.
- Les “likes” d’un twittos : entrez son nom d’utilisateur dans le champ “CONTENT TO SHOW”
Créer un nouveau mur
Maintenant que vous avez authentifié vos propres réseaux, et créé vos flux de contenus, vous pouvez générer un nouveau mur (ou Social Wall) que vous allez insérer dans une page de votre site.
- Rendez vous sur l’onglet “STREAMS”
- Cliquez sur le bouton « CREATE STREAM »
- Donnez-lui un nom pour le reconnaître parmi vos différents streams
- Dans l’onglet « SOURCE », sélectionnez le ou les contenu(s) souhaités
- Parcourez les autres onglets pour modifier l’apparence et les styles de votre nouveau mur
- Rendez vous dans l’onglet « SHORTCODE » pour copier le code généré (sous la forme : ) que vous devrez coller dans un article, une page, ou un module « Code » de DIVI.
Et voilà le résultat !
Dépannage
Si vous constatez des erreurs d’affichage des flux de vos réseaux sociaux déclarés dans l’extension Flow-Flow, il est nécessaire de réinitialiser les autorisations des applications.
Préambule
Connectez-vous aux réseaux sociaux déclarés dans Flow-Flow.
Étape 1 : Réinitialiser les caches
- Dans le Tableau de Bord > Social Apps > Flow-Flow Lite
- Cliquez sur l’onglet « FEEDS »
- Cliquez sur l’icône représentant 3 points en début de la ligne du Flux en erreur, puis cliquez sur « Rebuild cache »
- Vérifiez sur la page qui affiche vos activités si le flux en question apparait de nouveau.
Sinon, passez à l’étape suivante.
Étape 2 : Recréer les authentifications
- Dans le Tableau de Bord > Social Apps > Flow-Flow Lite
- Cliquez sur l’onglet « AUTH »
- Accédez au flux en erreur
- Tentez de rafraichir l’autorisation : cliquez sur le lien REFRESH TOKEN
- Si vous êtes déjà connecté à votre réseau social, l’action est terminée, le lien entre votre site et le réseau social est rétabli.
- Si vous n’êtes pas connecté, une fenêtre vous invitera à vous identifier.
- Si le problème persiste, il vous faut vous reconnecter :
- Cliquez sur le bouton « LOG OUT » (= se déconnecter)
- Cliquez sur le bouton « AUTHORIZE » :
- Si vous êtes déjà connecté à votre réseau social, l’action est terminée, le lien entre votre site et le réseau social est rétabli.
- Si vous n’êtes pas connecté, une fenêtre vous invitera à vous identifier.
ALLER PLUS LOIN…
Tutoriel de Social Apps pour l’authentification à Instagram : https://docs.social-streams.com/article/47-authenticate-with-instagram
Tutoriel de Social Apps pour l’authentification à Facebook : https://docs.social-streams.com/article/46-authenticate-with-facebook
Si le problème se répète trop fréquemment, il sera nécessaire d’effectuer cette authentification avec une méthode Développeur : https://docs.social-streams.com/article/46-authenticate-with-facebook#method2
