PubliĂ© par le 18 janvier 2018 ‱ 60 Commentaires

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 :

  • Augmenter son trafic entrant vers ses rĂ©seaux sociaux
  • Faire grandir ses communautĂ©s Social Media, par consĂ©quent
  • AccroĂźtre l’engagement des visiteurs, en diffusant les commentaires et les likes gĂ©nĂ©rĂ©s sur les rĂ©seaux sociaux
  • Augmenter le temps passĂ© sur son site web

Ç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 :

  • Soundcloud
  • Google+
  • LinkedIn
  • Pinterest
  • Foursquare
  • Vine
  • Flickr
  • Dribbble
  • Vimeo
  • YouTube
  • Tumblr
  • WordPress
  • Et tout flux RSS en gĂ©nĂ©ral

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

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.

flow-flow-plugin-wordpress-réseaux-sociaux

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.

flow-flow-plugin-wordpress-réseaux-sociaux

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”.

flow-flow-plugin-wordpress-twitter

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”.

flow-flow-plugin-wordpress-twitter

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

flow-flow-plugin-wordpress-twitter

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.

flow-flow-plugin-wordpress-twitter

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

flow-flow-plugin-wordpress-twitter

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

flow-flow-plugin-wordpress-twitter

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

RĂ©glages Flow Flow pour Twitter

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.

flow-flow-plugin-wordpress-facebook

Un bouton “AUTHORIZE” apparaüt alors automatiquement.

RĂ©glages Facebook pour Flow Flow

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.

RĂ©glages Instagram pour Flow Flow

1.4 Pour LinkedIn

De nouveau, pour connecter vos fils LinkedIn, il vous faudra mettre un peu les mains dans le cambouis.

Avant de procĂ©der Ă  cette manipulation, notez que, grĂące Ă  Flow-Flow, vous ne pourrez diffuser que les fils d’actualitĂ© de votre page entreprise, et non ceux de votre profil personnel.

Applications LinkedIn

Rendez-vous sur https://www.linkedin.com/secure/developer?newapp, connectez-vous Ă  votre compte, et cliquez sur le bouton “CrĂ©er une application” en haut Ă  droite de la page.

flow-flow-plugin-wordpress-linkedin

ComplĂ©tez tous les champs du formulaire. Vous pouvez rentrer n’importe quelle information sur tous les champs (ce n’est pas trĂšs important), Ă  part bien sĂ»r l’adresse de votre site web oĂč vous souhaitez diffuser votre fil LinkedIn. Vous tomberez sur cette page-ci :

flow-flow-plugin-wordpress-linkedin

De retour dans l’administration, dans l’onglet “AUTH” du plugin Flow-Flow, entrez les codes “CLIENT ID” et “CLIENT SECRET” que vous venez de dĂ©couvrir.

RĂ©glages Linkedin pour Flow Flow

Pour obtenir le code pour “ACCESS TOKEN”, rendez-vous sur cette page : https://apigee.com/console/linkedin. Je vous prĂ©viens, l’interface (dĂ©diĂ©e aux dĂ©veloppeurs web) peut faire peur ; mais ne vous inquiĂ©tez pas, je suis lĂ  pour vous guider !

En haut Ă  gauche, dans la liste dĂ©roulante “Authentification”, sĂ©lectionnez “OAuth 2”.

Console LinkedIn

Vous serez redirigĂ© vers une page oĂč il faudra vous connecter Ă  LinkedIn. Une fois cela fait, vous voilĂ  de retour sur la page prĂ©cĂ©dente.

Dans la colonne Ă  gauche, sĂ©lectionnez la premiĂšre mĂ©thode API (encadrĂ©e en rouge ci-dessous). Puis cliquez sur le bouton “Send” Ă  droite.

Retrieve basic profile data LinkedIn Console

Dans le charabia qui s’affiche sur la colonne de gauche, sĂ©lectionnez et copiez tout ce qui se situe entre “token=” et “&format=json” (sans sĂ©lectionner ces Ă©lĂ©ments).

Récupérer le token LinkedIn

Il ne vous reste plus qu’à coller ce morceau de fameux charabia dans le champ “ACCESS TOKEN” du plugin Flow-Flow
 et de sauvegarder !

1.5 Pour YouTube (et accessoirement Google+, mĂȘme s’il s’agit d’un rĂ©seau social fantĂŽme
)

