Slik integrerer du Facebook Open Graph med WordPress

Facebook Open Graph-protokollen tillater deg å dele blogginnholdet ditt ikke bare med leserne dine, men deres Facebook-venner også. Den beste delen er - når noen likte Ditt innhold (er), det vil bli publisert på deres Facebook-profil. Men det er ikke alt, Open Graph lar deg utforske mer interessante måter å samhandle og engasjere seg med leserne dine. Til slutt - hvis dette er gjort riktig - bygger det opp merkevaren din og øker trafikken til nettstedet ditt.

I dagens innlegg skal vi se nærmere på hvordan å integrere Facebook Open Graph med et selvstendig WordPress i en detaljert trinnvis veiledning. Det krever at du redigerer eksisterende WordPress-temaer og lager et Facebook-program (hvis du ikke har en).

Klar? La oss brann opp nettleseren og favorittkodeditoren din. Full guide etter hopp.

Trinn 1. Opprett en Facebook App

Vi trenger en Program-ID og for å få det, må du opprette en Facebook-app. Hvis du allerede har en, går du videre til trinn 2.

Å lage et program er enkelt, her er hva du gjør:

1. Logg på Facebook, gå til utviklerens side.
2. Klikk på "Konfigurer en ny app"knappen øverst til høyre.
3. Gi et navn til den nye appen din, bli enige til Facebook vilkår, hit Opprett app.
4. Gå til Nettsted fan, fyll opp Nettstedets nettadresse og Nettsted Domene.
5. Merk ned verdien av Program-ID et sted og treffer "Lagre endringer"-knappen.

Det er alt! Du kan alltid komme tilbake senere for å fylle opp resten av informasjonen.

Trinn 2. Erstatt stikkord

Åpne temaets headerfil (Header.php) i din favorittredaktør. Ha alltid en sikkerhetskopi bare hvis noe går galt.

Se etter denne følgende kodelinjen, eller en som begynner med >

Erstatt den med:

Hold header.php åpen, vi kommer til å trenge det for tredje trinn.

Trinn 3. Sett inn OG tags

Lim inn følgende kode rett etter tag, eller før stikkord.

       "/>          

Her er noen av verdiene du må endre:

• Linje 3: Erstatt your_fb_app_id med Program-ID fra trinn 1.
• Linje 4: Du kan få your_fb_admin_id under Facebook Insights-siden din, (Mer info). Klikk på "Innsikt for ditt nettsted"grønn knapp, ta tak i hele koden og erstatt Linje 4.
• Linje 12: Denne linjen bestemmer bildet som representerer innlegget ditt. Hvis temaet ditt støtter WordPress Post Thumbnails, bør det fungere fint. Men hvis det ikke, vil det mislykkes grasiøst uten et bilde. Sjekk ut trinn 3a for en alternativ løsning.
• Linje 19: Bytt ut logo.jpg med en URL til bloggens blogg. Det vil bli vist når en ikke-innleggsside på bloggen din deles på Facebook.

Trinn 3a - Når "wp_get_attachment_thumb_url" feiler

Når wp_get_attachment_thumb_url () mislyktes i å jobbe, vil du sannsynligvis gå til en innholdsattributt uten verdi, som det som vises nedenfor:

En enkel løsning vil være å erstatte Linje 12 med følgende kode:

Deretter åpne opp functions.php og sett inn følgende kode:

funksjon catch_that_image () global $ post, $ posts; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// I ', $ post-> post_content, $ matches); $ first_img = $ kamper [1] [0]; hvis (tomt ($ first_img)) // Definerer et standardbilde $ first_img = "/images/default.jpg";  returner $ first_img; 

Denne erstatningskoden forsøker å bruke et funksjonsanrop catch_that_image () å ta tak i og utdata URL-adressen til det første bildet det kommer til å møte. Bytt linje 10 med URL til et standardbilde hvis funksjonen ikke klarer å finne sitt første bilde.

Trinn 4. Sett inn Facebook Javascript SDK

Følgende Javascript gir deg tilgang til alle funksjonene i Graph API og Dialogs. Det lar deg også integrere Facebook sosiale plugins som Like-knappen, Facepile, Anbefalinger, etc. med letthet.

Plasser den inn header.php, rett etter

Erstatte your_fb_app_id i linje 4 med Program-ID fra trinn 1 tidligere.

Trinn 5. La oss teste det!

Vi er ferdige med å integrere Facebook Open Graph til WordPress bloggen. La oss gi det et par prøver for å sikre at vi har gjort ting riktig.

Test # 1 - Se kildekoden

Ta en titt på kildekodene til et av blogginnlegget, du burde ha noe slikt:

Kontroller egenskapene og dens verdier, kontroller at de er riktige.

Test # 2 - Installer en liknende boks

Hvis du ikke har installert en Facebook Like Button, så er det nok tid til å få en. Plasser følgende kode hvor som helst (helst før innhold eller etter innhold) inne single.php:

Deretter får du en venn til Som den. Du bør se noe lignende som vises i hans Facebook-profil:

Ekstra: WordPress Plugin

Hvis du på en eller annen måte ikke klarte å installere kodene eller trenger dette, skal det gjøres raskt og enkelt - det er et WordPress-plugin for det.

Facebook Open Graph Meta i WordPress er et WordPress-plugin som legger til Facebook-metadata for å unngå ikke noe miniatyrproblem, feil tittelproblem, feil beskrivelsesproblem osv..