Kako integrirati Facebook Open Graph z WordPressom

Protokol Facebook Open Graph vam omogoča, da vsebino svojega spletnega dnevnika delite ne samo s svojimi bralci, ampak tudi s prijatelji Facebook. Najboljši del je - kadarkoli nekdo všeč vsebino (e), bo objavljena v njihovem Facebook profilu. Ampak to še ni vse, Open Graph vam omogoča, da raziščete bolj zanimive načine za interakcijo in sodelovanje s svojimi bralci. Konec koncev - če se to izvede pravilno - zgradi vašo blagovno znamko in poveča promet vaše spletne strani.

V današnji objavi bomo pregledali kako integrirati Facebook Open Graph s samo-gostujočim WordPressom podroben vodnik po korakih. Potrebovali boste urejanje obstoječih WordPress tem in ustvarjanje aplikacije Facebook (če je nimate).

Ste pripravljeni? Oglejmo si brskalnik in vaš najljubši urejevalnik kode. Popoln vodnik po skoku.

1. Ustvarite aplikacijo Facebook

Potrebovali bomo ID aplikacije in da bi dobili to, boste morali ustvariti Facebook App. Če že imate enega, nadaljujte z 2. korakom.

Ustvarjanje aplikacije je preprosto, zato naredite naslednje:

1. Prijavite se v Facebook, pojdite na stran za razvijalce.
2. Kliknite »Nastavite novo aplikacijo"gumb v zgornjem desnem kotu.
3. Daj ime v novo aplikacijo, se strinjam na Facebook pogoje, zadeti Ustvarite aplikacijo.
4. Pojdi do Spletna stran jeziček, napolnite URL spletnega mesta in Domena spletnega mesta.
5. Zapišite vrednost ID aplikacije nekje in zadeti "Shrani spremembe".

To je vse! Vedno se lahko vrnete kasneje, da zapolnite preostanek informacij.

2. korak. Zamenjajte Oznaka

Odprite datoteko z naslovom teme (header.php) v priljubljenem urejevalniku. Vedno imejte varnostno kopijo v primeru, da gre kaj narobe.

Poiščite naslednjo vrstico kode ali tisto, ki se začne z >

Zamenjaj ga z:

Hranite header.php open, potrebovali ga bomo za 3. korak.

Korak 3. Vstavite OG oznake

Prilepite naslednjo kodo takoj za ali prej oznaka.

       "/>          

Tukaj je nekaj vrednosti, ki jih boste morali spremeniti:

• Vrstica 3: Zamenjaj your_fb_app_id z ID aplikacije od 1. koraka.
• Vrstica 4: Lahko dobite your_fb_admin_id pod vašo stranjo Facebook Insights (Več informacij). Kliknite na "Vpogled za vaše spletno mesto"zeleni gumb, zgrabite celoten niz kode in nadomestite vrstico 4.
• Vrstica 12: ta vrstica določa sliko, ki predstavlja vašo objavo. Če vaša tema podpira WordPress Post Thumbnails, bi morala delovati dobro. Toda, če ne, bo neuspešno brez podobe. Oglejte si korak 3a za alternativno rešitev.
• Vrstica 19: Zamenjaj logo.jpg z URL-jem do logotipa vašega spletnega dnevnika. Prikazal se bo, ko bo na vašem spletnem dnevniku na spletnem mestu Facebook objavljena stran, ki ni objavljena.

Korak 3a - Ko "wp_get_attachment_thumb_url" ne uspe

Kdaj wp_get_attachment_thumb_url () ni uspelo, verjetno boste prišli do atributa vsebine brez vrednosti, kot je prikazano spodaj:

Preprosta rešitev bo zamenjala vrstico 12 z naslednjo kodo:

Naprej, odpri functions.php in vstavite naslednjo kodo:

funkcija catch_that_image () globalni $ post, $ posts; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ matches); $ first_img = $ ujema [1] [0]; if (empty ($ first_img)) // definira privzeto sliko $ first_img = "/images/default.jpg";  vrne $ first_img; 

Ta nadomestna koda poskuša uporabiti funkcijski klic catch_that_image () za zagrabitev in izpis URL-ja prve slike, s katero se srečuje. Če funkcija ne najde svoje prve slike, zamenjajte vrstico 10 z URL na privzeto sliko.

Korak 4. Vstavite Facebook Javascript SDK

Naslednji Javascript omogoča dostop do vseh funkcij API-ja in pogovornih oken Graph. Prav tako vam omogoča, da z lahkoto vključite socialne vtičnike Facebook, kot sta gumb Like, Facepile, priporočila itd.

Postavite ga header.php, Takoj po

Zamenjati your_fb_app_id v vrstici 4 z ID aplikacije od 1. koraka prej.

Korak 5. Preizkusimo!

Končali smo integracijo Facebook Open Grapha v WordPress blog. Dajmo nekaj preizkusov, da se prepričamo, da smo stvari pravilno izvedli.

Test # 1 - Oglejte si izvorno kodo

Oglejte si izvorne kode ene objave v spletnem dnevniku, morate imeti nekaj takega:

Preverite lastnosti in vrednosti, se prepričajte, da so pravilne.

Test # 2 - Namestite podoben okvir

Če še niste namestili Facebook Like Button, potem je verjetno čas, da ga dobite. Vstavite naslednjo kodo kjerkoli (po možnosti pred vsebino ali po vsebini) single.php:

Naslednjič, pokliči prijatelja Kot to. Nekaj ​​podobnega bi morali videti v njegovem profilu na Facebooku:

Dodatno: vtičnik za WordPress

Če nekako niste uspeli namestiti kode ali pa je to potrebno hitro in enostavno - za to obstaja vtičnik za WordPress.

Facebook Open Graph Meta v WordPressu je WordPress vtičnik, ki dodaja metapodatke Facebooka, da se izogne ​​nobeni sličici, napačni izdaji naslova, napačnemu opisu itd..