Filament Nettstedet Plugins som fungerer overalt

Hvis du noen gang har jobbet med et CMS som WordPress, er det sannsynligvis at du er kjent med hvordan plugins fungerer. Når du trenger ekstra funksjonalitet som sosiale delingsknapper, Google Analytics, nyhetsbrevabonnement og så videre, installerer du bare et plugin og funksjonaliteten du trenger er lagt til.

Filament fungerer veldig mye på samme måte, og gir deg "apps" som lar deg legge til sosiale delingsknapper, Google Analytics, nyhetsbrevabonnementer og annen ekstra funksjonalitet til nettstedet ditt. Men det er en stor forskjell mellom filament og en hvilken som helst sammenlignbar prosess:

Filament apps fungerer overalt, fra statiske HTML-nettsteder til de som drives av noen CMS

Hvis du ser en Filament-app du liker, er du fri til å bruke den om du har et statisk nettsted, et WordPress-nettsted, et Ghost-nettsted, et Drupal-nettsted, en hvilken som helst type nettsted i det hele tatt. Du inkluderer en liten utdrag av JavaScript i hovedsiden på nettstedet ditt, så du kan dra og slippe apper til nettstedet ditt via filamentpanelet for å legge dem til på noen få sekunder.

Registrer og Koble til Filament.io

Det første trinnet er å gå over til http://filament.io og bla ned til selve bunnen der du vil se en Registrer deg gratis knapp.

Du vil bli tatt gjennom for å registrere hvor du har muligheten til å logge på med Google+ eller Facebook, eller å opprette en ny konto. Når du er logget på, blir du bedt om å sette inn domenet til nettstedet ditt:

Merk: Vær oppmerksom på at du ikke kan bruke en adresse med en undermappe på slutten. Du må bruke et underdomene eller toppnivå domene. 

Etter å ha klikket på neste knappen vil du bli utstyrt med en JavaScript-kode for å kopiere og lime inn i nettstedets hodeavdeling, eller før den avsluttende kroppstegnet:

Merk: Hvis du bruker WordPress, kan du gjøre dette trinnet lettere gjennom det offisielle Filament-plugin.

Når du har lagt til koden til nettstedet ditt, kan du komme tilbake og klikke på Test forbindelsen din knapp. Hvis du har koblet nettstedet ditt til Filament.io, får du et grønt lys og kan treffe Ferdig knappen for å fortsette.

Når du tester forbindelsen, piler Filament hjemmesiden din, så hvis snippet er plassert på sider annen enn hjemmesiden kan du fortsatt få et rødt lys. Så lenge snippet er tilstede på sidene der det trengs, vil du være god til å gå.

Les mer om hvorfor dette er

Legge til Filament.io Apps

Fra Filament.io Dashboard ser du hele samlingen av programmer du kan bruke for øyeblikket. Akkurat nå er det seks apper å velge mellom, med en annen åtte på vei.

For å legge til en app på nettstedet ditt, klikk på startknappen, og klikk deretter på domenet til nettstedet du ønsker å legge til det.

Dette tar deg til filamentets dra og slipp-grensesnitt, som gir deg et levende forhåndsvisning av nettstedet ditt slik at du kan sørge for at alt ser ut akkurat som du vil før du går videre.

Klikk på + NY knappen for å lage en ny forekomst av appen du legger til:

Du får muligheten til å gi et navn til app-forekomsten din, og angi preferansen din for flere forskjellige innstillinger som kontrollerer alt fra funksjonaliteten til appen til farge, stil og plassering:

Når du er ferdig, klikk LAGRE INNSTILLINGER og du får se din nye app-forekomst vises i sidefeltet.

Dra og slipp din nye app-forekomst fra sidefeltet til forhåndsvisning av nettstedet ditt, og det vil automatisk bli satt inn.

Når du er klar, klikker du på PUBLISERE knappen i øverste høyre hjørne.

Du bør nå se appen på plass på ditt nettsted. Et notat på grensesnittet sier at det kan ta noen minutter før endringer vises, men for meg viste endringene øyeblikkelig.

Du kan legge til så mange forskjellige programmer som du vil. Ta en titt på denne enkle demoen for å se Flare og Ivy apps kjører.

Den nåværende filamentlinjen

