Google+ kommentek nem Blogger oldalon

Tegnap megjelent a Google+ Comments, ami egyelőre csak a Blogger rendszerében aktiválható elvileg. Mikor leültem tegnap a gép elé, pont akkor jelent meg előttem a hír. Szépen beúszott egy kis fade effekttel. Már abban a pillanatban tudtam, hogy bizony ezt nekem nagyon gyorsan ki kell operálnom és meg kell találnom a beágyazás módját.

Lévén a Blogger nagyrészt JavaScript alapokon tölti meg az összes widget-et, így kicsit nagyobb szívás volt, nem is beszélve arról, hogy az összes JavaScript fájl szépen be volt tömörítve (minified), ami még inkább megnehezítette a munkát. Nem sokkal később viszont sikeresen reprodukáltam a Comments blokkot a [Dev] Folyam.info posztjaira is. Mint látható immáron az van itt lent is. Minden korábbi Disq.us komment így elveszett, de lett helyettük sok szép Google+ “komment”. Tegnap egy gyors cikk keretében publikáltam már a kódrészt és a mikéntjét a Code-Infection Blog-on viszont itt most kicsit részletesebben bemutatom. Láthatóan kicsit hosszabb is lett a cikk.

Mit csinál?

Hasonló működése van mint egy +1 gombnak, csak itt egyelőre nincs automatikus feldolgozás. Van egy html elemed és a megfelelő gapi kérésre abban elhelyez egy iframe-et. Jelenleg kicsit hazudni kell neki, mert van egy paraméter, aminek az értéke BLOGGER, ha persze ezt kicserélem bármi másra, akkor 400 Bad Request hibát kaptam, így egyelőre ők tényleg úgy tervezték, hogy csak a blog rendszerükben lesz elérhető. Kicsit naív hozzáállás.

Előkészületek

Hogy a legegyszerűbb legyen használni azt szeretnénk, hogy simán létrehozva egy html element, azt ellátva megfelelő data- tulajdonságokkal, nekünk az betöltődjön.

0

Jelenleg id-val oldottam meg, mivel csak egy komment dobozom van egy oldalon, de természetesen megoldható, hogy csak egy class megadásával a JavaScript végighalad az elemeken és ad nekik egy számmal ellátott id-t, ahogyan ezt a plusone.js is csinálja a +1 gomboknál. Két paramétert használtam két egyszerű ok miatt.

  1. A Bloggeren is ezeket pakolja a html elemre, így valószínűleg ezek lesznek a későbbiekben is dinamikus paraméterek.
  2. A többi paraméter eléggé fix, tehát felesleges azokat is ide pakolni 🙂

De mik is ezek? A data-href tárolja az adott oldal címét, ami mondjuk a canonical címe, hogy biztos ugyan az legyen. A data-viewtype már érdekesebb. Nem másztam bele túlzottan, de egyelőre ezt az egyet találtam paraméternek. Tehát utólagos spamszűrés legyen a kommentekre. Valószínűleg lesz később más is, különben nem tették volna bele ezt a paramétert (bár a Google+ API több olyan kötelezően megadott paramétert tartalmaz, amikre egyelőre csak egy válasz van, mint például az Activity public értéke)

Mondjuk meg a gapi-nak…

Mi ezt szeretnénk használni, de ha csak ennyit csinálunk, akkor nem fog semmi extra történni. Nah hát végülis bekerül egy üres div a DOM struktúrába, de ez nem egészen az amit mi szeretnénk elérni.

Kicsit meg kell turkászni a plusone.js betöltését. Természetesen mindenki az async metódust használja, mert jobb, szebb és nem utolsó sorban nem állítja meg az oldal betöltését 🙂

1

Nekünk azt kellene ugyebár elérni, hogy miután betöltődött renderelje le a komment dobozunkat. Mi sem egyszerűnn, mint rápakolni egy onload eseményre meghívódó callback függvényt. Ebben a függvényben meghívjuk a gapi.comments.render metódust az alábbi paraméterlista szerint:

2

jQuery-vel kicsit gyorsabban és egyszerűbben kiszedhetőek a data- értékek, meg nagyon gyorsan és egyszerűen megnézhető az elemünk szélessége is, de nem szerettem volna, ha bárki is kényszerítve lenne a jQuery használatára, így inkább anélkül csináltam meg, ehhez viszont be kellett pakolnom egy új függvényt, ami segít lekérdezni a szélességet.

3

Miután már ez is megvan már csak az adatokat kell begyűjteni 🙂

4

Ezek után, ha ujratöltjük az oldalunkat, akkor miután a plusone.js betöltődött lefut a jó kis kiegészítésünk, aminek hatására megjelenik a Google+ Comments doboz 🙂

Végeredmény

Van egy nagyon pofásan kinéző kommentrendszerünk, aminél minden hozzászólás egy Google+ posztot jelent. Ami nagyon jó benne, hogy az is ide kerül, ami nem innen lett megosztva, hanem valaki Google+-on továbbosztotta publikusan vagy simán csak az url-t megosztotta. Ezen kívül pedig a posztokra érkező kommenteket is láthatjuk és akár válaszolhatunk is rájuk kommentként, ami itt is és Google+-on is megjelenik.

Van benne olyan opció is, hogy csak itt látható kommentként, de nem akarod megosztani Google+-on. A szűrés pedig zseniális 🙂

Te döntöd el, hogy a megjegyzésed csak itt jelenjen-e meg, vagy a Google+ szolgáltatásban is. Bárhogy is dönts, csak a kiválasztott személyek és körök tagjai láthatják.

Remélem mielőbb bekerül a rendszerbe publikusként és nem kell ezen kis mókázás hozzá, de addig is ez egy nálam jól működő megoldás.

Ti mit vártok el a Google+ Comments-től? Mi az ami már most látszik, hogy nem jó benne? Akarjátok egyáltalán vagy bármi csak ne közösségi oldallal összekötött kommentelő?

Kapcsolódó cikkek:

Balazs Nadasdi

Developer, Project Manager, Blogger, Dad... or sometihng like these