Allez, un peu de courage, pour YouTube, l’affaire est au mĂȘme niveau de complexité  Mais bonne nouvelle : vous n’aurez pas Ă  refaire cette manipulation pour Google+ ! (Oui, oui, d’aucuns utilisent encore Google+… rien que pour son intĂ©rĂȘt pour le SEO.)

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

Nouveau projet Google API

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

Tableau de bord de l'API Google

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

Choisir Youtube Data API v3

Cliquez ensuite sur le bouton “Activer.”

Créez un identifiant pour vous connecter à l'API Youtube

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 “Google+ and YouTube auth settings” du plugin Flow-Flow.

Clé API Google

Et vous voilĂ  prĂȘt Ă  crĂ©er vos premiers flux Social Media ! Respirez un bon coup, et on repart.

É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.

Liste des fils social media

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.

Choix du type de flux Twitter

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

  • Votre fil Twitter (Home Timeline) : Dans le champ “CONTENT TO SHOW”, il faudra alors renseigner votre nom d’utilisateur.
  • Le fil Twitter d’un autre utilisateur au profil ouvert (User feed). Dans le champ “CONTENT TO SHOW”, il faudra alors renseigner son nom d’utilisateur.
  • Une sĂ©lection de tweets par mot-clĂ© ou hashtag (Tweets by search). Dans le champ “CONTENT TO SHOW”, il faudra alors renseigner
 vous vous en doutez, ce mot-clĂ© ou ce hashtag.
  • Les tweets de la liste d’abonnĂ©s d’un utilisateur (User list). Dans le champ “CONTENT TO SHOW”, il faudra alors renseigner son nom d’utilisateur, et dans le champ “LIST NAME”… eh oui, le nom de sa liste.
  • Les “likes” d’un autre twittos (intĂ©ressant si vous avez repĂ©rĂ© un influenceur qui partage les mĂȘmes centres d’intĂ©rĂȘt que vous, par exemple). Dans le champ “CONTENT TO SHOW”, il faudra alors renseigner son nom d’utilisateur.

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.

flow-flow-plugin-wordpress-réseaux-sociaux

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

  • Les publications d’un profil Facebook public. Il vous suffira pour cela de rentrer l’identifiant dans le champ “CONTENT TO SHOW”.
  • Les publications d’un groupe Facebook. Rentrer pour ce faire son identifiant dans le champ “CONTENT TO SHOW”.

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

  • Un album photo Facebook. Pour cela, il vous faudra trouver son “album ID”. Allez sur l’album en question, et sĂ©lectionnez, dans l’URL, comme suit :

Récupérer l'identifiant de l'album Facebook

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.

Paramétrage du flux Instagram

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

  • Les photos d’un compte Instagram ouvert (User feed). Dans “CONTENT TO SHOW”, rentrez le nom d’utilisateur en question.
  • Les photos aimĂ©es par un utilisateur (User’s likes). Dans “CONTENT TO SHOW”, idem que la prĂ©cĂ©dente option.
  • Les publications liĂ©es Ă  un hashtag en particulier (Hastag). Dans “CONTENT TO SHOW”, rentrez ce hashtag.
  • Des publications liĂ©es Ă  une localisation (Location) (intĂ©ressant si vous souhaitez crĂ©er un Social Wall dĂ©diĂ© Ă  une ville ou Ă  une rĂ©gion, par exemple). Dans “CONTENT TO SHOW”, rentrez donc l’identifiant Instagram de cet endroit. Vous le trouverez en cliquant, depuis Instagram, sur l’endroit en question dans un post, puis en sĂ©lectionnant comme suit dans l’URL :

Récupérer l'identifiant du lieu sur Instagram

Simple comme bonjour, n’est-ce pas ?

2.4 Pour LinkedIn

Ça y est, vous commencez Ă  comprendre la dĂ©marche : cliquez sur le bouton “CREATE FEED”, et sĂ©lectionnez l’icĂŽne LinkedIn.

On vous demande tout d’abord de rentrer l’identifiant de votre page entreprise LinkedIn.
Pour le trouver, pas de problĂšme : depuis votre page entreprise, sĂ©lectionnez-le comme suit dans l’URL :

Récupérer l'identifiant de la page sur LinkedIn

Puis retour au plugin Flow-Flow.

Paramétrage du flux LinkedIn

Pour ce réseau social, 3 options. Vous pouvez intégrer :

  • Uniquement les publications de la page (Updates of company).
  • Uniquement les offres d’emploi liĂ©es Ă  la page (Job offers). PlutĂŽt malin si vous souhaitez crĂ©er un Social Wall “spĂ©cial recrutement”.
  • Tout type de publication (Any).