Som nevnt ovenfor, er det for tiden seks apper tilgjengelig via Filament.

flare

Flare-appen legger til en flytende sosiale delingslinje til siden av nettstedet ditt. Du kan konfigurere den til å vise lenker til ni forskjellige tjenester, pluss e-post. Det vil også holde styr på antall aksjer som er gjort gjennom det for hver tjeneste, med totalt antall "bluss" som vises øverst.

Eføy

Ivy er en ganske fin app som lar besøkende markere alle deler av teksten og sende den ut til vennene sine via Facebook, Twitter eller Email.

Pass

Passport-appen lar deg vise en liten avatar av deg selv, omgitt av flyouts med koblinger til de ulike sosiale nettverkene du er på, og kontaktmetoder du kan ha.

CodeDrop

CodeDrop gir deg mulighet til å sette inn HTML eller JavaScript på nettstedet ditt, uten å redigere nettstedets kode. Du får et felt der du kan lime inn kode for ting som webskjemaer, spørreundersøkelser, ekstra innhold og så videre. Du kan da velge hvilken posisjon du vil sette inn koden, enten øverst eller nederst på hodeseksjonen, øverst eller nederst i kroppsdelen eller på en egendefinert plassering.

MailChimp

For mange som er nye til å jobbe med sin egen nettside, kan integrerende nyhetsbrevabonnement være en veldig skremmende prosess. Mailchimp-appen gir deg mulighet til å dra og slippe et nyhetsbrev uten å måtte kaste seg med kode.

Google Analytics

Integrering av Google Analytics-koden er et annet område som har vært en stor hodepine for mange som starter med sine egne nettsteder. Filamentens Google Analytics-app betyr at folk ikke trenger å bekymre seg for å prøve å finne riktig sted å legge til koden sin. De kan bare lim inn i sporings-ID, dra og slipp appen, og de er borte.

Filament Apps på veien

Det er ytterligere åtte apper som er oppført på Filament-nettsiden som under utvikling.

  • Crazy Egg - Se de besøkendees oppførsel med varmekart
  • FlipJack - Gjør mer handling i din oppfordring
  • high - En bedre måte å kommentere på webinnhold
  • SideCar - Ta med relatert innhold sammen for turen
  • SlideDeck App - Utrolig glidebryter, ingen kode nødvendig
  • Mixpanel - Følg brukeradferd og se på nettstedstrender
  • Olark - Live chat med besøkende fra ditt nettsted
  • Optimizely - A / B-test og optimaliser nettstedet ditt uten koding

Hvis noen av disse appene hopper ut som noe du vil gjerne bruke, kan du gå til filamentwebstedet og stemme på det for å hjelpe teamet til å vite hvor de foretrekker deres utviklingstid.

Hvem er filament for?

Hvem kan mest dra nytte av å bruke filament? Det avhenger av hvilken av programene du ser på, typen nettsted du har tenkt å bruke appen på, og hvem brukerne vil være.

Apper som CodeDrop, Mailchimp og Google Analytics ville være fantastiske for folk som ikke er komfortable med direkte redigeringskode. For webdesignere er dette potensielt en fantastisk måte å tilby kundene muligheten til å ta vare på vanlige oppgaver som de ellers vil bli sittende fast på.

Jeg vet i egen tid freelancing det har vært flere personer jeg jobbet med som ville ha elsket å få hendene på funksjonalitet som dette. Integrering av filamentstykket kan gjøres som en del av et nettstedskapingsprosjekt, og fra det tidspunktet vil klientene kunne ta kontroll over ting de heller ikke vil måtte komme tilbake til for.

Når det gjelder programmer som Flare, Ivy og Passport, er det potensielt for alle som er gitt, de er ganske unike og gir sin egen stil og metode for sosial interaksjon.

Alle de nåværende appene, så vel som de som kommer i fremtiden, kan også være gode for nettsteder som kjører på plattformer som ikke gir seg god tilpasning, eller tjenester som bevisst forhindrer omfattende koderedigering. Med det lille kravet om å kunne inkludere en JavaScript-kodestykke, åpnes det mange muligheter som ellers kanskje ikke er tilgjengelige.

Lær mer og prøv filament

For å lære mer om Filament, stem på appene du vil se snart, og for å prøve tjenesten for deg selv, gå til http://filament.io