2014. szeptember 28., vasárnap

Blogger: "Oldalelem importálása" ablak és ami mögötte van

Amikor olyan HTML kódokat készítünk, amelyeket mások számára beágyazhatóvá szeretnénk tenni, legyen ez akár versenyre szavazómodul, akár egy zenelejátszó, vagy valami egyéb funkcióval rendelkező beágyazható modul, akkor mindig felmerül a kérdés, hogy hogyan tehetjük a beágyazást a legkönnyebbé.

Mivel sokan használnak különböző tartalomkezelő rendszereket, így célszerű erre is felkészíteni a moduljainkat. Számtalan rendszert használnak a világban a kezdve a Joomla-val a WordPressen és a Drupalon át egészen a blogmotorokig. A "nem telepítős" azaz cég által hostolt blogmotorok közül egy meglehetősen elterjedt a Google által hostolt Blogger, amit sokan (nem túl szakszerűen) csak "blogspot"-nak emlegetnek. Ha azt szeretnénk, hogy a Bloggerben vezetett blogokra egyszerűen beágyazható legyen az általunk készített modul, akkor nincs más dolgunk, mint elhelyezni egy "Hozzáadás a bloggerhez" gombot... oké-oké, de ez hogyan is fog működni? Egyszerű!

A megjelenő ablak

A gombra kattintva a felhasználó egy ilyesmi ablakkal fog találkozni. Persze ezt azért valamennyire van lehetőségünk testre szabni:

Válassz blogot: ebből a listából választható ki, hogy melyik blogra helyeznénk el a modult.
Cím: Ez a cím fog megjelenni a modul fölött. Beállíthatjuk, hogy mi legyen a modul alapértelmezett címe. de ez persze szerkeszthető.
Tartalom szerkesztése: Ez a doboz lenyitható, ha lenyitjuk, akkor szerkeszthetjük a beágyazandó HTML kódot.
Sablon szerkesztése: Többnyire csak a régi blogger sablonokkal való kompatibilitást szolgálja.
További információ link: Ennek a linknek a célját személyre szabhatjuk
Kép: A link előtt megjelenő képet is személyre szabhatjuk. Megjeleníthetünk itt egy ikont, de van lehetőségünk szélesebb, nagyobb képek elhelyezésére is, és ezekre akár szöveget is írhatunk, amiben a felhasználót tájékoztatjuk valamiről, tehát ez egy óriási testre szabási lehetőség.

Működés

Ahhoz, hogy ez az ablak megjelenjen, egy POST vagy GET kérést kell küldenünk a "https://www.blogger.com/add-widget" címre az alábbi paraméterekkel:

widget.title - az alapértelmezett címe a modulnak
widget.content - a tartalma a modulnak, azaz a tényleges HTML/JavaScript/CSS kód
widget.template - ebbe a "<data:content/>" szöveget célszerű elhelyezni, ez főleg a korábbi sablontípusokkal való kompatibilitást szolgálja.
infoUrl - ebbe a linket adjuk át, hogy hová mutasson a "További információ" link.
logoUrl - ebbe a megjelenítendő kép URL-jét adhatjuk át.

Tippek

A megvalósítást célszerű egy űrlappal és POST kéréssel megvalósítani úgy, hogy új lapon nyíljon meg, ugyanis a hozzáadás után az ablak nem irányít vissza az előző oldalra, hanem a kiválasztott blog elrendezésének szerkesztéséhez irányítja a látogatót. Amennyiben ezt az űrlapos kivitelezést választjuk, egyszerűen hidden típusú űrlapmezőkben tárolhatjuk az elküldendő adatokat.

Nincsenek megjegyzések:

Megjegyzés küldése