Hogyan lehet integrálni a Facebook Open Graph-ot a WordPress segítségével

A Facebook Open Graph protokoll lehetővé teszi, hogy a blog tartalmát ne csak az olvasókkal, hanem a Facebook barátaikkal is megoszthassa. A legjobb rész - amikor valaki tetszett az Ön tartalmát (adatait) közzéteszik a Facebook profiljukon. De ez még nem minden, a nyílt grafikon segítségével érdekesebb módokat találhat az interakcióra és az olvasókkal való kapcsolatra. Végül - ha ez rendben van - felépíti a márkát, és növeli a webhely forgalmát.

A mai poszton megvizsgáljuk hogyan lehet integrálni a Facebook Open Graph-ot egy önálló hostelt WordPress-el részletes lépésről lépésre. Szükség lesz a meglévő WordPress-témák szerkesztésére és Facebook-alkalmazás létrehozására (ha nincs ilyen).

Kész? Tűzzük fel a böngészőt és a kedvenc kódszerkesztőt. Teljes útmutató az ugrás után.

1. lépés: Facebook-alkalmazás létrehozása

Szükségünk lesz egy Alkalmazásazonosító és hogy ezt hozza létre, létre kell hoznia egy Facebook-alkalmazást. Ha már van ilyen, lépjen tovább a 2. lépésre.

Egy alkalmazás létrehozása egyszerű, itt az, amit csinálsz:

1. Jelentkezzen be a Facebookra, menjen a Fejlesztő oldalra.
2. Kattintson "Új alkalmazás létrehozása"gomb a jobb felső sarokban.
3. Adjon nevet az új alkalmazáshoz, egyetért a Facebook kifejezésekhez Alkalmazás létrehozása.
4. Menj Weboldal fül, töltse fel Webhely URL-je és Site Domain.
5. Jegyezze fel az értéket Alkalmazásazonosító valahol a "Változtatások mentése"gomb.

Ez minden! A későbbiekben bármikor visszatérhet, hogy kitöltse a többi információt.

2. lépés Címke

Nyissa meg a téma fejlécfájlját (Header.php) a kedvenc szerkesztőben. Mindig tartsa a biztonsági másolatot csak abban az esetben, ha valami rosszul megy.

Keresse meg ezt a kódsorot, vagy azt, amelyik kezdődik >

Cserélje ki a következővel:

Tartsa nyitva a header.php alkalmazást, szükségünk lesz rá a 3. lépésben.

3. lépés. Helyezze be az OG-t címkék

Illessze be a következő kódot közvetlenül címke, vagy korábban címke.

      "/>          

Íme néhány az értékek közül, amelyeket módosítani kell:

• 3. sor: Csere your_fb_app_id a ... val Alkalmazásazonosító az 1. lépésből.
• 4. sor: Kaphat your_fb_admin_id a Facebook Insights oldalán, (További információ). Kattintson a "Böngészés a webhelyére"zöld gomb, ragadja meg a teljes kódláncot, és cserélje ki a 4. sort.
• 12. sor: Ez a sor meghatározza a posztot ábrázoló képet. Ha a témája támogatja a WordPress Post Thumbnails képeket, akkor jól működik. De ha nem, akkor képtelen lesz kecsesen. Nézze meg a 3a. Lépést egy alternatív megoldáshoz.
• 19. sor: Csere logo.jpg egy URL-címmel a blog logójához. Ez akkor jelenik meg, ha a blogon egy nem utólagos oldal van megosztva a Facebookon.

3a. Lépés - Ha "wp_get_attachment_thumb_url" sikertelen

Amikor wp_get_attachment_thumb_url () nem sikerült, akkor valószínűleg egy olyan érték attribútumra kerül, amelynek nincs értéke, mint az alább látható:

Egy egyszerű megoldás lesz a 12. sor helyettesítése a következő kóddal:

Ezután nyissa meg functions.php és helyezze be a következő kódot:

funkció catch_that_image () globális $ post, $ hozzászólások; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ egyezés); $ first_img = $ egyezés [1] [0]; if (üres ($ first_img)) // Alapértelmezett kép meghatározása $ first_img = "/images/default.jpg";  vissza $ first_img; 

Ez a helyettesítő kód funkcióhívást próbál használni catch_that_image () megragadja és kinyomtatja az első kép URL-jét. Ha a funkció nem találja meg az első képet, cserélje ki a 10. sort az URL-re egy alapértelmezett képre.

4. lépés. Facebook beillesztése Javascript SDK

A következő Javascript lehetővé teszi a Graph API és párbeszédablakok összes funkciójának elérését. Lehetővé teszi továbbá, hogy könnyedén integrálja a Facebook társadalmi pluginjeit, például a Like gombot, a Facepile-et, az Ajánlásokat stb.

Helyezze be header.php, közvetlenül utána

Cserélje your_fb_app_id a 4. sorban Alkalmazásazonosító az 1. lépésből.

5. lépés. Vizsgáljuk meg!

Elvégeztük a Facebook Open Graph integrálását a WordPress blogba. Adjunk egy pár tesztet, hogy megbizonyosodjunk arról, hogy helyesen tettük a dolgokat.

1. teszt - forráskód megtekintése

Tekintse meg az egyik blogbejegyzés forráskódját, ilyesmi legyen:

Ellenőrizze a tulajdonságokat és értékeit, ellenőrizze, hogy azok helyesek-e.

2. teszt - Szereljen be egy hasonló mezőt

Ha nem telepítette a Facebook-ot, mint például a Button, akkor valószínűleg itt az ideje, hogy egyet kapjon. Helyezze a következő kódot bárhol (lehetőleg a tartalom vagy a tartalom után) belül single.php:

Ezután hozzon egy barátot Mint azt. Látni kell valami hasonlót a Facebook profiljában:

Extra: WordPress bővítmény

Ha valahogy nem sikerült telepítenie a kódokat, vagy szükség van rá gyorsan és egyszerűen elvégezni - van egy WordPress bővítmény.

Facebook Open Graph Meta a WordPress egy WordPress plugin, amely hozzáad a Facebook metaadatokat, hogy elkerülje a bélyegképeket, a helytelen címet, a rossz leírási problémát stb..