Comment convertir des articles de blog en articles instantanés sur Facebook - aucun codage requis

Un de mes amis m'a demandé d'aider à convertir les articles déjà postés sur leur site en articles instantanés sur Facebook. Par la suite, j'ai décidé de compiler un guide pour aider les non-techniciens à convertir leurs anciens articles, billets de blog ou contenus en ligne.

Même si vous ne savez pas ce que sont les articles instantanés de Facebook, vous les utilisez peut-être déjà. Selon la page FAQ de Facebook IA:

"Instant Articles est un format de publication mobile qui permet aux éditeurs de nouvelles de distribuer des articles sur l'application de Facebook qui se chargent et s'affichent jusqu'à 10 fois plus rapidement que le Web mobile standard."

IA impose une norme de publication de contenu qui se traduit par une conception agréable et des performances optimisées pour les articles ouverts à partir de l'application mobile Facebook. Vous pouvez en savoir plus sur les avantages de l’IA.

Facebook offre une multitude de moyens d'accélérer la production et la conversion d'IA. Pourtant, il semble que les guides actuels soient destinés aux développeurs ou aux grandes entreprises ayant un écosystème d'édition plus complexe.

Il est difficile de trouver des guides pour convertir les articles précédemment publiés qui n’impliquent pas l’utilisation de l’API de l’IA Facebook, du SDK PHP ou du plugin WordPress. Pour les non-développeurs, la plupart de ces outils nécessitent trop d'expérience technique. Même lorsque l’on essaie de trouver le didacticiel du plug-in WordPress, il faut consulter la documentation du portail des développeurs de Facebook. Ce n'est pas idéal pour les non-développeurs qui sont dissuadés avant qu'ils puissent jamais trouver cette page.

Travaillons ensemble pour convertir tout article déjà publié sur le Web en article instantané sur Facebook! Pour notre tutoriel, nous utiliserons l’article sur un chien de célébrité du film «Anchorman».

Voyons Groove!

Étape 0: préparer

Nous n’aurons pas besoin d’installer de plugins ou d’intégrations, mais nous aurons besoin d’un éditeur de texte pour travailler avec le code source HTML. Il existe de nombreux éditeurs de texte orientés code, mais dans cet exemple, je recommande Sublime. Il offre toutes les fonctionnalités dont nous aurons besoin et est facile à utiliser immédiatement avec une nouvelle installation.

Une fois que vous aurez installé Sublime, nous allons télécharger le modèle de code que nous utiliserons à partir de GitHubGist.

Sur le côté droit de l'écran:
1. Faites un clic droit sur le bouton "Raw"
2. Cliquez sur "Enregistrer le lien sous ..." Par défaut, il devrait être enregistré sous forme de fichier HTML portant le nom "modèle".

Nous avons maintenant l'éditeur de code et le code de modèle que nous allons éditer!

Pour la dernière étape de la configuration:
1. Démarrer Sublime
2. Ouvrez le fichier modèle que nous avons téléchargé

Étape 1: Obtenir l'image de la bannière

Revenez sur votre navigateur Internet et trouvez l’article que vous souhaitez convertir sur son site actif. Nous allons d’abord saisir l’image de la bannière, que nous utiliserons en haut de l’Instant Article de Facebook.

Pour ce faire, cliquez sur l'image avec le bouton droit de la souris et sélectionnez «Copier l'adresse de l'image».

Revenez au modèle que nous avons ouvert dans Sublime. Recherchez la balise

dans le code, à la ligne 35 (le numéro de la ligne est visible sur le bord gauche).

Mettez en surbrillance l'URL d'origine située entre guillemets à la ligne 36 et remplacez-la en collant l'adresse de l'image que nous avons copiée à partir de l'image de bannière. Assurez-vous qu'il y a des guillemets doubles de chaque côté de l'URL pour conserver le format. Et assurez-vous de ne pas supprimer le «/>» à la fin de la ligne.
Modifiez le texte à l'intérieur de 
avec la légende que vous souhaitez voir apparaître sous l'image. C’est souvent l’attribution des images.

