Le prestazioni contano e i grandi giocatori del web si stanno rivolgendo alle prestazioni a modo loro. La risposta di Google arriva sotto forma del suo controverso AMP; un formato di pubblicazione che offre un'esperienza fluida per i risultati di ricerca mobile. Google classifica persino gli elenchi che implementano AMP in modo più favorevole.
Facebook, allo stesso modo, ha ideato la propria iniziativa con Instant Articles permettendogli di pubblicare contenuti web condivisi sulla sua app mobile immediatamente con un'esperienza nativa mobile. Il contenuto che è stato convalidato come articolo istantaneo verrà contrassegnato con l'emblema del fulmine quando è condiviso in qualsiasi punto del feed di Facebook.
In questo tutorial impareremo cosa sono gli "Articoli istantanei" e come puoi trasferire i tuoi contenuti a questo strumento di pubblicazione rapida. Andiamo!
1. Iscriviti
Innanzitutto, è necessario disporre dell'accesso come amministratore o editor a una pagina Facebook pubblicata.
Al momento del suo avvio, Instant Articles era disponibile solo per editori di grandi e medie dimensioni la cui Pagina Facebook aveva almeno centomila follower, o mi piace, con un pubblico attivo; non c'è da meravigliarsi che le mie pagine non fossero idonee a registrarsi per gli articoli istantanei! Al giorno d'oggi, Facebook ha aperto gli articoli istantanei per tutti gli editori di tutte le dimensioni, è sufficiente registrarsi.
Quindi, seleziona la pagina.
2. Verifica il tuo sito web
Dovrai verificare di essere il proprietario del sito web in questione aggiungendo il FB: pagine meta tag all'interno del capo. Non dimenticare di aggiungere l'URL e premere il tasto Richiedi URL per finalizzare la verifica. Puoi verificare più URL nel caso in cui il tuo sito comprenda un numero di canali o sottodomini, come Medium e Tuts + (webdesign.tutsplus.com, code.tutsplus.com, ecc.).
Inserisci i dettagli e premi "Richiedi URL"
3. Formattare il markup
Prima di poter pubblicare regolarmente articoli istantanei, è necessario inviare almeno cinque articoli per la revisione. Questi articoli dovrebbero utilizzare la formattazione conforme all'articolo istantaneo, ad esempio:
Titolo
Sottotitolo
Zuck Zuck è il CEO di Facebook. Cool intestazione del coperchio
Web design
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque doloribus quia quasi soluta atque veniam harum! Voluptatum facilis placeat soluta molestias, dolore quasi quos pariatur minus corporis, consequatur amet facere.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quam maxime voluptas nostrum omnis eaque vero eius perspiciatis aliquam hic fugiat nobis debitis asperiores facilis ullam, nulla voluptatum animi. quo!
Didascalia immagine
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quam maxime voluptas nostrum omnis eaque vero eius perspiciatis aliquam hic fugiat nobis debitis asperiores facilis ullam, nulla voluptatum animi. quo!
Come puoi vedere sopra, il formato di Instant Articles è una semplice struttura HTML semantica con classi e attributi speciali. L'immagine, per esempio, ha il Dati-mode attributo impostato su a schermo intero che renderà l'immagine a schermo intero. Nell'altra immagine, abbiamo a Dati-feedback insieme di attributi che consentirà ai nostri utenti di dare un "Mi piace" e allegare commenti direttamente all'immagine.
All'interno del file vengono aggiunti anche un paio di meta tag personalizzati capo tag come il fb: article_style tag che definisce gli stili di contenuto. Inoltre, il canonico il meta tag dovrebbe puntare all'articolo originale; un fattore che porta molti editori a preferire gli articoli istantanei di Facebook su Google AMP. Google AMP è molto più criptico sulla posizione del lavoro originale.
4. Invia il tuo contenuto
Una volta pronto, invia il contenuto a Facebook.
Ci sono due modi per inviare il tuo contenuto. In primo luogo, puoi postarlo direttamente tramite il tuo account Facebook. All'interno del Strumenti di pubblicazione schermo, dovresti trovare il + Creare pulsante che ti porterà al modulo per pubblicare il codice HTML.
Il secondo approccio prevede la fornitura di un URL del feed che contenga il contenuto. Questo approccio potrebbe richiedere del tempo per essere configurato a seconda della piattaforma su cui è basato il tuo sito web. Fortunatamente, un plugin è disponibile per piattaforme popolari come WordPress e Drupal che rende un po 'più facile trasformare i tuoi contenuti in un formato XML compatibile.
Articolo istantaneo per WordPress
Articolo istantaneo per Drupal
Tuttavia, l'invio manuale del contenuto è il modo più rapido per pubblicare i tuoi contenuti come articolo istantaneo, specialmente durante queste fasi iniziali.
5. Visualizza l'articolo in anteprima
Per visualizzare l'anteprima del contenuto che hai inviato, dovrai installare l'app mobile di Facebook Page Manager. Articoli istantanei è accessibile nel impostazioni menu sulla barra degli strumenti della pagina.
Gestore di pagine Facebook per Android
Gestore di pagine Facebook per iOS
6. Personalizza gli stili di contenuto
Styling Instant Articles è decisamente semplice, ma anche restrittivo. Facebook fornisce un'interfaccia per modificare alcuni componenti dell'articolo come la famiglia di caratteri, il colore del carattere, il logo, ecc. Se hai creato uno stile personalizzato, assicurati che il nome dello stile sia abbinato al valore impostato in fb: article_style meta tag.
7. Attendi i risultati del processo di revisione
Il processo di revisione può richiedere fino a tre giorni e la tua presentazione potrebbe non essere immediatamente accettata. Potrebbero esserci errori di codice o problemi di stile che impediscono la pubblicazione. Una volta ho dovuto riorganizzare la posizione dell'intestazione dell'immagine su un articolo in modo che apparisse più simile a quella sul sito web.
Tuttavia, una volta approvato, puoi aggiungere l'URL del feed per inviare automaticamente il contenuto a Instant Articles.
Avvolgendo
Gli articoli istantanei di Facebook presentano alcune limitazioni che potrebbero rappresentare un ostacolo per alcuni siti Web. Ad esempio, non supporta il pre elemento che è un tag comune utilizzato nei blog di sviluppo per il rendering di snippet di codice. Gli articoli che contengono questo tag non sono validi secondo lo standard Instant Articles. Solo per questo motivo potresti non vedere siti come Envato Tuts + o Smashing Magazine su Instant Articles.
Questo non si rivolge nemmeno al "dovrebbe" in tutto questo. Come ha affermato John Gruber, in particolare quando si parla di Google AMP:
"Se sei un editore e le tue pagine web non si caricano velocemente, la soluzione sana è quella di sistemare il tuo sito web f *** king in modo che le pagine si caricino velocemente, non di alzare le mani in aria e implementare l'AMP." - John Gruber
Il nostro lavoro come sviluppatori web è diventato sempre più importante per mantenere il contenuto compatibile con diverse piattaforme come AMP, Instant Articles e, se si è fortunati, anche Apple News (per non parlare di come il flusso di lavoro front-end sia cambiato drasticamente in un solo un paio d'anni con l'emergere di nuovi strumenti come Webpack, React, Vue, ecc.)
Recentemente, gli sviluppatori hanno ideato una nuova iniziativa coniata Progressive Web App (PWA). Per i siti che non sono in grado di implementare Instant Articles o AMP, PWA potrebbe essere un'ottima alternativa. Lo esamineremo nel prossimo tutorial, ci vediamo lì!
Ulteriori risorse
Documentazione di articoli istantanei di Facebook
Articoli istantanei di Facebook per esempi di codice
Accentsconagua
Share
Inserisci i dettagli e premi "Richiedi URL"
