Amikor meg akarod osztani az egyik bejegyzésedet (leginkább a Facebookon), akkor értelemszerűen az az elvárásod, hogy a bejegyzésed linkjének beszúrásakor jelenjen meg az adott bejegyzés címe, rövid tartalma, és az a kép, amelyet direkt azért tettél fel a bejegyzésbe, hogy azt lássák a megosztás előnézetében. Sok bosszúságot okozhat, ha mindez nem így történik. Mit tehetsz, hogy csinosak legyenek a megosztásaid?

Így néz ki egy szép megosztás

(Ez például egy csinos megosztás 🙂 )

A megosztások esetében az a weboldal, amelyen a link megjelenik (a mostani példában, illetve persze legtöbb esetben amúgy is ez a Facebook, de lehet más weboldal is) lekéri az információkat a blogodból / weblapodból, és azok alapján igyekszik megjeleníteni, amire az olvasóknak szükségük lesz. Ezen információk egységesítésére (azaz hogy mindenhol ugyanúgy jelenjenek meg) találták ki az Open Graph Protocol szabványt, amelyről itt olvashatsz részletes, angol nyelvű leírást »

Ez egy meglehetősen technikai szöveg, programozóknak, webfejlesztőknek készült elsősorban, hiszen az ő dolguk, hogy a weboldalakat felkészítsék a szabványnak megfelelően. A WordPress weboldalak esetében természetesen erre egészen más, sokkal felhasználóbarátabb megoldás született, ahogyan azt már megszokhattuk: hogy aki nem programozó, az se legyen elvágva a lehetőségtől.

(Ettől persze még beleírhatod a szükséges kódokat a weblapod fejrészébe, ha tudod, mit csinálsz – ez csak segíteni fog. Ilyenkor természetesen child theme-et, azaz “gyerek-sablont” kell használnod.)

Egyrészt a modern (főleg a prémium, azaz fizetős) WordPress sablonok maguktól is tudják az OGP előírásait, és többé-kevésbé ügyesen meg is jelenítik a szükséges információkat a megosztott linkek mellett. A leírást a bejegyzésszerkesztő alatti kivonat dobozodból veszik (úgyhogy ezt érdemes kitölteni), a megosztási kép pedig a beállított Kiemelt kép lesz.

Ha a Te sablonod ezt nem tudja, vagy nem jól tudja, akkor pedig – mint mindig – van hozzá bővítmény. És ebben az esetben ne hallgass arra, aki azt mondja, hogy “a lehető legkevesebb bővítményt használd, ne tegyél fel feleslegeset” – mert ez tényleg nem felesleges.

A legjobb ilyen bővítmény, amelyet találtam, és amelyet én magam is használok, az Open Graph for Facebook, Google+ and Twitter Card Tags nevet viseli. Ha a sablonod nem elég ügyes, ezzel beállíthatod az OGP információkat. A cím eleve adott (a WordPress alapból, teljesen logikusan, a bejegyzés címét ajánlja fel), de a leírást és a képet Te határozhatod meg. Az OGP doboz a bejegyzésszerkesztő alá költözik be:

Az Open Graph Protocol és a WordPress

Ahogy a képen is látható, a képet a szokott módon feltöltheted vagy kiválaszthatod a Médiatárból, a leírást pedig vagy ide írod be, vagy a Kivonat dobozba, és akkor onnan fogja szedni, vagy ha egyik helyen sincs semmi, akkor a tartalomból fog kivenni valamit – de ezt nagyon nem ajánlom, hiszen éppen az a cél, hogy Te magad határozd meg, mi lássanak az olvasóid megosztáskor.

Ez így nagyon egyszerűnek tűnik, de van egy csapda.

Nem a WordPress, és nem is a bővítmény oldalán van a gond, hanem azzal, hogy a Facebook néhány hónappal ezelőtt megváltoztatta az egyik protokollját (micsoda meglepetés…), és már nem engedi, hogy a megosztásokat külső programok befolyásolják. Csak és kizárólag akkor engedélyezi ezt, ha létrehozol egy Facebook Appot erre a célra. De ne ijedj meg, ez nem olyan bonyolult, amilyennek elsőre hangzik.

A fenti bővítmény weboldalán olvashatsz erről egy részletes cikket, de hogy egyszerűsítsem a dolgodat (különösen ha nem vagy nagy angol-tudor), és mert pár képernyő azóta már nem pont úgy néz ki, mint a cikkben, ezért inkább leírom, hogy mi a dolgod.

1. Menj a https://developers.facebook.com/apps/ oldalra, és kattints a zöld “+ Add a New App” feliratú gombra a jobb felső sarokban. (Ehhez be kell legyél jelentkezve a Facebookba. Van, aki ki szokott jelentkezni?… 🙂 )

2. A felugró ablakban nevezd el az appodat (teljesen mindegy, milyen nevet adsz neki), add meg azt az e-mail címedet, amellyel a Facebookon regisztráltál, majd kattints a kék “Create App ID” gombra. Ezután kapsz egy captcha-t, azon még át kell verekedned magad.

Facebook App létrehozása

Figyelj: ha egynél több weboldalon akarod majd használni a szolgáltatást, akkor is elég egy appot létrehoznod, és mindegyiken használhatod ugyanazokat a kódokat (amelyeket mindjárt megkapsz).

3. Tulajdonképpen ennyi lenne az egész, de hogy bosszantson 🙂 (vagy hogy elbizonytalanítson), a Facebook betesz ide még egy képernyőt. Ne törődj vele, hogy miket ír, nincs itt semmi tennivalód. Keresd meg jobboldalt alul a szándékosan fehérre hagyott “Skip” gombot és kattints rá.

Facebook App létrehozása

4. Jutalmul megkapod a következő képernyőt – csak hogy megint ki kelljen szedned egy-két felesleges zavaró tényezőt.

Facebook App létrehozása

Nyugodtan kapcsold ki a jobboldali panelt (amelyen értelemszerűen a saját nevedet fogod látni, nem az enyémet 🙂 ), és akkor megjelenik az “App Secret” pontjai mellett a “Show” gomb – erre kattints rá, és a felugró ablakban (biztonsági okokból) add meg a Facebook-jelszavadat. A “Submit” gombbal küldheted el, és akkor végre látni fogod a lényeget, ami miatt ezt az egészet csináltad: az “App ID” és az “App Secret” kódokat.

Facebook App létrehozása

(Nem izgattam magam azon, hogy a képen látszanak az én appom adatai – ez csak egy teszt app, a bejegyzés megírása után úgyis törlöm 🙂 )

Ezen a képernyőn, ha akarod, megadhatod (de nem kötelező), hogy melyik domain(ek)en akarod majd használni az appot, belinkelheted az Adatkezelési tájékoztatódat és az Általános használati feltételeidet, feltölthetsz egy logót, megadhatod, hogy milyen iparágban vagy, illetve kiválaszthatod, hogy saját célodra vagy mások számára készítetted az appot – vagy hagyhatod az egészet a csudába, és jobboldalt alul a kék “Save Changes” gombra kattintva befejezheted a procedúrát.

5. Ezután már csak egy lépés van hátra: a Beállítások alatt menj a bővítmény menüpontjába, illeszd be ide az előbb megkapott kódokat, és kattints a kék “Módosítások mentése” gombra.

Az Open Graph Protocol bővítmény beállítása

Meg kell mondjam, hogy megcsinálni mindezt valójában sokkal egyszerűbb, mint leírni. Úgyhogy örülök, hogy túl vagyok rajta 🙂

Sok sikert kívánok a megosztásokhoz! És ha elakadsz valahol, kérj segítséget a hozzászólások között!