Innhold
- Åpne Graph Protocol i et nøtteskall
- Starter
- Sette det grunnleggende
- Velge riktig Open Graph-type
- Aktiviteter
- Bedrifter
- Grupper
- Organisasjoner
- Mennesker
- Steder
- Produkter og underholdning
- Nettsteder
- Utvide metadataene dine
- Hva mer kan vi tilby?
- Oppdatere Open Graph-kodene
- Test før distribusjon
- Legge til en "Like" -knapp på siden din
I denne veiledningen skal vi se hvordan vi kan utnytte Facebooks Open Graph for å gjøre nettstedet vårt mer Facebook-vennlig. Å gjøre dette har mange fordeler, men hovedsakelig tillater det at den eksterne websiden din tilsvarer en Facebook-side. Derfor, når en bruker "liker" siden din, blir det koblet mellom siden din og brukeren. Siden din vises i delen "Liker og interesser" i brukerprofilen, og du har også muligheten til å publisere oppdateringer til brukeren. Du kan også definere kopien og miniatyrbildet som vises masse.
Så hvordan oppnår vi dette? Det er overraskende enkelt. Ved å tilby et strukturert datasett (ved hjelp av Open Graph Protocol) kan du definere hvordan nettstedet ditt blir representert på Facebook.
Åpne Graph Protocol i et nøtteskall
Open Graph Protocol ble opprinnelig opprettet av Facebook. Den opprinnelige versjonen er basert på RDFa (eller Resource Description Framework - in - attributter), som er et middel til å plassere ytterligere meta> tagger inn til hodet> på en webside, slik at den kan bli en gjenstand i en sosial graf, i dette tilfellet Facebook. Den er bygget ved hjelp av eksisterende åpne standarder i et forsøk på å skape et mer semantisk nett.
Starter
For å komme i gang og gjøre sidene dine om til grafobjekter, er alt du trenger å legge til den respektive Open Graph-protokollen meta> tagger og "Like" -knappen til siden (e) dine.
Vi vil dekke innebygging av "Like" -knappen litt senere, men først må vi jobbe med meta> koder for å definere sideobjektet.
Taggene vi bruker er ekstremt enkle å konstruere og ser ut som følgende:
meta property = "og: title" content = "Open Graph Tutorial" />
Du kan se at dette i det hele tatt er en gyldig metakode. Alt vi gjør er å bruke et egendefinert eiendomsattributt i form av og: eiendom. Selve egenskapene er definert av Open Graph-protokollen og dekker stort sett alt du trenger for å definere siden din (vi vil dekke dem nærmere om kort tid).
Open Graph-protokollen har fire nødvendige egenskaper:
og: tittel - Tittelen på objektet ditt (f.eks. "Open Graph Tutorial")
og: type - Typen objektet ditt er (f.eks. "Artikkel")
og: image - Et bilde som representerer objektet ditt
og: url - Den kanoniske URL-en til objektet ditt
Det er et par viktige punkter å vurdere med disse kravene:
Type - Dette må alltid være en gyldig objekttype, fra listen over støttede typer
Bilde - Bildet ditt må være minst 50 x 50 px med et maksimalt forhold på 3: 1
URL - Dette vil bli brukt som den unike, og permanente ID-en inne i grafen
Det er verdt å merke seg at du kan levere flere og: bildefelt; når en bruker “Deler” eller “liker” siden din, kan de velge hvilket bilde de skal bruke til å representere siden din i profilfeeden sin.
I tillegg til disse kravene har Facebook utvidet de grunnleggende metadataene til å legge til ytterligere to obligatoriske felt for å koble siden din til Facebook:
og: nettstednavn - Et lesbart navn for nettstedet ditt (f.eks. .Net Magazine)
fb: admins eller fb: app_id - En komma-delt liste over Facebook-bruker-ID-er eller applikasjons-ID-er
Du vil legge merke til at de siste er prefikset med ‘fb' i stedet for 'og'. Dette er fordi det gjør det mulig for Facebook å knytte inn eksakte bruker-ID-er eller applikasjons-ID-er som kan administrere siden. Det er gyldig å ta med begge deler på siden din, eller du kan bare la dem være utenfor hvis de ikke gjelder.
Facebook anbefaler at du inkluderer en annen eiendom, beskrivelseskoden:
og: beskrivelse - En kort beskrivelse (en til to setninger) av siden din.
Å inkludere beskrivelsesegenskapen er en fin måte å umiddelbart få den lille ekstra informasjonen ut til andre om siden din.
Sette det grunnleggende
Etter å ha fordøyd alt dette, er det fornuftig å se hvordan det hele ser ut når det settes sammen for å danne et gyldig Open Graph-objekt. Jeg skal bruke koden som jeg har lagt inn på en av mine personlige sider, brukt til å markedsføre noen mikser som jeg gjør:
! - FACEBOOK OPEN GRAPH -> meta property = "og: title" content = "Mike Mackay - House Warming Mix (Mai 2011)" /> meta property = "og: type" content = "mix" /> meta property = "og: image" content = "http://dj.mikemackay.co.uk/uploads/thumbnail.webp">
I Open Graph-koden min har jeg spesifisert typen som "mix". Du vil legge merke til fra den kommende listen at "miks" egentlig ikke er en definert objekttype: dette er akseptabel bruk i grafen, og jeg forklarer det med et øyeblikk. Jeg har også spesifisert min Facebook-bruker-ID som administrator for dette spesifikke objektet i grafen.
Velge riktig Open Graph-type
For at objektet skal bli representert i grafen, må du spesifisere typen. Som vi har sett, gjøres dette ved hjelp av egenskapen::. De tilgjengelige støttede objekttypene faller inn under åtte teppegrupper og er som følger:
Aktiviteter
- aktivitet
- sport
Bedrifter
- bar
- selskap
- kafe
- hotell
- restaurant
Grupper
- årsaken
- sportsliga
- Sports lag
Organisasjoner
- bånd
- Myndighetene
- ideell
- skole
- universitet
Mennesker
- skuespiller
- atlet
- forfatter
- regissør
- musiker
- politiker
- profil
- offentlig person
Steder
- by
- land
- landemerke
- state_province
Produkter og underholdning
- album
- bok
- drikke
- mat
- spill
- film
- produkt
- sang
- tv_show
Nettsteder
- artikkel
- blogg
- nettsted
For produkter som har UPC-kode eller ISBN-nummer, kan du i tillegg spesifisere dem ved hjelp av og: upc og og: isbn eiendommer.
For innhold som faller inn under kategorien "Nettsteder", anbefaler Facebook følgende:
"Bruk artikkel for hvilken som helst URL som representerer forbigående innhold - som en nyhetsartikkel, blogginnlegg, bilde, video osv. Ikke bruk nettsted for dette formålet. nettsted og blogg er designet for å representere et helt nettsted, et og: type tag med typer nettsted eller blogg skal vanligvis bare vises på roten til et domene. ”
Denne listen skal vise seg å være tilstrekkelig for folk flest og sider: Det er imidlertid anledninger at en bestemt objekttype ikke passer helt (i henhold til mitt "mix" -eksempel); i disse tilfellene kan du spesifisere din egen type. Ulempen med å gjøre dette er at disse typene vil bli representert i Facebook som "andre".
Facebook sier at den aktivt vil overvåke de mest brukte typene og legge dem til i listen over støttede og: typer etter hvert.
Utvide metadataene dine
På noen sider kan det være lurt å inkludere tilleggsdata om objektet, for eksempel plasseringen av en kafé, et selskap eller et hotell. Den åpne grafen lar deg tilfredsstille dette ved å lage så mange og: egenskaper som du trenger for å gi ekstra kontekst om websidene dine.
La oss si at vi har laget en side og laget et objekt om selskapet vårt, en restaurant i London. Vi kan deretter legge til ytterligere detaljer om vår beliggenhet og kontaktdata i grafen ved å oppgi våre egne egendefinerte egenskaper:
meta property = "og: street-address" content = "123 Any Street" /> meta property = "og: city" content = "London" /> meta property = "og: postnummer" content = "XY1 2ZZ" /> meta property = "og: country-name" content = "United Kingdom" />
Vi gir også kontaktinformasjon for bestillinger og spørsmål:
meta property = "og: email" content = "[email protected]" /> meta property = "og: phone_number" content = "02071234567" />
Ved å kombinere ytterligere metadata med våre nødvendige egenskaper på denne måten, kan vi levere en rekke verdifulle data rett inn i grafen.
Hva mer kan vi tilby?
Jeg er glad du spurte. Open Graph lar deg også legge direkte til lyd eller video. La oss si for eksempel at du er i et band (eller til og med har ansvaret for å promotere dem) og at du nettopp har gitt ut et nytt spor. Du vil ha mest mulig eksponering, og ved å feste media direkte, kan du maksimere publikum veldig enkelt.
meta property = "og: audio" content = "http://www.myband.com/song.mp3" /> meta property = "og: audio: title" content = "The Fictitious Song" /> meta property = " og: audio: artist "content =" Fictitious Band "/> meta property =" og: audio: album "content =" Fictitious Album "/> meta property =" og: audio: type "content =" application / mp3 "/ >
Når noen fortsetter med å "like" eller "dele" siden din, blir lyden tilgjengelig direkte i brukerens innlegg. Dette vil tillate noen av vennene sine å lytte til sporet direkte fra profilsiden sin.
Hvis vi i stedet ønsket å markedsføre bandets nye musikkvideo, kunne vi gjøre følgende:
meta property = "og: video" content = "http://www.myband.com/new-video.swf" /> meta property = "og: video: height" content = "640" /> meta property = " og: video: width "content =" 385 "/> meta property =" og: video: type "content =" application / x-shockwave-flash "/>
Høyde, bredde og type er valgfrie i dette tilfellet, men det er viktig å merke seg at på dette tidspunktet støtter Facebook bare videoinnbinding i SWF-format.
Hvis du vil at videoen din skal vises i nyhetsstrømmen, må du ta med en gyldig og: image-tag i markeringen din.
Oppdatere Open Graph-kodene
Når objektet ditt har kommet inn på Facebook, kan du oppdatere sidens Open Graph meta> tagger som normalt.
Det er ekstremt viktig å merke seg det og: tittel og og: type kan bare redigeres i utgangspunktet: når siden din mottar 50 "liker" og: tittel eiendom blir fast i grafen. Når siden din fortsetter å motta 10.000 "liker" og: type blir fikset.
Hvis du endrer dataene for disse egenskapene når de er blitt fikset, vil ikke endringen vises på Facebook, da den vil beholde de opprinnelige verdiene. Facebook gjør dette for å forhindre at du overrasker eller forvirrer brukere som allerede har likt siden din.
Test før distribusjon
En av de viktigste reglene for utvikling, som jeg er sikker på at du allerede vet, er at du tester, tester og tester på nytt før du setter noe i live. Mens meta> tags vil ikke påvirke noe direkte på siden, de har innvirkning på Facebook. Å ha ugyldige koder eller egenskaper forhindrer at siden din blir representert riktig og kan inneholde feil informasjon, eller verre, ingen informasjon: når alt kommer til alt, er maksimal eksponering det det handler om.
Heldigvis gir Facebook et nyttig verktøy. Når det gjelder Open Graph-testing, er det den offisielle Facebook URL Linter:
developers.facebook.com/tools/lint
Skriv inn din nye Open Graph-aktiverte URL (eller test URL), trykk "Lint" og Facebook vil hente innholdet ditt, analysere kodene dine og validere informasjonen din. Hvis den finner noe uheldig, vil du få en liste over advarsler og / eller feil, slik at du vet nøyaktig hvor du skal begynne å korrigere kodene dine. Rediger kodene dine etter behov, og test deretter bare på nytt i linteren.
Du kan teste siden din så mange ganger du trenger for å få den skipform og feilfri.
Legge til en "Like" -knapp på siden din
Den siste brikken i puslespillet er muligheten til å la brukerne enkelt “dele” eller “like” den eksterne siden din. Facebook vet at jo vanskeligere noe er å (programmatisk) oppnå, jo mindre sannsynlig er det at folk gjør det. Med det i tankene har Facebook utviklet et veldig enkelt verktøy for å hjelpe deg med å lage og implementere en "Like" -knapp på siden din:
developers.facebook.com/docs/reference/plugins/like/
I hovedsak er det to "Like" -implementeringer: XFBML og Iframe. XFBML-versjonen er mer allsidig, men krever at du laster inn Facebook JavaScript SDK på siden din. Iframe-versjonen gir deg fortsatt kjernebruk, men tillater ikke lytning av begivenheter eller dynamisk størrelse. Du bør velge metoden som passer best for siden din.
Når du har generert koden din, er det bare å lime den inn på nettstedet ditt. Oppdater siden din, og du bør se den kjente "Like" -knappen som pryder nettstedet ditt.
Med din meta> merker alt oppsett og din skinnende splitter nye "Like" -knapp på plass, bør du nå være klar til å distribuere ditt nye Open Graph-objekt til verden.
