WPMarmite

Flow-Flow : Comment créer un “social wall” sur WordPress

Récemment, un lecteur nous a écrit pour partager l’une de ses expériences. Voici le topo : son gendre, plombier-chauffagiste, avait besoin d’un site pour attirer des prospects depuis Internet.

Notre lecteur lui a donc créé un superbe site WordPress. Seulement, voilà le problème qu’il rencontrait : son gendre, très occupé avec les nombreuses prestations qu’il avait à délivrer, préférait alimenter ses pages Facebook que son site web.

Plus pratique, plus rapide, plus intuitif que WordPress, ce réseau social était son seul vecteur de communication.

Dommage ! pensait son beau-père ; c’est pourquoi il nous avait demandé si nous n’avions pas, dans notre astucieuse Marmite, un plugin qui pourrait lui permettre de diffuser ces publications Social Media sur son site web… mais en les choisissant précisément ! (Pas question de diffuser ses statuts et photos personnelles, tout de même !)

C’est vrai ça : pourquoi laisser ses réseaux sociaux cachés derrière des boutons basiques, peu attractifs ? Il y aurait de nombreux bénéfices à diffuser ces publications directement sur son site :

Ça nous intriguait bien. Du coup, nous avons creusé la problématique, et nous avons trouvé le Saint Graal du Social Media pour WordPress : le plugin Flow-Flow (aff), qui permet de créer un “Social Wall”, soit un bloc qui diffuse les contenus publiés depuis divers réseaux sociaux.

flow-flow-plugin-social-wall-wordpress

La version gratuite vous permet d’intégrer des publications provenant de Facebook, Twitter et Instagram. La version payante, quant à elle, propose une palette de réseaux sociaux supplémentaires impressionnante :

Comme on voulait vous montrer ce que la version payante (à 39$ sur CodeCanyon) avait dans le ventre, voici un tutoriel complet pour créer votre premier “mur social”, en y incluant également vos publications sur YouTube.

En 4 étapes-clés, vous allez aujourd’hui apprendre à créer un Social Wall dynamique, engageant et personnalisé. Prêt ? Partons donc sur le sommaire !

Étape 1 : Autoriser la récupération de vos fils réseaux sociaux

Il s’agit dans un premier temps d’autoriser toutes les API des réseaux sociaux dont vous souhaitez diffuser les publications sur votre Social Wall.

Note pour les curieux : Une API est la partie d’un programme informatique qui est en libre accès pour tous ceux qui ont un accès valide, et que l’on peut manipuler pour créer une nouvelle manière d’utiliser une application. En l’occurrence, ici, nous allons remanier les API des réseaux sociaux pour en intégrer les publications sur votre site WordPress.

Commencez par cliquer sur “Social Apps” dans la barre de gauche de votre administration WordPress, puis sur “Flow-Flow”

Rendez-vous ensuite dans l’onglet “AUTH” du Plugin.

Allez, c’est parti pour paramétrer vos comptes réseaux sociaux. C’est la partie la plus technique mais pas de panique : ensuite, tout le côté ludique commence !

1.1 Pour Twitter

Rendez-vous sur https://apps.twitter.com et connectez-vous à votre compte Twitter si ce n’est pas fait. Puis cliquez sur le bouton “Create New App”.

Sur la page qui s’affiche, renseignez le nom de votre application, et décrivez-la rapidement. Ce nom importe peu : il vous permettra uniquement de repérer qu’il s’agit du plugin Flow-Flow pour votre WordPress ; ne vous creusez donc pas trop la tête.

Renseignez soigneusement l’URL de votre site web. Puis cochez la case d’acceptation des conditions, et cliquez “Create your Twitter application”.

Rendez-vous ensuite dans l’onglet “Key Access and Tokens” ; gardez cet onglet ouvert.

De retour dans WordPress, remplissez les champs “CONSUMER KEY (API KEY)” et “CONSUMER SECRET (API SECRET)” tels que vous les avez trouvés sur la page précédente.

Pour les deux champs suivants, retournez de nouveau dans votre application Twitter.

Tout en bas de l’onglet “Key Access and Tokens”, cliquez “Create my access token”.

