La performance compte, et les grands acteurs du Web abordent la performance à leur manière. La réponse de Google se présente sous la forme de son controversé AMP; un format de publication qui offre une expérience fluide pour leurs résultats de recherche mobile. Google classe même les annonces qui implémentent AMP plus favorablement.
De même, Facebook a mis au point sa propre initiative avec Instant Articles lui permettant de diffuser du contenu Web partagé sur son application mobile. immédiatement avec une expérience native-mobile. Le contenu qui a été validé en tant qu'article instantané sera marqué de l'emblème de la foudre lorsqu'il sera partagé n'importe où sur le fil Facebook..
Dans ce tutoriel, nous allons apprendre ce que sont les «articles instantanés» et comment vous pouvez transférer votre propre contenu vers cet outil de publication rapide. Allons-y!
1. Inscrivez-vous
Tout d'abord, vous devez disposer d'un accès administrateur ou éditeur à une page Facebook publiée..
Au moment de sa création, Instant Articles n'était disponible que pour les éditeurs de taille moyenne ou grande dont la page Facebook comptait au moins cent mille followers, ou aime, avec un public actif. Il n’est donc pas étonnant que mes pages n’aient pas le droit de souscrire à Instant Articles à cette époque! De nos jours, Facebook a ouvert Instant Articles pour tous les éditeurs de toutes tailles, il vous suffit de vous inscrire..
Ensuite, sélectionnez la page.
2. Vérifiez votre site Web
Vous devrez vérifier que vous êtes propriétaire du site Web en question en ajoutant le fb: pages balise méta dans le tête. N'oubliez pas d'ajouter l'URL et d'appuyer sur le bouton URL de revendication pour finaliser la vérification. Vous pouvez vérifier plusieurs URL si votre site comporte plusieurs canaux ou sous-domaines, tels que Moyen et Tuts + (webdesign.tutsplus.com, code.tutsplus.com, etc.)..
Entrez les détails et appuyez sur "Demander l'URL"
3. Formatez le balisage
Avant de pouvoir publier régulièrement des articles instantanés, vous devez soumettre au moins cinq articles pour révision. Ces articles doivent utiliser un formatage conforme à Instant Article, par exemple:
Titre
Sous-titre
Zuck Zuck est le PDG de Facebook. Tête de couverture fraîche
Création de sites web
Lorem ipsum dolor sit amet, consectetur elipisicing elit. Doloremque doloribus quia quasi soluta atque veniam harum! Voluptatum facilis placeat soluta molestias, presque quos pariatur moins corporis, suite à quoi.
Lorem ipsum dolor sit amet, consectetur elipisicing elit. Ex quam maxime voluptas nostrum omnis eaque vero eius perspiciatis aliquam hic fugiat nobis debitis asperiores facilis ullam, null voluptatum animi. Quo!
Légende
Lorem ipsum dolor sit amet, consectetur elipisicing elit. Ex quam maxime voluptas nostrum omnis eaque vero eius perspiciatis aliquam hic fugiat nobis debitis asperiores facilis ullam, null voluptatum animi. Quo!
Comme vous pouvez le voir ci-dessus, le format Instant Articles est une structure HTML sémantique simple avec des classes et des attributs spéciaux. L'image, par exemple, a la mode de données attribut mis à plein écran qui rendra l'image en plein écran. Dans l’autre image, nous avons un retour d'information ensemble d'attributs qui permettra à nos utilisateurs de donner un «J'aime» et d'attacher des commentaires directement à l'image.
Un couple de balises méta personnalisées sont également ajoutés dans le tête tag tel que le fb: article_style balise qui définit les styles de contenu. De plus, le canonique la balise méta doit pointer vers l'article original; Un facteur qui conduit de nombreux éditeurs à préférer les Instant Articles de Facebook à Google AMP. Google AMP est beaucoup plus énigmatique quant à l'emplacement du travail original.
4. Soumettez votre contenu
Une fois que vous l'avez prêt, soumettez le contenu à Facebook.
Il existe deux manières de soumettre votre contenu. Tout d'abord, vous pouvez le poster directement via votre compte Facebook. Dans le Outils de publication l'écran, vous devriez trouver le + Créer bouton qui vous mènera au formulaire pour poster le code HTML.
La deuxième approche consiste à fournir une URL de fil contenant le contenu. Cette approche peut prendre un certain temps à mettre en place en fonction de la plate-forme sur laquelle votre site Web est construit. Heureusement, un plugin est disponible pour les plates-formes populaires telles que WordPress et Drupal, ce qui facilite un peu la transformation de votre contenu en un format XML compatible..
Article instantané pour WordPress
Article instantané pour Drupal
Néanmoins, la soumission manuelle du contenu est le moyen le plus rapide de publier votre contenu sous forme d'article instantané, en particulier au cours de ces premières étapes..
5. Aperçu de l'article
Pour prévisualiser le contenu que vous avez soumis, vous devez installer l'application mobile Facebook Page Manager.. Articles instantanés est accessible dans le Réglages menu sur la page Toolbar.
Gestionnaire de pages Facebook pour Android
Gestionnaire de pages Facebook pour iOS
6. Personnaliser les styles de contenu
Styler Instant Articles est tout à fait simple, mais aussi restrictif. Facebook fournit une interface pour modifier certains composants de l'article tels que la famille de polices, la couleur de la police, le logo, etc. Si vous avez créé un style personnalisé, assurez-vous que le nom du style correspond à la valeur définie dans fb: article_style balise META.
7. Attendre les résultats du processus d'examen
Le processus d'examen peut prendre jusqu'à trois jours et votre soumission pourrait ne pas être acceptée immédiatement. Des erreurs de code ou des problèmes de style peuvent empêcher la publication. Une fois, j'ai dû réorganiser la position de l'en-tête de l'image sur un article afin qu'il paraisse plus similaire à celui du site Web..
Néanmoins, une fois que vous avez été approuvé, vous pouvez ajouter l’URL du flux afin de transférer automatiquement le contenu dans les articles instantanés..
Emballer
Facebook Instant Articles pose certaines limitations qui pourraient constituer une pierre d'achoppement pour certains sites Web. Par exemple, il ne supporte pas le pré élément qui est une balise courante utilisée sur les blogs de développement pour restituer des extraits de code. Les articles contenant cette balise ne sont pas valides selon le standard Instant Articles. Pour cette seule raison, vous pourriez ne pas voir des sites comme Envato Tuts + ou Smashing Magazine dans Instant Articles.
Cela ne répond même pas au «devrait» dans tout cela. Comme John Gruber l'a déclaré, en particulier lors de la discussion sur Google AMP:
«Si vous êtes un éditeur et que vos pages Web ne se chargent pas rapidement, la solution sensée est de réparer votre site Web f *** king de manière à ce que les pages se chargent rapidement, de ne pas jeter les mains en l'air et de mettre en œuvre AMP.» - John Gruber
En tant que développeurs Web, notre travail consiste de plus en plus à préserver la compatibilité des contenus sur différentes plates-formes telles que AMP, Instant Articles et, si vous êtes chanceux, sur Apple News quelques années avec l’émergence de nouveaux outils comme Webpack, React, Vue, etc.)
Les développeurs ont récemment lancé une nouvelle initiative baptisée Progressive Web App (PWA). Pour les sites qui ne sont pas en mesure d'implémenter Instant Articles ou AMP, PWA peut constituer une excellente alternative. Nous examinerons cela dans le prochain tutoriel, je vous y verrai!
Ressources supplémentaires
Documentation Facebook Instant Articles
Articles instantanés Facebook pour des exemples de code
Accentsconagua
Share
Entrez les détails et appuyez sur "Demander l'URL"
