Kuidas integreerida Facebooki avatud graafik WordPressiga

Facebook Open Graph protokoll võimaldab teil oma blogisisu mitte ainult oma lugejatega, vaid ka nende Facebooki sõpradega. Parim osa on - kui keegi meeldis teie sisu (d), see avaldatakse nende Facebooki profiilis. Aga see pole veel kõik, avatud graafik võimaldab teil uurida huvitavaid viise, kuidas suhelda ja oma lugejatega suhelda. Lõppkokkuvõttes - kui see on õige - see loob teie brändi ja suurendab teie saidi liiklust.

Tänases postituses vaatleme kuidas integreerida Facebooki avatud graafik iseenda hostitud WordPressiga üksikasjalikus juhendis. See nõuab olemasolevate WordPressi teemade muutmist ja Facebooki rakenduse loomist (kui teil seda pole).

Valmis? Laseme üles brauseri ja oma lemmikkoodi redaktori. Täielik juhend pärast hüpata.

1. samm. Facebooki rakenduse loomine

Meil on vaja Rakenduse ID ja selle saamiseks peate looma Facebooki rakenduse. Kui teil on juba üks, siis liikuge edasi sammu 2 juurde.

Rakenduse loomine on lihtne, siin on see, mida teete:

Logige sisse Facebooki, minge arendaja lehele.
Klõpsake nuppu "Uue rakenduse seadistamine"nupp üleval paremas nurgas.
Anna nimi oma uude rakendusse, nõus Facebooki tingimustele, tabas Loo rakendus.
Minema Veebisait vahekaart, täitke Saidi URL ja Saidi domeen.
Märkige väärtus Rakenduse ID kusagil ja vajutaSalvesta muudatused"nupp.

See on kõik! Teil on võimalik hiljem tagasi tulla, et täita ülejäänud teave.

2. samm. Asenda Silt

Avage oma teema päisefail (header.php) oma lemmik toimetaja. Hoidke varukoopiat alati, kui midagi läheb valesti.

Otsige seda järgmist koodi või algust >

Asenda see:

Hoidke header.php avatud, me vajame seda 3. sammu jaoks.

3. samm. Sisestage OG sildid

Kleepige järgmine kood kohe või varem silt.

"/>

Siin on mõned väärtused, mida peate muutma:

Rida 3: Asenda your_fb_app_id koos Rakenduse ID etapis 1.
4. rida: saate your_fb_admin_id oma Facebooki Insights lehekülje all, (More info). Vajuta "Teie veebisaidi ülevaade"roheline nupp, haarake kogu koodijoon ja asendage rida 4.
Rida 12: see rida määrab teie postitust esindava pildi. Kui teie teema toetab WordPress Post Thumbnails'i, peaks see toimima hästi. Aga kui see nii ei õnnestu, ei õnnestu see ilma pildita. Alternatiivse lahenduse saamiseks vaadake sammu 3a.
Rida 19: Asenda logo.jpg oma blogi logoga URL-i. See kuvatakse siis, kui teie blogis ei jagata postitusi Facebookis.

Etapp 3a - kui "wp_get_attachment_thumb_url" ebaõnnestub

Millal wp_get_attachment_thumb_url () töötamine ebaõnnestus, siis tõenäoliselt läheb sisuväärtusele, millel pole väärtust, nagu allpool näidatud:

Lihtne lahendus on liin 12 asendamiseks järgmise koodiga:

Seejärel avage funktsioonid.php ja sisestage järgmine kood:

funktsioon catch_that_image () globaalne $ post, $ postitused; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ sobib); $ first_img = $ sobib [1] [0]; kui (tühi ($ first_img)) // Määrab vaikepildi $ first_img = "/images/default.jpg";  tagasi $ first_img;

See asenduskood üritab kasutada funktsioonikõnet catch_that_image () haarata ja väljendada esimese kujutise URL, mis tuleb kokku tulla. Kui funktsioon ei suuda oma esimest pilti leida, asendage rida 10 vaikepildiga URL-iga.

4. samm. Lisa Facebook Javascript SDK

Järgnev Javascript võimaldab teil kasutada kõiki graafika API ja dialoogide funktsioone. Samuti võimaldab see hõlpsasti integreerida Facebooki sotsiaalseid pluginaid, nagu näiteks nupp Like, Facepile, soovitused jne.

Asetage see sisse header.php, kohe pärast

Asenda your_fb_app_id reas 4 koos Rakenduse ID 1. sammust varem.

5. samm. Uurime seda!

Oleme valmis integreerima Facebooki avatud graafiku WordPressi blogi. Anna talle paar testi, et veenduda, et oleme asjad õigesti teinud.

Test # 1 - vaata lähtekoodi

Heitke pilk ühe blogiposti allikakoodidele, teil peaks olema midagi sellist:

Kontrollige omadusi ja väärtusi, veenduge, et need on õiged.

Test # 2 - paigaldage sarnane kast

Kui te ei ole Facebooki sarnast nuppu installinud, siis on ilmselt aeg seda saada. Asetage järgmine kood kõikjale (eelistatult enne sisu või sisu pärast) single.php:

Järgmine, saada sõbrale Nagu seda. Sa peaksid nägema midagi sarnast, mis ilmub tema Facebooki profiilis:

Extra: WordPress Plugin

Kui kuidagi ei õnnestunud koodid installida või vajate seda kiireks ja lihtsaks - on selle jaoks WordPressi plugin.

Facebook Open Graph Meta WordPressis on WordPress plugin, mis lisab Facebooki metaandmeid, et vältida pisipiltide probleemi, vale pealkirja probleemi, vale kirjelduse probleemi jms..