Facebook Open Open Graphin integrointi WordPressin avulla

Facebook Open Graph -protokolla mahdollistaa blogin sisällön jakamisen lukijoillesi, mutta myös heidän Facebook-ystävilleen. Paras osa on - aina kun joku piti sisältö (t), se julkaistaan ​​niiden Facebook-profiilissa. Mutta se ei ole kaikki, Open Graphin avulla voit tutkia mielenkiintoisempia tapoja olla vuorovaikutuksessa lukijoiden kanssa. Viime kädessä - jos tämä tehdään oikein - se rakentaa brändin ja lisää sivustosi liikennettä.

Tämän päivän virassa aiomme tutkia miten integroida Facebook Open Graph ja itse isännöity WordPress yksityiskohtaisessa oppaassa. Se edellyttää nykyisten WordPress-teemojen muokkaamista ja Facebook-sovelluksen luomista (jos sinulla ei ole sitä).

Valmis? Sytytetään selain ja suosikkikoodieditori. Täysi opas hyppyn jälkeen.

Vaihe 1. Luo facebook-sovellus

Tarvitsemme Sovelluksen tunnus ja saat sen, sinun on luotava Facebook-sovellus. Jos sinulla on jo yksi, siirry vaiheeseen 2.

Sovelluksen luominen on helppoa, mitä teet:

1. Kirjaudu Facebookiin, siirry kehittäjän sivulle.
2. Klikkaus "Määritä uusi sovellus"-painike oikeassa yläkulmassa.
3. Anna nimi uuteen sovellukseen, olla samaa mieltä Facebook-termeihin, osuma Luo sovellus.
4. Mene Verkkosivusto välilehti, täytä Sivuston URL-osoite ja Sivuston verkkotunnus.
5. Merkitse arvo Sovelluksen tunnus jonnekin ja osui "Tallenna muutokset"-painiketta.

Siinä kaikki! Voit aina palata myöhemmin täyttämään muut tiedot.

Vaihe 2. Vaihda Tag

Avaa teeman otsikkotiedosto (Header.php) suosikkieditorissa. Pidä varmuuskopio aina aina, jos jokin menee pieleen.

Etsi tämä seuraava koodirivi tai sellainen, joka alkaa >

Korvaa se seuraavasti:

Pidä header.php auki, tarvitsemme sitä kolmannessa vaiheessa.

Vaihe 3. Lisää OG tunnisteet

Liitä seuraava koodi heti tai aikaisemmin tag.

       "/>          

Seuraavassa on muutamia arvoja, joita sinun on muutettava:

• Linja 3: Korvaa your_fb_app_id kanssa Sovelluksen tunnus vaiheesta 1.
• Linja 4: Voit saada your_fb_admin_id Facebook Insights -sivun alla (Lisätietoja). Klikkaa "Insight sivustosi"Vihreä painike, tartu koko koodiriviin ja korvaa Line 4.
• Linja 12: Tämä rivi määrittää kuvan, joka edustaa viestiäsi. Jos teema tukee WordPress Post Pikkukuvia, sen pitäisi toimia hyvin. Mutta jos se ei onnistu, se epäonnistuu sulavasti ilman kuvaa. Tutustu vaiheeseen 3a vaihtoehtoiseen ratkaisuun.
• Linja 19: Korvaa logo.jpg URL-osoite blogin logoon. Se näytetään, kun blogissasi ei ole postitse sivua jaettu Facebookissa.

Vaihe 3a - Kun "wp_get_attachment_thumb_url" epäonnistui

Kun wp_get_attachment_thumb_url () epäonnistui, olet todennäköisesti menossa sisältöominaisuuteen, jolla ei ole arvoa, kuten alla esitetty:

Yksinkertainen kiertotapa on korvata rivi 12 seuraavalla koodilla:

Avaa seuraavaksi functions.php ja lisää seuraava koodi:

toiminto catch_that_image () global $ post, $ posts; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ ottelut); $ first_img = $ vastaa [1] [0]; jos (tyhjä ($ first_img)) // Määrittää oletuskuvan $ first_img = "/images/default.jpg";  palauta $ first_img; 

Tämä vaihtokoodi yrittää käyttää toimintopuhelua catch_that_image () tarttua ja tulostaa ensimmäisen kuvan kohtaama kohtaaminen. Vaihda rivi 10 URL-osoitteen kanssa oletuskuvaan, jos toiminto ei löydä ensimmäistä kuvaa.

Vaihe 4. Lisää Facebook Javascript SDK

Seuraava Javascript antaa sinulle mahdollisuuden käyttää kaikkia Graph API ja Dialogs -ominaisuuksia. Sen avulla voit myös integroida Facebookin sosiaaliset plugins kuten Like-painikkeen, Facepile, Suositukset jne. Helposti.

Aseta se sisään header.php, Heti jälkeen

Korvata your_fb_app_id rivillä 4 Sovelluksen tunnus vaiheesta 1 aikaisemmin.

Vaihe 5. Testataan!

Olemme tehneet Facebook Open Graphin integroinnin WordPress-blogiin. Anna sille pari testiä varmistaaksemme, että olemme tehneet asioita oikein.

Testi # 1 - Tarkastele lähdekoodia

Tutustu jonkin blogipostin lähdekoodiin, sinun pitäisi olla jotain tällaista:

Tarkista ominaisuudet ja arvot, varmista, että ne ovat oikein.

Testi # 2 - Asenna Like Box

Jos et ole asentanut Facebook Like Buttonia, on todennäköisesti aika saada se. Aseta seuraava koodi missä tahansa (mieluiten ennen sisältöä tai sisällön jälkeen) single.php:

Sitten saat ystävän Kuten se. Sinun pitäisi nähdä jotain samanlaista esiintymistä hänen Facebook-profiilissaan:

Extra: WordPress Plugin

Jos jotenkin ei onnistunut asentamaan koodeja tai tarvitsemaan sitä nopeasti ja helposti - on olemassa WordPress-laajennus.

Facebook Open Graph Meta WordPressissa on WordPress-laajennus, joka lisää Facebook-metatietoja, jotta vältetään pikkukuvien ongelma, väärät otsikkokysymykset, väärä kuvausongelma jne..