Google térkép a hozzászólásokban

A mai bejegyzésben azt szeretném megmutatni, hogy mennyire könnyű teljesen egyéni funkciókkal felruházni a vBulletin motort. A címben meghatározott funkció, nem része az alaprendszernek, de kiegészítés telepítésére sincs szükség a megvalósításához. Az „egyéni BBCode” készítésének lépésit fogom megmutatni.

A BBCode egy korlátozott formázásokat lehetővé tévő leíró nyelv, melynek segítségével „biztonságos” módon nyújthatunk alapvető formázási lehetőségeket a felhasználók rendelkezésére. A BBCode-okat a motor HTML kódokra fordítja a hozzászólások megjelenítésekor, nekünk pedig pont erre van most szükségünk. Azt szeretnénk ugyanis, hogy ha a hozzászólás szövegébe például ezt írjuk le:

[map]Budapest, Városligeti körút 11[/map]

akkor, a megjelenítéskor a fenti kód cserélődjön le egy olyan HTML kódra, ami egy Google térképet jelenít meg a Közlekedési Múzeum környékéről. Google térkép megjelenítésre rengeteg módszer létezik már, egy kis utána olvasással biztosan vagányabb dolgok is összehozhatok, mint ami a példában szerepelni fog. (A példában szereplő változatnak annyi előnye azért van, hogy nincs szükség API kulcs generálásra hozzá. A táblázat és az egyebek pedig azért kellettek, hogy szépen kitöltse a rendelkezésre álló területet. Ezt is biztosan ügyesebben is meg lehetett volna oldani.)

A megvalósítás:

Az adminisztrációs felületen keressük meg a Custom BB Codes (Testreszabott BB kódok) szekciót és válasszuk ki az Add New BB Code (Új BB kód hozzáadása) menüpontot. A megjelenő képernyőn írjuk le az egyéni funkción tulajdonságait:

• Title: Google Térkép 

Ez lesz a neve, ami megjelenik a BBCode-jaink használati utasításában. 

• BB Code Tag Name: map 

Ez maga a kód, amit szögletes zárójelbe teszünk használat közben.

Replacement:

<div align="center" style="margin: 5px 5px 5px 5px;"> 
 <table class="tborder" cellpadding="6" cellspacing="1" border="0" width="100%"> 
  <tr>
   <td style="text-align:center">
    <iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q={param}&t=m&output=embed">
    </iframe>
   </td>
  </tr>
 </table>
</div>

Erre a HTML kódra cserélődik le a mi kódunk. Itt azt kell látni, hogy a tagek közti rész értéke az általunk {param} –al megjelőlt helyre fog kerülni az eredményben.

• Example: [map]Budapest, Városligeti körút 11[/map] 
• Description: A megadott címet Google térképen jeleníti meg a hozzászólásban. 

Ezt a példát nézhetik meg a látogatóink a Térkép BBCode-jának használati utasításában a Description-ben megadott leírással.

• Use {option}: No 

Most nem használtuk ezt a funkciót. Ha plusz paramétert adnánk még át, akkor ezt Yes-re állítva a HTML kódban használhatnánk egy {option} elemet is. A BBCode-ban pedig így kellene használni: [BBCode=option]param[/BBCode]

• Button Image (Optional): /images/editor/google-maps.png 

Ha megadunk egy kis képet is, akkor a részletes válasz szerkesztő ablak palettájára is fel kerül a funkció. Én ezt a képet választottam: 

A többi beállítás legyen Yes! :-)

• Remove Tag If Empty: Yes 
• Disable BB Code Within This BB Code: Yes 
• Disable Smilies Within This BB Code: Yes 
• Disable Word Wrapping Within This BB Code: Yes 
• Disable Automatic Link Parsing Within This BB Code: Yes 

Nagyon fontos! Mentéskor sipákol, hogy szerinte nem helyes a HTML kódunk, de nincs igaza! Bátran megnyomhatjuk a „Tovább”gombot!

Ezzel készen is vagyunk, ki is lehet próbálni a funkciót!

Demó: >> ITT <<