Vous pouvez désormais renseigner, dans les options de Flow-Flow, les deux champs restants : “ACCESS TOKEN” et “ACCESS TOKEN SECRET”.

On sauvegarde avec le bouton vert, et voilà qui est fait pour Twitter !

1.2 Pour Facebook

Pour Facebook, c’est beaucoup plus simple. Il vous suffit de décocher l’option “USE OWN APP” dans l’onglet “AUTH” du plugin Flow-Flow.

Un bouton “AUTHORIZE” apparaît alors automatiquement.

Vous n’avez plus qu’à cliquer dessus, vous connecter à votre compte Facebook, accepter le lien avec l’application Flow-Flow… et voilà, votre code est apparu dans le champ “ACCESS TOKEN” : sauvegardez, c’est plié !

1.3 Pour Instagram

Procédez de la même manière pour Instagram : cliquez sur le bouton “AUTHORIZE”, et laissez votre champ “ACCESS TOKEN” se remplir automatiquement.

1.4 Pour YouTube

Allez, un peu de courage, pour YouTube, l’affaire est au même niveau de complexité…

Rendez-vous à l’adresse suivante : https://console.developers.google.com. Cliquez sur le bouton “Créer un nouveau projet”.

Donnez-lui un petit nom. Puis cliquez sur “Activer les API et les services” dans la barre du haut de la page.

Sélectionnez dans la liste d’APIs qui s’affichent celle qui s’intitule “YouTube Data API v3”.

Cliquez ensuite sur le bouton “Activer.”

Dans la barre de gauche, cliquez ensuite sur “Identifiants” puis “Créer des identifiants”. Sélectionnez “Clé API”. Copiez-collez ensuite cette clé dans le champ “YouTube auth settings” du plugin Flow-Flow.

Et vous voilà prêt à créer vos premiers flux Social Media ! Respirez un bon coup, et on repart.

Devenez enfin visible grâce au SEO

Optimisez le référencement de votre site WordPress, obtenez du trafic et augmentez votre chiffre d’affaire grâce à la pédagogie de WPMarmite.

Étape 2 : Ajouter les flux Social Media au plugin Flow-Flow

Cette étape se déroulera, quant à elle, dans l’onglet “FEEDS” du plugin Flow-Flow.

Comme vous pouvez le voir, j’ai déjà créé quelques flux à intégrer à mon propre Social Wall.

Très bientôt, vous devriez voir apparaître le même type d’interface, avec les pictogrammes qui vous indiquent quels types de “feeds” vous avez préparé.

Vous pouvez créer, à ce stade, autant de flux que vous le souhaitez : dès l’étape 3, vous pourrez choisir lesquels faire apparaître sur votre Social Wall personnalisé.

C’est parti !

2.1 Pour Twitter

Cliquez sur le bouton “CREATE FEED”, et sélectionnez l’icône Twitter.

On vous propose alors 5 possibilités. Vous pouvez intégrer à votre Social Wall :

Les options suivantes vous permettent de filtrer le langage utilisé dans le fil sélectionné, et d’éventuellement garder les retweets et les commentaires qui ont été publiés sur les publications.

Choisissez à quelle fréquence vous souhaitez voir votre flux mis à jour, ainsi que le nombre de publications qui devront apparaître.

En activant l’option “MODERATE THIS FEED”, vous vous laissez l’opportunité de valider la publication, sur votre Social Wall, de chacune des publications du flux créé.

Une option que je ne recommande pas… parce qu’après tout, vive l’automatisation ! Sauf si, bien sûr, comme dans le cas de notre chauffagiste-plombier, vous souhaitez sélectionner certaines publications plutôt que d’autres.

Cliquez sur “ADD FEED” : il apparaît désormais dans une liste, dans l’onglet “FEEDS” du plugin. Un petit cercle vert vous indiquera que son intégration a bien fonctionné, et qu’il est prêt à être utilisé (à l’étape 3 de cet article).

2.2 Pour Facebook

Pour ajouter au plugin un fil Facebook, procédez de la même manière : cliquez sur le bouton “CREATE FEED”, et sélectionnez l’icône Facebook.

