Ako integrovať Facebook otvorený graf s WordPress

Protokol Facebook Open Graph vám umožňuje zdieľať svoj blogový obsah nielen s vašimi čitateľmi, ale aj s priateľmi z Facebooku. Najlepšia časť je - kedykoľvek niekto páčilo váš obsah (-y), bude zverejnený na svojom Facebook profile. Ale to nie je všetko, Open Graph vám umožňuje preskúmať zaujímavé spôsoby interakcie a interakcie s vašimi čitateľmi. Nakoniec - ak sa to deje správne - vytvára vašu značku a zvyšuje návštevnosť vašej lokality.

V dnešnom príspevku sa budeme zaoberať ako integrovať Facebook Open Graph s vlastným hosťom WordPress v podrobnom sprievodcovi krok za krokom. Bude to vyžadovať úpravu existujúcich motívov WordPress a vytvorenie Facebook aplikácie (ak ju nemáte).

Pripravený? Vypnite prehľadávač a váš obľúbený editor kódov. Úplný sprievodca po skoku.

Krok 1. Vytvorte aplikáciu facebook

Budeme potrebovať ID aplikácie a aby ste to dostali, budete musieť vytvoriť aplikáciu Facebook. Ak už máte jednu, prejdite na krok 2.

Vytváranie aplikácie je jednoduché, tu je to, čo robíte:

1. Prihláste sa na Facebook a prejdite na stránku vývojára.
2. Kliknite na položku "Nastavte novú aplikáciu"v pravom hornom rohu.
3. Zadajte meno do vašej novej aplikácie, súhlasiť na Facebook podmienky, hit Vytvorte aplikáciu.
4. Ísť do Webové stránky kartu, vyplňte Adresa URL stránky a Doména stránky.
5. Upozornenie na hodnotu ID aplikácie niekde a stlačte tlačidlo "Uložiť zmeny"tlačidlo.

To je všetko! Vždy sa môžete vrátiť neskôr, aby ste vyplnili zvyšok informácií.

Krok 2. Nahraďte štítok

Otvorte súbor záhlavia vášho témy (Header.php) vo vašom obľúbenom editore. Vždy uchovávajte záložnú kópiu len v prípade, že sa niečo pokazí.

Pozrite sa na nasledujúci riadok kódu alebo ten, ktorý začína >

Nahraďte ho nasledovne:

Majte hlavičku open.php otvorenú, budeme ju potrebovať pre tretí krok.

Krok 3. Vložte OG tagy

Prilepte nasledujúci kód hneď po alebo predtým štítok.

       "/>          

Tu sú niektoré hodnoty, ktoré budete musieť zmeniť:

• Riadok 3: Nahraďte your_fb_app_id s ID aplikácie z kroku 1.
• Riadok 4: Môžete sa dostať your_fb_admin_id na stránke Facebook Insights (Viac informácií). Klikni na "Insight pre vaše webové stránky"zelené tlačidlo, chytiť celý reťazec kódu a nahradiť riadok 4.
• Riadok 12: Tento riadok určuje obrázok, ktorý predstavuje váš príspevok. Ak váš motív podporuje WordPress Post Thumbnails, mal by fungovať dobre. Ale ak tomu tak nie je, bude to bez chyby. Pozrite si krok 3a na alternatívne riešenie.
• Riadok 19: Nahraďte logo.jpg s adresou URL na logo vášho blogu. Zobrazí sa, keď sa na vašom blogu zdieľa nepodporová stránka na Facebooku.

Krok 3a - Keď sa zlyhá "wp_get_attachment_thumb_url"

Kedy wp_get_attachment_thumb_url () nepodarilo sa vám pracovať, pravdepodobne prejdete na atribút obsahu bez hodnoty, ako je uvedené nižšie:

Jednoduchým riešením bude nahradiť riadok 12 nasledujúcim kódom:

Potom sa otvorte functions.php a vložte nasledujúci kód:

funkcia catch_that_image () global $ post, $ posts; $ first_img = "; ob_start (); ob_end_clean (); $ výstup = preg_match_all ('/ i ', $ post-> post_content, $ zápasov); $ first_img = $ zhody [1] [0]; if (prázdne ($ first_img)) // Definuje predvolený obrázok $ first_img = "/images/default.jpg";  návrat $ first_img; 

Tento náhradný kód sa pokúša použiť funkčné volanie catch_that_image () aby ste chytili a vygenerovali URL prvého obrázka, s ktorým sa stretnete. Nahraďte riadok 10 s adresou URL na predvolený obrázok, ak sa funkcia nepodarí nájsť jej prvý obrázok.

Krok 4. Vložte Facebook Javascript SDK

Nasledujúci Javascript vám umožňuje prístup ku všetkým funkciám rozhrania Graph API a dialógov. To tiež umožňuje integrovať Facebook sociálne pluginy, ako sú tlačidlo ako, tlačidlo, odporúčania, atď s ľahkosťou.

Umiestnite ho header.php, hneď po

vymeniť your_fb_app_id v riadku 4 s ID aplikácie od kroku 1 skôr.

Krok 5. Vyskúšajme to!

Robili sme integráciu programu Facebook Open Graph na blog WordPress. Poďme si to pár testov, aby sme sa uistili, že sme spravili veci správne.

Test č. 1 - Zobrazenie zdrojového kódu

Pozrite sa na zdrojové kódy jedného blogu, mali by ste mať niečo takéto:

Skontrolujte vlastnosti a ich hodnoty a uistite sa, že sú správne.

Test č. 2 - Inštalácia podobného poľa

Ak nemáte nainštalovaný Facebook Like Button, je pravdepodobne čas na to, aby ste si ho našli. Nasledujúci kód umiestnite kdekoľvek (najlepšie pred obsahom alebo po obsahu) single.php:

Ďalej, pridajte priateľa Páči sa mi to ono. Na svojom Facebook profile by ste mali vidieť niečo podobné:

Extra: WordPress Plugin

Ak nejako ste sa nepodarilo nainštalovať kódy, alebo potrebujete rýchlo a jednoducho to urobiť - je tu plugin WordPress.

Facebook Open Graph Meta v programe WordPress je doplnok WordPress, ktorý pridáva meta dáta Facebook, aby sa vyhli problémom s miniatúrami, problémom s nesprávnym názvom, problémom s nesprávnym popisom atď..