Notez que nous veillons à ne pas modifier la mise en forme du code. S'amuser avec les balises elles-mêmes provoquera des erreurs plus tard lorsque nous essaierons de rendre le site Web. Sublime colorise notre code, ce qui nous aide à reconnaître les erreurs ou les balises HTML incorrectes.

Portez une attention particulière à la manière dont nous avons remplacé le texte de la légende de la figure. Nous allons éditer beaucoup d'autres valeurs exactement de la même manière.

Étape 2: Récupération des métadonnées

Il nous faut collecter un peu d’informations maintenant. Étant donné que la plupart de ces données devraient pouvoir être récupérées sans avoir à fouiller dans le code source, la copie manuelle de cette information fonctionne bien. Cependant, nous aurons besoin de ce code source plus tard, il n’ya donc aucun mal à l’ouvrir maintenant.

  • URL de l'article d'origine
  • Le titre de l'article
  • Article Sous-titre
  • Article Auteur (s)
  • Date & heure de l'article a été publié à l'origine
  • Date et heure de la dernière mise à jour de l'article

S'il est difficile d'obtenir cette information, nous pouvons utiliser le code source du site Web. La manière dont vous accédez à ces données dépend du navigateur que vous utilisez.

Chrome: CTRL + U ou clic droit → Afficher le code source de la page
Firefox: clic droit → Voir la source de la page
Safari: menu Safari → Préférences → Avancé, cochez la case «Afficher le menu Développement dans la barre de menus», puis le menu Développement → Afficher le code source de la page.
Le code source devrait ressembler à ceci

Maintenant que le code source et le site Web original sont disponibles, commençons par rechercher nos informations.

Titre: copiez le titre de l'article et utilisez-le pour remplacer "Titre de l'article" dans les balises