Vous verrez que l’interface est sensiblement la même que pour Twitter. 3 options vous sont proposées, pour diffuser :

Conseil pratique : Pour trouver l’identifiant d’une page ou d’un groupe Facebook, rendez-vous ici : http://lookup-id.com/

2.3 Pour Instagram

Pour Instagram, même process de départ : Cliquez sur le bouton “CREATE FEED”, et sélectionnez l’icône Instagram.

On vous propose alors 4 options. Vous choisissez alors d’utiliser :

Simple comme bonjour, n’est-ce pas ?

2.4 Pour YouTube

Pour YouTube, idem : cliquez sur le bouton “CREATE FEED”, et sélectionnez l’icône YouTube.

Face à vous, 4 possibilités. Vous pouvez sélectionner :

Étape 3 : Créer votre Social Wall personnalisé

Nous voici à l’étape cruciale : vous allez choisir, d’une part, les “feeds” que vous voudrez voir apparaître sur votre Social Wall, mais aussi personnaliser l’apparence de ce mur.

3.1 Sélectionner les sources

Rendez-vous dans l’onglet “STREAMS” de votre plugin Flow-Flow.

Comme vous le voyez ci-dessus, j’ai déjà créé mon premier Social Wall. Pour faire de même, je vous invite à cliquer sur le bouton “CREATE STREAM”.

Vous atterrissez automatiquement dans l’onglet “SOURCE”.
Donnez un nom à votre Social Wall, puis cliquez sur le bouton “CONNECT NEW FEED TO STREAM”.

Une liste déroulante apparaît alors, dans laquelle vous pouvez sélectionner tous les flux que vous avez créés à l’étape précédente. Sélectionnez-en autant que vous le souhaitez, l’un après l’autre, en les enregistrant grâce au bouton vert.

J’ai personnellement choisi, dans cet exemple, de diffuser des vidéos issues d’une de mes playlists YouTube, ainsi que mon fil Twitter personnel.

Dans l’onglet “GENERAL”, vous pouvez ensuite personnaliser les options de votre Social Wall. Les plus importantes me paraissent être les 3 premières :

Cette “lightbox” permet au visiteur de s’intéresser de plus près à une publication, mais aussi d’accéder aux likes et aux commentaires qui y ont été faits sur le réseau social. Pratique pour prouver l’engagement Social Media dont vous faites l’objet, à même votre site web !

3.2 Personnaliser le design de votre Social Wall

Dans l’onglet suivant, “LAYOUT”, il va s’agir de choisir quelle apparence donner à ce Social Wall.

Vous devrez d’abord choisir votre “Stream layout”, c’est-à-dire la forme que prendra votre Social Wall.

Le layout “Masonry” organise les publications comme des tuiles : lorsque leur taille est différente, les publications sont affichées en quinconce.

Le layout “Grid” les organise en grille : toutes les publications ont la taille de la plus grande qui s’affiche. Un aspect plus “propre”, plus sage aussi 🙂

Le layout “Justified” réduit toutes les publications à la taille de la plus petite. Ça ne fonctionne pas pour tous les types de publications, comme vous pouvez le voir sur mon exemple…

Pour ce premier Social Wall, choisissez d’abord le layout “Masonry”. Vous pourrez, une fois que votre Social Wall sera intégré à votre page, revenir dans cet onglet, et tester les différentes options, pour voir laquelle rendra le mieux.

Plus bas dans l’onglet “LAYOUT”, on vous propose de changer les paramètres de responsiveness (c’est-à-dire la manière dont votre Social Wall s’adapte aux formats mobile et tablette).

Mon conseil : n’y touchez pas – le plugin produit déjà des Social Walls adaptés à tous types d’affichages.

3.3 Personnaliser l’apparence des publications réseaux sociaux

Pour modifier l’apparence de chacune de vos publications (vos “tuiles” en quelque sorte), rendez-vous dans l’onglet “STYLING”.

