Kako integrirati Facebook Open Graph s WordPressom

Facebook Open Graph protokol vam omogućuje da dijelite sadržaj vašeg bloga ne samo sa svojim čitateljima, već i sa svojim Facebook prijateljima. Najbolji dio je - kad god netko volio Vaš sadržaj (e) bit će objavljen na njihovom Facebook profilu. Ali to nije sve, Open Graph omogućuje vam istraživanje zanimljivijih načina interakcije i suradnje s čitateljima. Konačno - ako se to učini ispravno - gradi vaš brand i povećava promet vaše web-lokacije.

U današnjem postu ćemo istražiti kako integrirati Facebook Open Graph s WordPressom detaljni vodič korak po korak. To će zahtijevati uređivanje postojećih WordPress tema i stvaranje Facebook aplikacije (ako je nemate).

Spreman? Zapalimo preglednik i vaš omiljeni uređivač koda. Potpuni vodič nakon skoka.

Korak 1. Stvorite facebook aplikaciju

Trebat će nam ID aplikacije i da biste dobili to, morat ćete stvoriti Facebook App. Ako već imate jednu, prijeđite na 2. korak.

Izrada aplikacije je jednostavna, evo što radite:

1. Prijavite se na Facebook, idite na stranicu razvojnog programera.
2. Kliknite "Postavite novu aplikaciju"u gornjem desnom kutu.".
3. Dajte ime u svoju novu aplikaciju, složiti na uvjete za Facebook, pogodak Izradite aplikaciju.
4. Ići Web stranica karticu, ispunite URL web-lokacije i Domena web-lokacije.
5. Zabilježite vrijednost ID aplikacije negdje i pogodiSpremi promjene" dugme.

To je sve! Uvijek se možete vratiti kasnije kako biste popunili ostatak informacija.

Korak 2. Zamijenite Označiti

Otvorite datoteku zaglavlja svoje teme (Header.php) u svom omiljenom uređivaču. Uvijek čuvajte sigurnosnu kopiju samo u slučaju da nešto pođe po zlu.

Potražite sljedeći redak koda ili onaj koji počinje s >

Zamijenite ga s:

Zadržite header.php otvoren, trebat ćemo ga za treći korak.

Korak 3. Umetnite OG oznake

Zalijepite sljedeći kod odmah nakon ili prije označiti.

      "/>          

Evo nekih vrijednosti koje trebate izmijeniti:

• Redak 3: Zamijenite your_fb_app_id s ID aplikacije od 1. koraka.
• Red 4: Možete dobiti your_fb_admin_id na stranici Facebook Insights, (Više informacija). Klikni na "Uvid za vašu web-lokaciju"zeleni gumb, zgrabite cijeli niz koda i zamijenite red 4.
• Redak 12: ovaj redak određuje sliku koja predstavlja vaš post. Ako vaša tema podržava WordPress Post Thumbnails, trebala bi raditi dobro. Ali ako se to ne dogodi, neće uspjeti graciozno bez slike. Pogledajte korak 3a za alternativno rješenje.
• Redak 19: Zamijenite logo.jpg s URL-om na logotipu vašeg bloga. Prikazat će se kada se na vašem blogu dijeli stranica koja nije postavljena na Facebooku.

Korak 3a - Kada "wp_get_attachment_thumb_url" ne uspije

Kada wp_get_attachment_thumb_url () nije uspjelo, vjerojatno ćete prijeći na atribut sadržaja bez vrijednosti, kao što je prikazano u nastavku:

Jednostavno rješenje bit će zamjena retka 12 sljedećim kodom:

Zatim se otvori functions.php i umetnite sljedeći kôd:

funkcija catch_that_image () globalni $ post, $ postovi; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ matches); $ first_img = $ odgovara [1] [0]; if (empty ($ first_img)) // definira zadanu sliku $ first_img = "/images/default.jpg";  return $ first_img; 

Ovaj zamjenski kod pokušava koristiti poziv funkcije catch_that_image () da zgrabite i ispišete URL prve slike koja dolazi na susret. Ako funkcija ne pronađe prvu sliku, zamijenite liniju 10 s URL-om zadanom slikom.

Korak 4. Umetnite Facebook Javascript SDK

Sljedeći Javascript omogućuje pristup svim značajkama Graph API-ja i dijaloga. Također vam omogućuje da integrirate Facebook društvene dodatke poput gumba Like, Facepile, Preporuke, itd. S lakoćom.

Stavite ga u header.php, odmah nakon

Zamijeniti your_fb_app_id u retku 4 s ID aplikacije od 1. koraka ranije.

Korak 5. Testirajte ga!

Završili smo s integriranjem Facebook Open Grafa u WordPress blog. Dajmo nekoliko testova kako bismo bili sigurni da smo ispravno postupili.

Test # 1 - pregled izvornog koda

Pogledajte izvorne kodove jednog bloga, trebali biste imati nešto slično ovome:

Provjerite svojstva i vrijednosti, provjerite jesu li ispravni.

Test # 2 - Instalirajte sličan okvir

Ako niste instalirali Facebook kao gumb, vjerojatno je vrijeme da ga nabavite. Postavite sljedeći kod bilo gdje (po mogućnosti prije sadržaja ili nakon sadržaja) single.php:

Zatim nađi prijatelja Kao to. Trebali biste vidjeti nešto slično u svom Facebook profilu:

Dodatno: dodatak za WordPress

Ako nekako niste uspjeli instalirati kodove ili je to potrebno brzo i jednostavno - za to postoji WordPress dodatak.

Facebook Open Graph Meta u WordPressu je WordPress dodatak koji dodaje meta podatke na Facebooku kako bi se izbjeglo pojavljivanje sličica, pogrešno pitanje naslova, problem s pogrešnim opisom, itd..