Jak integrovat Facebook Open Graph s WordPress

Protokol Facebook Open Graph umožňuje sdílet obsah blogu nejen se svými čtenáři, ale také se svými přáteli na Facebooku. Nejlepší je - kdykoliv někdo rád Váš obsah bude zveřejněn na jejich profilu na Facebooku. Ale to není vše, Open Graph vám umožní prozkoumat více zajímavých způsobů, jak komunikovat se svými čtenáři. Nakonec - pokud se to dělá správně - buduje vaši značku a zvyšuje návštěvnost vašich stránek.

V dnešním příspěvku se podíváme do jak integrovat Facebook Open Graph se samo-hostované WordPress v podrobném průvodci krok za krokem. Bude vyžadovat úpravu stávajících WordPress témat a vytvoření aplikace Facebook (pokud ji nemáte).

Připraveni? Zapálme prohlížeč a váš oblíbený editor kódu. Kompletní průvodce po skoku.

Krok 1. Vytvořte facebook App

Budeme potřebovat ID aplikace a získat to, budete muset vytvořit Facebook App. Pokud ji již máte, přejděte ke kroku 2.

Vytvoření aplikace je snadné, zde je to, co děláte:

1. Přihlaste se na Facebook, přejděte na stránku vývojáře.
2. Klikněte na tlačítkoNastavte novou aplikaci"v pravém horním rohu.".
3. Uveďte jméno do nové aplikace, souhlasit na Facebook, hit Vytvořit aplikaci.
4. Jít do Webová stránka kartu, vyplňte Adresa URL webu a Doména domény.
5. Poznamenejte si hodnotu ID aplikace někde a hit "Uložit změnytlačítko.

To je vše! Vždy se můžete později vrátit, abyste vyplnili zbytek informací.

Krok 2. Nahraďte Štítek

Otevřete soubor záhlaví tématu (header.php) ve vašem oblíbeném editoru. Vždy si ponechejte záložní kopii jen pro případ, že se něco pokazí.

Vyhledejte následující řádek kódu nebo kód, který začíná znakem >

Nahraďte ji:

Udržujte open.php open, budeme ho potřebovat pro třetí krok.

Krok 3. Vložte OG tagy

Vložte následující kód hned po nebo dříve štítek.

       "/>          

Zde jsou některé z hodnot, které budete muset změnit:

• Řádek 3: Nahradit your_fb_app_id s ID aplikace z kroku 1.
• Řádek 4: Můžete se dostat your_fb_admin_id pod vaší stránkou Facebook Insights (více informací). Klikněte na odkazVhled na vaše webové stránky"zelené tlačítko, chytit celý řetězec kódu a nahradit řádek 4.
• Řádek 12: Tento řádek určuje obrázek, který představuje váš příspěvek. Pokud vaše téma podporuje WordPress Post Náhledy, mělo by to fungovat dobře. Ale pokud tomu tak není, bude neúspěšné bez obrazu. Podívejte se na krok 3a pro alternativní řešení.
• Řádek 19: Nahradit logo.jpg s url na logo vašeho blogu. Zobrazí se, když je na vašem blogu sdílena stránka bez příspěvku.

Krok 3a - Při selhání funkce "wp_get_attachment_thumb_url"

Když wp_get_attachment_thumb_url () se nepodařilo fungovat, pravděpodobně přejdete na atribut obsahu bez hodnoty, jako je to, co je uvedeno níže:

Jednoduchým řešením bude nahradit řádek 12 následujícím kódem:

Dále otevřete functions.php a vložte následující kód:

function catch_that_image () global $ post, $ posts; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ zápasy); $ first_img = $ odpovídá [1] [0]; if (prázdný ($ first_img)) // Definuje výchozí obrázek $ first_img = "/images/default.jpg";  return $ first_img; 

Tento náhradní kód se pokouší použít volání funkce catch_that_image () chytit a vydat URL prvního obrázku, se kterým se setkáte. Pokud funkce nenajde první obrázek, nahraďte řádek 10 adresou URL výchozím obrázkem.

Krok 4. Vložte Facebook Javascript SDK

Následující Javascript umožňuje přístup ke všem funkcím grafu API a dialogů. To také umožňuje integrovat Facebook sociální pluginy, jako je tlačítko Like, Facepile, Doporučení, atd. S lehkostí.

Umístěte ho header.php, hned po

Nahradit your_fb_app_id v řádku 4 s ID aplikace z kroku 1 dříve.

Krok 5. Otestujme to!

Dokončili jsme integraci Facebook Open Graph do blogu WordPress. Dejme tomu pár testů, abychom se ujistili, že jsme udělali věci správně.

Test # 1 - Zobrazit zdrojový kód

Podívejte se na zdrojové kódy jednoho z příspěvků blogu, měli byste mít něco takového:

Zkontrolujte vlastnosti a hodnoty, ujistěte se, že jsou správné.

Test # 2 - Nainstalujte obdobný box

Pokud jste nenainstalovali Facebook Like Button, pak je pravděpodobně čas ho dostat. Umístěte následující kód kdekoli (nejlépe před obsahem nebo po obsahu) uvnitř single.php:

Další, dostat přítele Jako to. Ve svém profilu na Facebooku byste měli vidět něco podobného:

Extra: WordPress Plugin

Pokud se vám nějak nepodařilo nainstalovat kódy nebo je třeba to udělat rychle a snadno - je tu plugin pro WordPress.

Facebook Open Graph Meta ve WordPressu je plugin pro WordPress, který přidává meta data z Facebooku, aby se vyhnul problémům s miniaturami, problémům s nesprávným názvem, problémům s nesprávným popisem atd..