Slik syndikerer du innhold uten å bruke en nyhetsstrøm

Mange nettsteder tilbyr syndikasjonsformater som RSS, JSON eller XML-baserte tjenester for å tillate enkel levering av innhold. Men hva skjer når et nettsted ikke tilbyr en av disse tjenestene? Hvordan kan du syndikat innhold fra et nettsted som ikke tilbyr en nyhetsmating? Dette er hva jeg satte opp for å løse.

Jeg mottok et prosjekt fra en klient med en oversikt og en kort beskrivelse av nettsiden og målene de ønsker å oppnå. Sammen med denne korte var notater som indikerer at de var et eiendomsforetak og regelmessig sendte eiendom til et velkjent eiendomsnettsted og ønsket å kunne synkronisere innholdet på dette eksterne nettstedet til sin egen nettside uten å måtte oppdatere begge sider. Fangst: Dette kjente eiendomsstedet tilbyr ikke en syndikasjonstjeneste eller API for utviklere å få tilgang til deres oppføringer.

Bruke JQuery's load ()

Etter å ha skyllet på Internett oppdaget jeg at de fleste løsninger på dette problemet var ugjennomtrengelige og mesteparten av tiden de var nettlesespesifikke eller ineffektive. Jeg bestemte meg for å kode min egen løsning ved hjelp av det populære javascript biblioteket JQuery.

For å få tilgang til informasjon fra et annet nettsted måtte jeg benytte AJAX-funksjonene i JQuery-biblioteket.

  

Hvis du er kjent med JQuery, burde ovennevnte ikke være for vanskelig å forstå. Vi bruker AJAX-lastfunksjonen til å laste inn en nettside innhold i et element med id #content. Løsningen virket for lett, men dessverre problemet, som du snart vil innse, er at koden bare vil fungere i Internet Explorer 6 eller 7. Årsaken til dette ble snart tydelig - alle andre nettlesere blokkerer lastingen av nettsteder fra alternative domener på grunn av lokale sikkerhetsinnstillinger. Dette betydde at vi bare kan laste relative sider ikke absolutt nettadresser.

En server-side løsning

Jeg så meg på nettet for å få en løsning på dette problemet, og for min forferdelse var de fleste enten under inntrykk av at det ikke var mulig å omgå de lokale sikkerhetsinnstillingene til de fleste nettlesere, eller det var for komplisert en oppgave så ikke verdt å gjøre. Dette er da jeg oppdaget cURL-biblioteket.

cURL er ganske nyttig ved at den lar deg kommunisere med andre servere ved hjelp av nettadresser og standard webprotokoller som HTTP, HTTPS eller SSL. Ved hjelp av cURL kunne jeg bygge en bypass til vårt lokale sikkerhetsproblem ved å laste inn i hele nettstedet til en lokal URL-server-side.

 

Denne koden starter cURL-objektet fra en ekstern URL - fordelen er at nettadressen er lastet på serveren i stedet for på klienten. Serverens sikkerhetsinnstillinger i PHP-miljøet er mye mer fleksible enn de lokale sikkerhetsinnstillingene til de fleste moderne nettlesere. Etter å ha startet cURL-objektet, skriver vi ut hele innholdet av nettadressen. Hvis vi nå lagrer dette dokumentet som 'curl.php' på vår webserver, har vi nå en lokal fil som vil laste inn hele nettstedet innholdet på vår eksterne URL.

La oss gå tilbake til vår originale kode og legge inn våre modifikasjoner:

  

Skriptet vårt støtter nå alle nettlesere og oppnås ikke ved hjelp av uortodokse lokale sikkerhetshacker.

Hvorfor bruke JQuery?

Nå kan du kanskje lure på hva er fordelene med å jobbe med dette dokumentet i JQuery i forhold til bare å manipulere dokumentet vårt ved hjelp av PHP? Hovedårsaken til mitt valg i bruk av JQuery er evnen til å bruke sine CSS-stilte seleksjoner for å velge hvilket innhold på vår side vi faktisk ønsker å syndikere, som følgende:

  

I stedet for å laste inn hele dokumentet laster vi bare inn innholdet i et element med id #content. Vi vil komme til fordelene med dette senere i artikkelen.

Bilder og ankre

Etter å ha spilt med dette for litt kan du merke det neste store problemet. Selv om vi har klart å syndikere et innhold på eksternt innhold, fungerer ikke alle relative lenker og bilder lenger. En annen grunn til å jobbe i JQuery. Ved å bruke JQuery hver () -funksjonen kan vi lage en loop som går gjennom alt og elementer som tar tak i den nåværende HREF- eller SRC-attributtet og prependerer det eksterne domenet på det.

 

Vi velger først alle elementer og syklus gjennom dem som utvider href-attributtet og deretter prepending vårt valgte domene til det. Vi kan også hvis vi vil legge til i et attributt for å åpne alle koblinger i nye vinduer, etc. For det andre velger vi alle elementer og igjen sykle gjennom dem å utvinne src attributtet, etc.

Nå er problemet på dette punktet vi løper inn, hvor integrerer vi vår nye kode i vår eksisterende kode? Problemet jeg opprinnelig kom over, var uansett hvor du sa det, den eksterne merkingen ble ikke lastet raskt nok for at vår kode skal endre domenet som skal tre i kraft etter det faktum. Løsningen innebærer å kombinere de to til en ganske elegant JQuery-løsning.

 $ ("dokument"). klar (funksjon () $ ("# innhold") .last ("curl.php #content", , funksjon () $ ("a"). hver ) Var href = $ (dette) .attr ('href'); var new_href = domain + href; $ (dette) .attr ('href', new_href););
    $ ("img"). hver (funksjon (i) var src = $ (dette) .attr ('src'); var new_src = domain + src; $ (dette) .attr ('src', new_src); ); ); );

Lastfunksjonen har to flere egenskaper det kan ta, en er variabler du vil sende til din eksterne URL. For eksempel kan du prøve å hente data fra resultatene av et POST-skjema. Den andre egenskapen er en tilbakeringingsfunksjon eller hva som skal gjøres når funksjonen last () er ferdig. I vårt tilfelle er dette perfekt - vi plasserer vår kode i tilbakeringingsfunksjonen som forhindrer det i å løpe til vi laster helt inn på vår eksterne side.

Som du kan se nå, er vi nå i stand til ganske enkelt å trekke inn noe element på vårt sideinnhold fra et annet nettsted. Dette er veldig praktisk
for ikke bare å syndicere innhold som nyheter, men noe dynamisk oppdatert innhold.

Styling vårt innhold

Nå som vi kan ha trukket inn innholdet vårt, viser neste trinn overlegenhet ved å bruke denne koden over si an