Rien de plus simple !

2.5 Pour YouTube (et Google+, mĂȘme si, bon, hein, on se comprend…)

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

Paramétrage du flux Youtube

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

  • Les vidĂ©os publiĂ©es et likĂ©es par un compte YouTube (User feed) ; auquel cas, dans CONTENT TO SHOW, vous devrez rentrer le nom d’utilisateur en question.
  • Uniquement les vidĂ©os publiĂ©es sur une chaĂźne YouTube (Channel) ; mĂȘme process que prĂ©cĂ©demment dans le champ “CONTENT TO SHOW”.
  • Une liste de lecture crĂ©Ă©e depuis un compte YouTube (Playlist) ; pour cela, il vous faudra entrer l’identifiant de la playlist en question dans “CONTENT TO SHOW”. Pour le trouver, rendez-vous sur cette playlist, et sĂ©lectionnez-le comme suit dans l’URL :

Récupérer l'identifiant de playlist Youtube

  • Les vidĂ©os issues d’une recherche par mots-clĂ©s (Search) : Ă  vous de rentrer dans “CONTENT TO SHOW” ces mots-clĂ©s.

É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.

Liste des flux social média

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”.

Créer un flux social media dans Flow-Flow

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

Connecter des flux social media

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.

flow-flow-plugin-wordpress-social-media

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.

RĂ©glages du social wall

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

  • La façon de trier les diffĂ©rentes publications sur le Social Wall : soit par importance et par date, soit strictement par date, soit de maniĂšre totalement alĂ©atoire. Je prĂ©fĂšre personnellement la deuxiĂšme option, qui permet aux visiteurs de suivre mes actions sur les rĂ©seaux sociaux au fil du temps.
  • Le nombre de publications visibles sur le Social Wall. Un bouton “voir plus” s’affichera quoiqu’il arrive s’il y a plus de publications Ă  montrer, mais il vous faut choisir combien s’affichent par dĂ©faut.
  • L’option “SHOW LIGHTBOX ON CARD CLICK” : il s’agit d’une option qui permet, au clic, d’agrandir la publication. En voici un exemple ci-dessous :

Afficher une lightbox Ă  notre social wall

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.

Design du social wall

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

Social wall masonry

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

Social wall grid

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 🙂

Social wall justified

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.

Premier social wall

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.

Couleurs du social wall

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”.

Personnalisation du social wall

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.

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).

Shortcode du social wall de Flow-Flow

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.

Intégration du social wall sur une page dans WordPress

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

Intégrer un social wall dans un constructeur de page

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 !

flowflow-social-wall

Dans Flow-Flow, on apprécie :

  • L’interface de configuration facilement maniable, une fois qu’on en a appris les rudiments ;
  • La possibilitĂ©, dans la version payante, de modĂ©rer les publications que l’on souhaite voir apparaĂźtre sur son Social Wall, ou bien d’automatiser la diffusion du contenu si on n’a pas le temps ou l’envie ;
  • L’adaptation automatique du Social Wall Ă  tous les types d’écrans (ordinateurs, mobiles, tablettes) ;
  • Une version gratuite dĂ©jĂ  assez consĂ©quente en termes de design : le layout “Masonry” fait bien le job Ă  lui seul, et on peut en personnaliser les couleurs pour l’adapter Ă  sa charte graphique ;
  • Les addons disponibles pour aller encore plus loin :
    • Advertisement & branding (19$) pour afficher des publicitĂ©s ou tout simplement votre logo Ă  votre social wall ;
    • Broadcasting (19$) pour diffuser votre social wall sur grand Ă©cran lors d’un Ă©vĂšnement (avec rafraĂźchissement automatique).

Mais dans Flow-Flow, on dĂ©plore quand mĂȘme un peu :

  • Le fait que le plugin et la documentation ne soient disponibles, pour l’instant, qu’en Anglais ;
  • La phase d’autorisation de la rĂ©cupĂ©ration des donnĂ©es Social Media (l’étape 1 de ce tutoriel), un peu technique pour commencer une intĂ©gration somme toute sympathique
  • L’absence de prĂ©visualisation du design global du Social Wall (l’étape 3.2 de ce tutoriel), qui rendrait la dĂ©marche de crĂ©ation plus simple
  • Une version gratuite limitĂ©e en termes de nombres de rĂ©seaux sociaux utilisĂ©s : on n’y trouve que les intĂ©grations de Facebook, Twitter et Instagram

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 29$

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 !