Kuinka muuntaa blogiviestit Facebookin pikaartikkeleiksi - koodausta ei tarvita

Ystäväni pyysi minua auttamaan muuntamaan artikkeleita, jotka oli aiemmin lähetetty heidän sivustolleen Facebookin pikaartikkeleiksi. Jälkeenpäin päätin laatia oppaan, jonka avulla ei-tekniset ihmiset auttavat muuntamaan vanhoja artikkeleitaan, blogiviestinsä tai online-sisältöään.

Vaikka et tiedä, mitä Facebookin pikaartikkelit ovat, saatat jo käyttää niitä. IA: n Facebookin UKK-sivun mukaan:

"Pikaartikkelit on mobiili julkaisumuoto, jonka avulla uutisten kustantajat voivat jakaa Facebookin sovellukseen artikkeleita, jotka ladataan ja näytetään jopa 10 kertaa nopeammin kuin tavallinen mobiiliverkko."

IA sanoo sisällön julkaisustandardin, joka johtaa sekä miellyttävään suunnitteluun että optimoituun suorituskykyyn artikkeleissa, jotka avataan Facebook-mobiilisovelluksessa. Voit lukea lisää vaikutustenarviointien eduista.

Facebook tarjoaa lukuisia tapoja nopeuttaa IA: n tuotantoa ja muuntamista. Näyttää kuitenkin siltä, ​​että nykyiset oppaat on tarkoitettu kehittäjille tai suurille yrityksille, joilla on monimutkaisempi julkaisujärjestelmä.

On vaikea löytää ohjeita aiemmin lähetettyjen artikkeleiden muuntamiseksi, joihin ei liity Facebook IA -sovellusliittymän, PHP SDK: n tai WordPress-laajennuksen käyttöä. Muille kuin kehittäjille suurin osa näistä työkaluista vaatii liikaa teknistä kokemusta. Jopa yritettäessä löytää WordPress-laajennuksen opetusohjelma, on kaivauduttava Facebookin kehittäjäportaalin dokumentaatioon. Tämä ei ole ihanteellinen muille kuin kehittäjille, jotka joutuvat huomiotta ennen kuin he eivät koskaan löydä tätä sivua.

Tehdään yhteistyötä muuntaaksesi kaikki verkossa jo julkaistut artikkelit Facebookin pikaartikkeliksi! Käytämme opetusohjelmaamme julkkiskoiria käsittelevän artikkelin elokuvasta Anchorman.

Let 's Groove!

Vaihe 0: Valmistele

Meidän ei tarvitse asentaa mitään laajennuksia tai integrointeja, mutta tarvitsemme tekstieditorin toimimaan HTML-lähdekoodin kanssa. Koodisuuntautuneita tekstieditoria on paljon erilaisia, mutta suosittelen tämän esimerkin vuoksi Sublimea. Siinä on kaikki tarvitsemme ominaisuudet, ja sitä on helppo käyttää ulkona pakkauksella uudella asennuksella.

Kun olet asentanut Sublime, haluamme ladata käyttämämme koodimallin GitHubGististä.

Näytön oikealla puolella:
1. Napsauta hiiren kakkospainikkeella "Raw" -painiketta
2. Napsauta "Tallenna linkki nimellä ..." Oletuksena sen pitäisi tallentaa HTML-tiedostona nimellä "malli".

Nyt meillä on koodieditori ja muokattava mallikoodi!

Viimeinen asennusvaihe:
1. Käynnistä ylpeä
2. Avaa lataamasi mallitiedosto

Vaihe 1: Bannerikuvan saaminen

Siirry takaisin Internet-selaimeesi ja etsi artikkeli, jonka haluat muuntaa sen live-sivustolta. Havaitsemme ensin bannerikuvan, jota käytämme Facebookin pikaartikkelin yläosassa.

Napsauta kuvaa hiiren kakkospainikkeella ja valitse ”Kopioi kuvan osoite”.

Vaihda takaisin malliin, joka meillä on auki Sublime-sovelluksessa. Etsi koodista

-koodi, joka sijaitsee rivillä 35 (rivinumero näkyy vasemmassa reunassa).

Korosta alkuperäinen rivi 36: n lainausmerkkien välissä oleva URL ja korvaa se liittämällä kuvan osoite, jonka kopioimme bannerikuvasta. Varmista, että URL-osoitteen molemmilla puolilla on kaksoislainaus muodon säilyttämiseksi. Ja varmista, että et poista ”/” ”rivin lopusta.
Muokkaa tekstiä 
sisällä tekstityksellä, jonka haluat näkyvän kuvan alla. Tähän kohtaan kuvan määritys menee usein.