Là, le plugin est extrêmement bien fait : il vous donne à voir, sur la droite, ce que donnerait le paramétrage du design de vos publications. Vous pouvez changer la manière dont les photos de profil apparaissent, les couleurs d’encadrement ou de fond de vos “tuiles”, l’alignement du texte…

À vous de tester l’effet de chacune des options, et de choisir celle qui vous semble la plus attrayante.
Si vous êtes un peu bricoleur, l’onglet suivant, “CSS”, vous permet de rajouter manuellement des lignes de code CSS pour personnaliser encore plus votre Social Wall.

Apprenez le CSS une bonne fois pour toutes

Créez des sites au rendu impeccable sans y passer des heures avec CSS Express.

Mais rassurez-vous : les options pré-enregistrées du plugin sont déjà assez complètes pour vous permettre un rendu proche de votre charte graphique, qui s’intégrera à merveille avec votre site actuel.

Le plugin vous permet de créer autant de Social Walls que vous souhaitez. Après ce premier essai fructueux, vous pouvez donc vous employer à en créer d’autres, associant d’autres types de contenus, segmentés d’une autre manière, pour d’autres cibles…

C’est à l’étape suivante que je vous explique comment intégrer ce Social Wall à l’une de vos pages !

Étape 4 : Intégrer votre Social Wall à votre site WordPress

Jusqu’alors, nous sommes restés dans le plugin Flow-Flow ; votre Social Wall est prêt, mais n’est diffusé sur aucune page de votre site WordPress. Voici venu le temps de montrer à vos visiteurs ce que vous leur avez concocté !

4.1 Récupérer le “shortcode” de votre Social Wall

Toujours dans l’onglet “STREAM”, rendez-vous dans le dernier onglet, nommé “SHORTCODE” (parcourez la définition dans le glossaire).

Voici le code individuel pour votre Social Wall ; copiez-le, et apprêtez-vous à le coller dans le code de la page de votre choix.

4.2 Insérer le shortcode sur la page de votre choix

Il vous est possible d’insérer ce shortcode sur la page que vous souhaitez : votre page d’accueil, une page interne déjà conçue, voire une page spécialement créée pour ce Social Wall.

Deux possibilités s’offrent alors à vous, selon que votre site utilise un constructeur de page ou non.

Soit vous créez une page dédiée à votre Social Wall, et y coller le shortcode dans le mode “Texte”.

Ou bien vous créez une nouvelle page, ou modifiez une page existante, avec son constructeur de page, et coller le shortcode dans un module (un bloc de texte, par exemple). Une option intéressante si vous souhaitez, par exemple, gérer les marges entourant votre Social Wall.

Dans mon cas, je j’ai fait avec Visual Composer mais cela fonctionnera avec n’importe quel constructeur de page (Elementor, Beaver Builder, Divi Builder, etc).

Conseil pratique : Et pourquoi pas intégrer votre Social Wall sous forme de widget ? Depuis l’onglet “Widgets” de votre interface WordPress, vous retrouverez le widget Flow-Flow. Une bonne pratique pour dynamiser un blog, ou une page produit. Attention toutefois à ne pas détourner l’attention du lecteur, qui doit se focaliser sur l’élément principal de votre page, et non ces publications dynamiques.

Dans une vidéo synthétique, l’équipe de Flow-Flow a résumé ces différentes étapes. À consulter si vous avez besoin de vous rafraîchir la mémoire rapidement :

Conclusion

Et voilà, votre Social Wall est en ligne, prêt à susciter l’engagement de vos visiteurs, et accroître le temps qu’ils passent sur votre site WordPress. Champagne !

Dans Flow-Flow, on apprécie :

Mais dans Flow-Flow, on déplore quand même un peu :

Pour tester la version gratuite de Flow-Flow, c’est par là !

Déjà convaincu de la puissance de Flow-Flow ?

Téléchargez la version PRO pour 39$

Que pensez-vous du plugin Flow-Flow ? Est-ce vraiment utile ou trop gadget selon vous ?

Si vous l’utilisez, montrez-nous vos exemples de Social Walls dynamiques, et partagez la façon dont vos publications Social Media influencent votre site. On a hâte de voir vos résultats !

Quitter la version mobile