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.
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.
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.
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.
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.
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.
Nå som vi kan ha trukket inn innholdet vårt, viser neste trinn overlegenhet ved å bruke denne koden over si an
$ ("dokument"). klar (funksjon () $ ("# innhold"). last ("curl.php #content", , funksjon ()
I dette tilfellet velger vi bare en
Vi skal nå legge til noen stiler på siden vår ved hjelp av CSS.
kropp, en font-familie: 'Tahoma'; farge: #fff; bakgrunnsfarge: # 000; skriftstørrelse: 12px; # innhold bredde: 600px; #innhold liten, #innholdspanel, #content .more-link display: none; #content img float: left; margin-høyre: 5px; #innhold h1
skriftstørrelse: 14px;
Dette CSS handler om å demonstrere noen viktige funksjoner enn å være estetisk tiltalende. Noen viktige ting å merke seg på dette punktet er at vi må huske å tilordne stiler nøyaktig til merkene vi ser på styling - I.E. ikke stil alt koder - vi vil bare stilte dem i #content En annen ting vi kan gjøre for å få vår nyhetssyndikator til å ta opp mindre plass på skjermen, er å endre bildene. Dette kan gjøres ved hjelp av CSS, men i stedet vil jeg demonstrere ved hjelp av JQuery å endre kilden til bildet. Vi skal endre vår JQuery for å bruke attr () -funksjonen til å endre kilden til bildet vårt på vår egen server - en fin, liten koblingsknapp. Nå kan vi endre CSS litt for å få bildet til å flyte pent til venstre. Nå, ved å bruke kun innhold syndikert fra Net Tuts + hjemmeside, har vi klart å bygge en nyhetssyndikator med helt annen styling til det opprinnelige nettstedet. Det du kanskje merker når du bruker denne koden, er at det tar litt tid før JQuery å behandle og laste inn det eksterne nettstedet. En fin funksjon å legge til er en lastelinje til #content Den enkleste måten å lage lastelinjen på er å plassere et lastebarbil i vårt #content Vi har nå en fin liten applikasjon som viser et forhåndsbelastende bilde til innholdet vårt er klar til å vises. Mens preloader er en fin funksjon, er det ikke en erstatning for optimalisert kode. I denne opplæringen bruker vi JQuery til å velge hvilke elementer vi skal velge eller ikke når faktisk den mest hurtige optimale løsningen ville være å gjøre det i vår PHP-kode. Dette skjønt er utenfor omfanget av denne opplæringen. Der har vi det - en enkel løsning ved hjelp av JQuerys AJAX-funksjoner og PHPs cURL-bibliotek som gjør at vi kan syndikere eksternt innhold. Dette er en enkel løsning hvis du trenger innhold fra en ekstern nettside. Som jeg allerede har nevnt, selv om JQuery sin enkle syntaks og CSS-selektorer gir oss bekvemmeligheten til styling og valg av det vi ønsker fra klientsiden, er dette ikke fartoptimalisert. Det beste ville være for oss å fjerne kodene vi ikke vil bruke regelmessige uttrykk i PHP. Jeg vil også merke seg at en av de vanligste feilene blir for spesifikk når styling; husk at du ikke har kontroll over hvorvidt innholdsskaperen endrer hvilke koder eller klasser de bruker, det er alltid best å stile generelle elementer som blir vanlig brukt. En annen ting verdt å ta hensyn til er at denne opplæringen er ment å generere en innholdssyndikator - den er ikke ment å brukes som et nettstedinnhold 'skraper'. Hvis du skal implementere dette i et kommersielt prosjekt, må du sørge for at du har tillatelse fra rettighetshaveren til å bruke innholdet på siden din. Endre bilder ved hjelp av JQuery
... () # content img). Hver (funksjon (i) var src = $ (dette) .attr ('src'); var new_src = domain + src; $ (dette) .attr ('href' new_src);); $ ("# content img"). attr ('src', 'link.png'); ); );
#content img float: left; margin-høyre: 5px;
preloader
...
Mitt Content Syndication Service
... Konklusjon