Dans cet article, nous allons voir les différentes manières de partager votre projet RacontR sur les réseaux sociaux et comment proposer à vos utilisateurs de le partager lors de sa consultation.

Avertissements et précautions préalables

Sachez que lors de vos tests de partage sur les réseaux, il peut y avoir des délais plus ou moins importants avant que les modifications effectuées de votre côté soient prises en compte par les plateformes concernées.
Penser à vider votre cache de navigateur après chaque modification et republier la ou les pages de la même manière.
Souvenez-vous qu'il existe souvent une différence entre l'affichage qui vous est présenté lorsque vous préparez un post (Facebook, LinkedIn, Twitter...) et le rendu définitif sur les fils d'actualité. N'hésitez pas à tester ce rendu via des tests de publications/partages privés, lorsque la plateforme concernée le permet.

Informations techniques et recommandations

1- Open Graph

Le protocole Open Graph, mis en place à l'origine par Facebook et désormais open source, permet un affichage enrichi de toute page web partagée par un utilisateur sur les réseaux sociaux.

RacontR implémente nativement les 4 balises OG requises dans les pages de vos projets : og:title - og:type - og:url - og:image
Certains projets pourront faire l'objet d'ajout de balises optionnelles (og:locale - dans le cas d'un projet diffusé dans plusieurs zones géographiques et multilangue, par exemple)
Dans le cas d'un projet intégré sur une ou des page(s) web existante(s), il conviendra de s'assurer du bon placement des balises OG, notamment si ces pages contiennent un header existant.

Liens utiles pour en savoir plus ou tester vos partages

2- Recommandations pour les titres, descriptions et images

Pour les champs "Titre/title" que vous remplirez, veillez à ne pas dépasser 55-60 caractères. De plus, sachez que si vous écrivez un titre sur deux lignes, la description pourra être tronquée lors du partage
Pour les champs "Description", les recommandations sont de 60-65 caractères maximum
Concernant les images, il convient de se reporter aux recommandations Facebook pour l'Open Graph (liens plus haut). Mais d'une manière générale, prévoyez un ratio de 1:9/1 et une résolution minimale de 600 pixels. Vous pouvez anticiper l'utilisation des écrans haute résolution en choisissant une image de haute qualité (1200/630px au minimum) tout en gardant une taille de fichier inférieure à 8MB

Paramétrages

Selon le lien que vous déciderez de partager sur les réseaux sociaux, différents titres ou descriptions seront utilisés lors du partage. Voici l'ensemble des paramètres qui peuvent être configurés.

1- Page de configuration du projet

La page de configuration du projet est accessible depuis la page d'accueil de votre compte RacontR qui liste tous vos projets. Survolez la vignette de votre projet et cliquez sur l'icône en forme de rouage

Dans l'emplacement prévu pour illustrer votre vignette de projet ("thumbnail") téléchargez l'image que vous avez prévue pour le partage de votre projet (1)

N'oubliez pas de cliquer sur "Save Settings" pour sauvegarder votre image.

2- Page des propriétés du projet (Project Settings)

Vous accédez aux Project Settings depuis la page scénario de votre projet ou bien depuis l'éditeur, en cliquant sur l'icône en forme de rouage que vous trouvez dans le menu haut-droit.

Deux parties sont à renseigner :

l'onglet "Project description" avec le titre et la description (2). Ces parties sont consacrées au travail de référencement de votre projet d'une manière générale, mais dans un cas de figure ces éléments serviront de titre et de description pour vos posts

l'onglet "Social" où vous renseignerez la description et ajouterez votre image de partage (3)

3- Propriétés de la page

Dans le tableau des propriétés de votre page. Vous allez compléter les champs "Title", "Description" et définir une image pour le partage spécifique de cette page (4)

A noter qu'il y a une exception pour la page d'accueil. C'est la page que vous trouvez en rouge dans le scénario du projet, par défaut celle qui a été créée en premier (mais vous pouvez définir n'importe quelle page comme page d'accueil dans les propriétés de page).
Pour cette page d'accueil, si vous souhaitez que les informations que vous avez insérées dans l'onglet "Social" des Project Settings soient prises en compte, il faut que vous laissiez vierges les champs "Title" et "Description", ainsi que l'image. Seul le nom de votre page sera pris en compte pour le titre du post.
En effet, l'URL de la page d'accueil est l'URL du projet. Et la configuration de l'onglet "Social" des Project Settings correspond à la description du projet lors de son partage.

Les modes de partages

Selon que vous souhaitez partager le projet intégralement ou une page spécifique, voici les différentes options ainsi que les éléments que vous avez paramétrés qui vont être pris en compte :

1- Partage du projet

Deux solutions s'offrent à vous : partage d'une iframe ou partage par l'URL de la page d'accueil de votre projet (recommandé)

Via iframe : c'est lien que vous trouvez depuis la page des projets dans votre compte RacontR. En survolant la vignette de votre projet à partager (préalablement publié) vous accédez à l'iframe (5) .

Si vous choisissez cette option pour le partage, les éléments paramétrés pris en compte seront les suivants : l'image de la vignette ("thumbnail" de la page de configuration du projet), le titre et la description prévus dans l'onglet "Description" de vos Project Settings.

Via page d'accueil : vous trouvez le lien dans le tableau des propriétés de la page d'accueil. Il s'agit du lien de publication en index.html placé sous la ligne du nom de la page (6).

Les éléments paramétrés pris en compte lors du partage de ce lien sont les suivants : la description et l'image seront celles de l'onglet "Social" des Project Settings. Le nom de la page d'accueil (tableau des paramètres de la page) sera pris pour le titre du post.

2- Partage d'une page

Vous pouvez partager une page spécifique d'un projet (hors page d'accueil). Dans ce cas vous devez utiliser le lien de publication de cette page en .html, que vous trouverez dans le tableau de ses propriétés sous le nom de la page (6)