Huomaa, kuinka olemme varovaisia, että emme muuta mitään koodin muotoilua. Itse tunnisteiden käyttäytyminen aiheuttaa virheitä myöhemmin, kun yritämme tehdä sivuston. Ylpeä värjäämme koodillamme, mikä auttaa meitä tunnistamaan virheitä tai HTML-tunnisteiden virheellisyyttä.

Kiinnitä erityistä huomiota siihen, kuinka korvasimme kuvion kuvatekstin tekstin. Aiomme muokata paljon muita arvoja täsmälleen samalla tavalla.

Vaihe 2: Metatietojen nouto

Siellä on vähän tietoa, joka meidän on kerättävä nyt. Koska suurimman osan näistä tiedoista pitäisi olla noudettavissa lähdekoodia etsimättä, näiden tietojen manuaalinen kopiointi toimii hyvin. Tarvitsemme tätä lähdekoodia kuitenkin myöhemmin, joten sen avaamiseen ei ole haittaa.

  • Alkuperäisen artikkelin URL-osoite
  • Artikkelin otsikko
  • Artikkelin alaotsikko
  • Artikkelin tekijä (t)
  • Päivämäärä ja aika -artikkeli on alun perin julkaistu
  • Päivämäärä- ja aika-artikkeli päivitettiin viimeksi

Jos näitä tietoja on vaikea saada, voimme käyttää verkkosivun lähdekoodia. Kuinka käytät näitä tietoja, riippuu käyttämästäsi selaimesta.

Chrome: CTRL + U tai napsauta hiiren oikealla painikkeella → Näytä sivulähde
Firefox: Napsauta hiiren kakkospainikkeella → Näytä sivulähde
Safari: Safari-valikko → Asetukset → Lisäasetukset, ota käyttöön "Näytä kehitä-valikko valikkopalkissa" ja valitse sitten Kehitysvalikko → Näytä sivulähde
Lähdekoodin tulisi muistuttaa tätä

Nyt kun olemme saaneet lähdekoodin ja alkuperäisen verkkosivuston, aloitetaan etsimään tietojamme.

Otsikko: Kopioi artikkelin otsikko ja korvaa se artikkelin otsikon

-tagoissa mallin 14. rivillä olevalla artikkelin otsikolla. Lähdekoodissa tämä on yleensä -tunnisteissa. Esimerkiksi,

artikkelin otsikko

tulee

15 minuuttia 'Anchorman'in kuuluisuuden kuuluisan koiran Baxterin elämässä

Tekstitys: Sama kuin yllä, mutta tekstityksen kanssa. Korvaa tämä artikkelin tekstitys mallin rivin

-tageissa.

URL: Kopioi aktiivisen verkkosivuston artikkelin URL-osoite. Korvaa tämä mallin rivillä 7 näkyvän URL-osoitteen avulla. Esimerkiksi:

tulee ...

Julkaisuaika: Mallin rivillä 18 voit nimetä päivämäärän ja ajan, jona artikkeli alun perin julkaistiin. Huomaa, että ”datetime” -parametri on hyvin tarkka muodossa. Datetime = ””: n sisältämät tiedot määrittävät metatiedot (ei näytetä), kun taas ”> ” -tunnisteiden välinen teksti sanelee mitä päivämäärä näytetään (voi olla missä tahansa muodossa tässä).

Esimerkiksi,
Näytetään seuraavasti: 11. marraskuuta 16.44
Muutetaan se: 24. heinäkuuta 2017 klo 18.30
Viimeisin päivitysaika: Sama suunnitelma kuin yllä, mutta mallin rivillä 21.

Tekijä (t): Mallin rivit 24–27 edustavat tekijää, jonka nimi linkittää johonkin verkkoon. Rivit 28–31 edustavat kirjailijaa, jonka nimeä ei ole linkitetty. Voit kopioida kyseisen kirjoittajan koko koodilohkon ja liittää sen peräkkäin aiempaan lohkoon ja muokata sen jälkeen tarvittaessa. Voit tehdä tämän myös useille kirjoittajille. Katso alla olevasta esimerkistä useita kirjoittajia, joilla on yksinkertainen nimi + kuvatekstit.

Vaihe 3: Kopioi rungon sisältö

Nyt noutamme artikkelisisällön, jonka haluamme muuntaa. Tarjolla on laaja valikoima sisältötyyppejä, kuten sekamedia, fancy JavaScript, upotettu sisältö. Monimutkaisemman sisällön tapauksessa on suurempi mahdollisuus, että asiat eivät toimi ilman vianmääritystä, joten mittarilukema voi vaihdella.

Aion selittää, kuinka työskennellä tekstin, kuvien (staattisten tai gif-tiedostojen) ja videon kanssa, koska nämä ovat perusta useimmille näkemälleni pikaartikkelelle.

