Hvordan embedde Response

Her finner du en spesifikasjon av hva som kreves for å ta i bruk Response.

Innhold

Script-tagg

Script-taggen laster response.js asynkront og bør inkluderes så tidlig som mulig i DOM-treet.

Eksempel

Script-tagg som laster Response på polkaposten.

<script type="text/javascript"
          src="//amedia.o5.no/api/response/v1/js/response.js"
          id="response-loader"
          data-realm="apdm"
          data-preview-count="15"
          data-publication-domain="www.polkaposten.no"
          data-css-bundle="apressen"
          async="async"
          defer="defer">
</script>

Spesifikasjon attributter

src="<url til response.js>" (påkrevd)

id="response-loader" (påkrevd)

Eneste gyldige verdi er response-loader

data-realm="apdm" (påkrevd)

Eneste gyldig verdi er apdm

data-publication="<avis kortnavn>"

Påkrevd hvis data-publication-domain ikke er satt. Avisens unike kortnavn/identifikator, f.eks. oa, ba. Hvis denne er satt ignorereres en eventuell verdi for data-publication-domain

data-publication-domain="<avisens domenenavn>"

Påkrevd hvis data-publication ikke er satt. Må være avisens domenenavn, eks. www.oa.no, www.ba.no. Verdien av dette attributtet ignoreres hvis data-publication er satt.

Avisens kortnavn avleder vi utifra nest bakerste element av verdien splittet på ., mer spesifikt: publicationDomain.split(".").splice(-2)[0];

data-css-bundle="<apressen|eddamedia>" (påkrevd)

Hvis satt til apressen lastes stilark tilpasset tidl. A-pressen sine aviser. Hvis satt til eddamedia lastes stilark tilpasset tidl. Edda Media-aviser.

data-preview-count="<tall>" (valgfri)

Angir hvor mange kommentarer/bidrag som skal vises initielt.

defer og async

Disse to attributtene forteller nettleseren at scriptfilen kan lastes inn asynkront og vil dermed ikke blokkere lasting av andre script på siden.

Embed tag for kommentarfelt/responsfelt

Embed-taggen plasseres i DOM-treet der man ønsker at kommentarfeltet/responsfeltet skal vises.

Eksempel

<div data-sprig-component="response"
      data-kind="imagestream"
      data-hash-tag="#polkagris"
      data-article-id="666"
      data-article-url="http://www.polkaposten.no/polkanytt/article666.ece"
      data-auto-subscribe="author@polkaposten.no,another.author@polkaposten.no"
      data-title="Vis oss dine bilder av polkagrisen!">
</div>

Spesifikasjon attributter

data-sprig-component="response" (påkrevd)

Eneste gyldige verdi er response

data-kind="<imagestream|procon|question|conversation>" (påkrevd)

Angir responstypen som skal brukes. Følgene responstyper støttes:

data-article-id="<artikkel-id>" (påkrevd)

Hvilken artikkel (id) responsfeltet skal knyttes til.

data-article-url="<kanonisk-artikkel-url>" (påkrevd dersom artikkel er tilgjengelig på flere urler)

Artikkelens "kanoniske" url. Denne urlen vil bl.a. inkluderes i e-postmeldinger til de som ønsker å varsles ved nye innlegg i tråden. Dersom artikkelen har forskjellig url for mobil/desktop denne attributten settes til å være en url som videresender brukeren til riktig versjon. Verdien av dette attributtet må være en komplett og gyldig url, eks.:

http://www.polkaposten.no/polkanytt/article666.ece - Gyldig

www.polkaposten.no/polkanytt/article666.ece - Ikke gyldig

data-article-title="<tittel>" (anbefalt)

Artikkelen sin tittel. Vises i bl.a. i Refine (moderatorverktøy) for å vise hvilken artikkel en kommentar tilhører.

data-title="<tittel>" (påkrevd)

Dette vises i tittelen til responsfeltet. F.eks. "Har vi en boligboble i Norge? Kjør debatt!"

data-hash-tag="#<instagram hash tag>" (påkrevd for bildestrøm)

Hvilken hash tag bilder som legges ut på instagram må ha for å dukke opp i responsfeltet

data-auto-subscribe="<epostadresse>,<en epostadresse til>" (valgfri)

Komma-separert liste med epostadresser. Disse vil motta epost når det skjer noe i artikkelens samtale.

Telling på avisforsider

NB: Dette krever at script-taggen er inkludert på siden i henhold til beskrivelsen over.

For å vise en oppsummering/opptelling av antall kommentarer, etc. for en artikkel benyttes følgende html-snutt i DOM-treet der tellingen skal vises:

<div data-sprig-component="response.summary" data-article-id="666"></div>

Hva slags type tagg som brukes er valgfritt, det kan f.eks. være en <span> dersom det passer bedre inn i tekstflyten:

<span data-sprig-component="response.summary" data-article-id="666"></span>

Dette elementet vil fylles ut til å inneholde en oppsummering av antall kommentarer for den gitte artikkelen. Innholdet vil variere noe avhengig av hva slags kommentarfelt-type som brukes på artikkelen, men strukturen i markupen vil være lik på tvers av alle typene:

  <div class="responseIconWrapper">
    <i class="responseIcon responseIcon[Responstype]"></i>
  </div>
  <p>[Tekstinnhold]</p>

I tilleg til dette vil også den opprinnelige taggen få CSS-klasser som gjenspeiler typen kommentafelt som brukes på artikkelen.

Det betyr at følgende snutt:

<div data-sprig-component="response.summary" data-article-id="666"></div>

Vil, dersom artikkelen har for/mot-kommentafelt, bli gjort om til:

<div data-sprig-component="response.summary" data-article-id="666" class="responseSummary responseSummaryProcon">
<!-- ... -->
</div>

Her er noen eksempler:

Bildestrøm

<div data-sprig-component="response.summary" data-article-id="666" class="responseSummary responseSummaryImagestream">
  <div class="responseIconWrapper">
    <i class="responseIcon responseIconImagestream"></i>
  </div>
  <p>10 leserbilder</p>
</div>

For/mot, avstemning

<div data-sprig-component="response.summary" data-article-id="666" class="responseSummary responseSummaryProcon">
  <div class="responseIconWrapper">
    <i class="responseIcon responseIconProcon"></i>
  </div>
  <p>Skal vi ha elg i norsk natur? 4 av 7 er uenige.</p>
</div>

Rettet spørsmål

<div data-sprig-component="response.summary" data-article-id="666" class="responseSummary responseSummaryQuestion">
  <div class="responseIconWrapper">
    <i class="responseIcon responseIconQuestion"></i>
  </div>
  <p>Hva skal du gjøre etter at verden har gått under? 10 svar.</p>
</div>

Standard kommentarfelt

<div data-sprig-component="response.summary" data-article-id="666" class="responseSummary responseSummaryConversation">
  <div class="responseIconWrapper">
    <i class="responseIcon responseIconComments"></i>
  </div>
  <p>999+ kommentarer</p>
</div>

Endringslogg