Les éléments paramétrés pris en compte lors du partage sont alors ceux renseignés dans les champs "Title", "Description" et "Social image" de ce même tableau des propriétés de page.

1- Paramètres

Lorsque vous aurez ajouté le plugin "Social" sur votre page, vous accédez à sa configuration en cliquant sur "Element Parameters" depuis l'onglet de ses propriétés.

Dans le tableau de configuration vous pouvez :

sélectionner les réseaux sociaux à afficher sur votre page (7)
choisir un thème définissant un style d'icônes - à savoir que si votre fond de scène est blanc ou très clair les thèmes "Plain" et "Minima" seront peu ou pas visibles
afficher le nom du réseau social
afficher le décompte des partages et likes (8)

Vous aller pouvoir définir un URL spécifique à partager, si vous souhaitez que vos utilisateurs partagent un autre lien que la page en cours. Si vous ne précisez pas d'URL, par défaut la page en cours sera partagée (9)

Enfin, vous avez la possibilité de prévoir un texte pour le partage sur Twitter. Si vous ne prévoyez pas de texte dans ce champs, c'est la description inscrite dans les propriétés de page qui sera prise en compte (10)

2- Affichages selon réseaux

Sans préciser le champs "Custom URL" (9), voici les éléments pris en compte pour le partage :

Facebook : le titre, l'image et la description des propriétés de page
Twitter : la description "Sharing text for Twitter" si renseignée, dans le cas contraire le titre, l'image et la description prévus dans les propriétés de page
Google+ : le titre, l'image et la description des propriétés de page
LinkedIn : l'image et le titre prévus dans les propriétés de page (pas de description)
Pinterest : l'image prévue dans les propriétés de page est prise en compte. La plateforme affiche le nom de la page pour la création de l'épingle

Si vous avez précisé un URL spécifique dans le champs (9) :

Facebook : titre, image et description des propriétés de page
Twitter : titre, image et description des propriétés de page (sauf si "Sharing text for Twitter" renseigné)
Google+ : titre, image et description des propriétés de page
LinkedIn : image et titre des propriétés de page, pas de description prise en compte
Pinterest : l'image prévue dans les propriétés de page est prise en compte. La plateforme affiche le nom de la page pour la création de l'épingle