à la ligne 14 du modèle. Dans le code source, cela se trouve généralement dans les balises </ title>. Par exemple,</p><pre><h1> Titre de l'article </ h1></pre><pre>devient</pre><pre><h1> 15 minutes dans la vie de Celebrity Dog Baxter de 'Anchorman' </ h1></pre><p>Sous-titre: Comme ci-dessus, mais avec le sous-titre. Utilisez-le pour remplacer "Article Subtitle" dans les balises <h2> </ h2> à la ligne 15 du modèle.</p><p>URL: Copiez l’URL de l’article du site Web actif. Utilisez-le pour remplacer l'URL qui apparaît à la ligne 7 du modèle. Par exemple:</p><pre><link rel = "canonical" href = "http://example.com/article.html"></pre><pre>devient...</pre><pre><link rel = "canonical" href = "https://www.theatlantic.com/entertainment/archive/2013/12/15-minutes-life-celebrity-dog-baxter-anchorman/356235/"></pre><p>Heure de publication: à la ligne 18 du modèle, vous pouvez nommer la date et l'heure de publication initiale de l'article. Sachez que le paramètre «datetime» prend un format très spécifique. Les données à l'intérieur de datetime = ”” déterminent les métadonnées (non affichées), tandis que le texte entre les balises “> </ time>” dictera la date à afficher (ici, quel que soit le format).</p><pre>Par exemple, <time class = "op-published" datetime = "2014-11-11T04: 44: 16Z"> 11 novembre, 16h44 </ time></pre><pre>Affiche comme: 11 novembre, 16h44 Changeons-le en: 24 juillet 2017. 18h30</pre><pre><time class = "op-published" datetime = "2017-7-24T06: 30: 16Z"> 24 juillet 2017. 18 h 30 </ time></pre><pre>Dernière mise à jour: Même plan que ci-dessus, mais à la ligne 21 du modèle.</pre><p>Auteur (s): Les lignes 24 à 27 du modèle représentent un auteur dont le nom renvoie à un site Web. Les lignes 28 à 31 représentent un auteur dont le nom n'est pas lié. Vous pouvez copier l'intégralité du bloc de code de cet auteur et le coller consécutivement dans le bloc précédent, puis édité selon les besoins. Vous pouvez également le faire pour plusieurs auteurs. Voir l'exemple ci-dessous pour plusieurs auteurs avec un nom simple + des légendes.</p><h4>Étape 3: Copier le contenu du corps</h4><p>Nous allons maintenant récupérer le contenu de l'article que nous souhaitons convertir. Il existe un large éventail de types de contenu, tels que supports mixtes, JavaScript sophistiqué, contenu intégré. Avec un contenu plus compliqué, il y a plus de chances que les choses ne fonctionnent pas sans dépannage, votre kilométrage peut donc varier.</p><p>Je vais expliquer comment utiliser du texte, des images (statiques ou gifs) et des vidéos, car ils constituent la base de la plupart des articles instantanés que j'ai vus.</p><p>Le code source contient probablement des centaines (voire des milliers) de lignes. Une astuce facile à trouver pour trouver le début du contenu du corps consiste à rechercher les premiers mots du corps du texte de l’article. Nous voudrons copier à partir de la balise <p> au début de notre corps de texte jusqu'à (et y compris) la balise </ p> qui suit les derniers mots de l'article.</p><p>Ensuite, nous allons devoir le déposer dans notre modèle. Près de la ligne 58 dans le modèle, il devrait y avoir une ligne avec ce qui suit:</p><pre><p> Contenu de l'article </ p></pre><p>Mettez en surbrillance toute cette ligne et collez le contenu du corps que nous avons copié à partir du code source de l'article actif. Remarque: nous avons copié le code d’ouverture <p> et le code de fermeture </ p> à partir du code source. C’est pourquoi nous les collons dans le modèle ici. Il y a du code dans un autre ensemble de balises <p> </ p> qui suivent le corps du texte, mais il est stylé - veillez à ne pas le copier avec votre corps.</p><p>* Vous avez une vidéo que vous souhaitez intégrer à votre analyse d'impact? Modifiez l'URL entre les balises <video> et </ video> à partir de la ligne 64, comme nous l'avons fait avec l'URL de l'image de bannière à l'étape 1.</p><p>Notes légales: Ligne 84. Ce texte sera très petit et tout à la fin de votre article.</p><h4>Étape 4: Bells and Whistles (annonces, outils de suivi des analyses, etc.)</h4><p>Je recommande de sauter cette étape pour l'instant. Si vous souhaitez confirmer ce que nous avons fait jusqu’à présent, ou si vous n’avez pas de suivi personnalisé ou de suivi, passez à l’étape 5.</p><p>L'une des meilleures choses à propos des articles instantanés de Facebook, par rapport à d'autres outils de conversion d'article propriétaires, est que vous pouvez conserver les suivis d'analyse personnalisés et les publicités que vous utilisez déjà sur votre propre site.</p><p>Chaque intégration personnalisée sera différente et sa difficulté variera probablement. Pour cet exemple, nous utiliserons ChartBeat, un outil d’analyse et de suivi du trafic. Nous pouvons utiliser une recherche Google rapide dans «Documentation ChartBeat» pour trouver le Guide de démarrage.</p><p>La page de documentation de certaines entreprises peut être destinée aux développeurs. Si cela ne fonctionne pas pour vous, recherchez plutôt un tutoriel.</p><p>ChartBeat nous donne tout le code et les instructions pour ajouter leur intégration.</p><p>Dans le guide, il nous dit ce qui suit, c’est ce que nous allons faire:</p><pre>Insérez ce script juste avant la balise de fermeture </ body>:</pre><p>Maintenant que nous avons ajouté notre outil de suivi ChartBeat, nous devons procéder à quelques modifications rapides pour que l’outil de suivi sache comment se synchroniser avec notre compte ChartBeat.</p><img alt="Code de l'extrait ChartBeat que nous devrons personnaliser" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1567198120110.png" /><p>Chaque ligne en surbrillance (à l'exception de la ligne «.useCanonical») nécessitera une édition afin de pouvoir enregistrer les données.</p><pre>CHANGEMENTS (à droite du "=") .uid - L'identifiant unique de votre compte ChartBeat .domain - Le domaine complet de l'article original .sections - Le nom de la section / genre / tags à laquelle votre article appartient .authors - Le nom de l'auteur à associer à cette pièce</pre><p>Bingo! Vous avez ajouté le suivi et il associera les données qu’il envoie à votre compte ChartBeat unique. Enregistrez votre fichier de modèle modifié et préparez-vous à la publication.</p><h4>Étape 5: Déploiement de votre article instantané</h4><p>Sur Facebook, accédez au tableau de bord de la page que vous gérez à partir de laquelle vous souhaitez publier. Accédez aux outils de publication et à la liste des articles. Cliquez sur le bouton bleu “+ Créer” en haut à droite.</p><img alt="Tableau de bord IA" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1567198121558.png" /><p>Vous devriez maintenant être invité à coller le code de votre nouvel article.</p><p>Sélectionnez tout le code du modèle que nous avons modifié et collez-le ici. Hit sauver! Vous pouvez publier ce brouillon quand bon vous semble ou planifier sa publication à une heure prédéterminée à l'aide du tableau de bord.</p><h4>Félicitations, vous avez terminé! Je suis impatient de lire les formidables articles que vous êtes sur le point de publier.</h4><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1567198123457.gif" /><p>Hey, je suis Nick Walsh.</p><p>Je suis un évangéliste technique pour Wolfram Research et un entraîneur de hackathon pour la Major League Hacking, avec une passion pour la technologie, les sports électroniques et l'autonomisation des développeurs étudiants.</p></div><ins data-zxname="zx-adnet" data-zxadslot="ZX-SMR53" data-zxw="970" data-zxh="250" data-overlay="true"></ins><div class="neighbor-articles"><h4 class="ui header">Voir également</h4><a href="/article/how-to-develop-a-successful-app-for-chinese-market-8e9a2c/" title="Comment développer une application performante pour le marché chinois">Comment développer une application performante pour le marché chinois</a><a href="/article/apps-that-make-our-remote-agency-tick-e521b9/" title="Applications qui rendent notre agence distante tick">Applications qui rendent notre agence distante tick</a><a href="/article/i-m-building-a-house-in-accra-and-documenting-everything-online-cded4e/" title="Je construis une maison à Accra et je documente tout en ligne">Je construis une maison à Accra et je documente tout en ligne</a><a href="/article/how-to-create-a-good-personal-website-b173b4/" title="Comment créer un bon site web personnel">Comment créer un bon site web personnel</a><a href="/article/how-to-become-a-multi-millionaire-dff455/" title="Comment devenir multi-millionnaire">Comment devenir multi-millionnaire</a></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://vi.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="vn flag"></i></a><a href="https://uk.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="ua flag"></i></a><a href="https://tr.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="tr flag"></i></a><a href="https://th.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="th flag"></i></a><a href="https://sv.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="ch flag"></i></a><a href="https://sr.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="rs flag"></i></a><a href="https://sl.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="si flag"></i></a><a href="https://sk.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="sk flag"></i></a><a href="https://ru.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="ru flag"></i></a><a href="https://ro.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="ro flag"></i></a><a href="https://pt.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="pt flag"></i></a><a href="https://pl.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="pl flag"></i></a><a href="https://de.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="de flag"></i></a><a href="https://ar.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="sa flag"></i></a><a href="https://bg.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="bg flag"></i></a><a href="https://cs.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="cz flag"></i></a><a href="https://da.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="dk flag"></i></a><a href="https://el.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="gr flag"></i></a><a href="https://ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="es flag"></i></a><a href="https://et.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="ee flag"></i></a><a href="https://fi.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="fi flag"></i></a><a href="https://hi.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="in flag"></i></a><a href="https://hr.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="hr flag"></i></a><a href="https://hu.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="hu flag"></i></a><a href="https://id.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="id flag"></i></a><a href="https://it.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="it flag"></i></a><a href="https://ja.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="jp flag"></i></a><a href="https://ko.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="kr flag"></i></a><a href="https://lt.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="lt flag"></i></a><a href="https://lv.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="lv flag"></i></a><a href="https://ms.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="my flag"></i></a><a href="https://nl.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="nl flag"></i></a><a href="https://no.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="no flag"></i></a><a href="https://uz.ceadesc.org/article/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-473e10/"><i class="uz flag"></i></a></div>ceadesc.org<!-- --> © <!-- -->2020<!-- --> </footer></div></div></div></body></html>