Lähdekoodi on todennäköisesti satoja (tai jopa tuhansia) rivejä. Helppo temppu ruumiinsisällön alkuaikojen löytämiseen on tehdä ”Etsi” artikkelin kappaletekstin muutamalle ensimmäiselle sanalle. Haluamme kopioida kappaletekstin alussa olevasta

-tagista artikkelin loppusanoja seuraavan

-tagin kanssa (ja mukaan lukien).

Seuraavaksi meidän on hylättävä tämä malliin. Mallin rivin 58 lähellä tulisi olla seuraava rivi:

Artikkelin sisältö

Korosta tämä koko rivi ja liitä kappaleen sisältö, jonka kopioimme artikkelin live-lähdekoodista. Huomaa: kopioimme aloituskoodin

ja sulkeutuvan

, minkä vuoksi liitämme ne tähän malliin. Toisessa

-tunnistesarjassa on jotakin koodia, joka seuraa kehotekstiä, mutta sen muotoilu on varovainen - älä kopioi tätä kehotekstiisi.

* Onko sinulla video, jonka haluat sisällyttää vaikutustenarviointiin? Vaihda URL-osoite -tunnisteiden välillä riviltä 64 alkavalla tavalla, kuten teimme Banner Image URL -osoitteen kanssa vaiheessa 1.

Oikeudelliset huomautukset: Rivi 84. Tämä teksti on hyvin pieni ja artikkelin lopussa.

Vaihe 4: soittoäänet ja pillit (mainokset, Analytics-seurantakoneet ja muut)

Suosittelen ohittamaan tämän vaiheen toistaiseksi. Jos haluat vahvistaa, mitä olemme tehneet tähän mennessä, toimii, tai jos sinulla ei ole mukautettuja mainoksia tai seurantalaitteita, siirry vaiheeseen 5.

Yksi parhaimmista asioista Facebook Instant Artikkeleissa verrattuna muihin patenttijulkaisujen muuntamistyökaluihin on, että voit pitää omat sivustosi jo käyttämäsi mukautetut analyysiseurannan ja mainostiedot.

Jokainen mukautettu integraatio on erilainen ja todennäköisesti vaihtelee vaikeuksissa. Tässä esimerkissä käytämme ChartBeatia, liikenteen analysointi- ja seurantatyökalua. Voimme käyttää nopeaa Google-hakua ”ChartBeat Documentation” löytääksemme Aloitusoppaan.

Joidenkin yritysten dokumentaatiosivu on suunnattu kehittäjille. Jos se ei toimi sinulle, etsi sen sijaan opetusohjelma.

ChartBeat antaa meille kaikki koodit ja ohjeet niiden integroinnin lisäämiseksi.

Oppaassa se kertoo meille seuraavan, joten teemme sen:

Lisää tämä komentosarja juuri ennen sulkevaa  -tunnistetta:

Nyt kun olemme lisänneet ChartBeat-seurantalaitteemme, joudumme tekemään muutamia nopeita muokkauksia, jotta jäljitysosaa osaa synkronoida ChartBeat-tiliimme.

ChartBeat-koodinpätkän koodi, joka meidän on mukautettava

Jokainen korostettu rivi (paitsi “.useCanonical”) on muokattava, jotta se voi tallentaa tiedot.

MUUTOKSET (= =: n oikealla puolella)
.uid - ChartBeat-tilisi yksilöllinen tunnus
.domain - Alkuperäisen artikkelin koko verkkotunnus
.sections - sen osion / genren / tunnisteiden nimi, johon artikkelisi kuuluu
.authors - kirjoittajan nimi, joka liitetään tähän teokseen

Bingo! Olet lisännyt seurannan, ja se yhdistää lähettämät tiedot yksilölliseen ChartBeat-tiliisi. Tallenna muokattu mallitiedosto ja valmistaudutaan julkaisemaan.

Vaihe 5: Pikaartikkelin käyttöönotto

Siirry Facebookissa sen sivun hallintapaneeliin, josta haluat lähettää viestin. Siirry julkaisutyökaluihin ja artikkeliluetteloon. Napsauta oikeassa yläkulmassa olevaa sinistä “+ Luo” -painiketta.

IA-hallintapaneeli

Sinua pitäisi nyt kehottaa liittämään uuden artikkelin koodi.

Valitse kaikki koodit muokattavasta mallista ja liitä se tähän. Osuma pelastaa! Voit julkaista luonnoksen, kun näet sen sopivana, tai ajoittaa sen lähettämistä ennalta määrättyyn aikaan kojetaululla.

Onnittelut, olet valmis! En voi odottaa lukemasi mahtavia artikkeleita, joita aiot julkaista.

Hei, olen Nick Walsh.

Olen tekninen evankelista Wolfram Researchille ja Hackathon-valmentaja Major League-hakkeroinnille. Minulla on intohimo tekniikkaan, sähköiseen urheiluun ja opiskelijoiden kehittäjille.