FBMLFacebook Markup Language

Hogyan csinljunk egyedi Facebook oldalt 1 ra alatt?Szab-Pls Tibor

Facebook Markup Language vagyis Facebook jellnyelv. mindenron ragaszkodunk a magyarra fordtshoz.

Ha

mr

Ebben a knyvben az FBML-t gyakorlati pldkkal s kpekkel illusztrlva szeretnm kzrthetbb, knnyen hasznlhatv tenni, egy-egy ltvnyos trkkel. Nem fogok viszont kitrni semmi olyasmire, hogy mirt is j maga a facebook, hogyan kell szerezni ltogatt, marketing-stratgit kialaktani. Ez nem egy elmleti kziknyv. Tisztn gyakorlatias.

Rlam rviden annyit rnk, hogy klnfle webes- s offline fejlesztsekkel kzel 10 ve foglalkozom, A(!) kzssgi oldallal viszont alig egy ve. Nem szeretek ismersket kzssgi oldalakon gyjteni, tbbre rtkelem a szemlyes kapcsolatokat, viszont tudom, hogy ez a jv s az rral rdemes egytt haladni. A knyvben bemutatott pldk kiprbltak, leellenrizettek s mkdek. Szinte egy copy+paste-tel tvehetk. A pldk a legelterjedtebb s leghasznosabb FBML elemeket s azok hasznlatt mutatja be.

Ezzel

a

kuponnal

kapsz

ja,

igen,

tegezdni

fogunk

50%-os

kedvezmnyt,

ha gy dntesz engem bzol meg a facebookmegjelensed kialaktsval vagy a bemutatott pldkat kicsit feltuningolva szeretnd megvalstani.

KUPONKD: FXEE1RD-2011 bevlthatod itt: info@tibro1977.hu rvnyes: 2011. december 31.

A knyvben szerepl forrskdok letlthetk a www.tibro1977.hu oldalrl regisztrci utn.

TartalomjegyzkFBML ........................................................................................................................................................ 2 Statikus FBML ...................................................................................................................................... 6 Tovbb az alkalmazshoz ...................................................................................................... 7 Kezdjk rgtn a legegyszerbbel ................................................................................ 7 Feliratkozs hrlevlre ...................................................................................................... 9 FBML-Prbeszd ablak ksztse ................................................................................... 12 Kpgalria ................................................................................................................................... 15 Kicsit mozogjunk video begyazsa ....................................................................... 17 Ltogatink hvjk meg ismerseiket ....................................................................... 18 Szemlyeskeds ......................................................................................................................... 20 Ltogati statisztikk ...................................................................................................... 21 Szemlyes dvzls ................................................................................................................ 22 Vletlen szvegek .................................................................................................................. 22 Kommentezs................................................................................................................................. 22 Kpgalria 2 .............................................................................................................................. 23 Minisite ........................................................................................................................................ 24 API ......................................................................................................................................................... 26 Ljk gomb: .............................................................................................................................. 27 Like Box ........................................................................................................................................ 28 Facepile ........................................................................................................................................ 28 Vgezetl ..................................................................................................................................... 29

Statikus FBMLEls lpsben menjnk be a termkoldalunkba s ott adjunk hozz egy jabb alkalmazst oldalunkhoz a tovbbi alkalmazsok bngszse linkre klikkelve.

rjuk be a keresbe, hogy fbml s a tallati listbl vlaszuk ki a Statikus FBML elemet. Ekkor a Statikus FBML alkalmazs adatlapjra jutunk. A bal oldalt tallhat Hozzads az oldalamhoz linkkel kln flknt hozzadhatjuk a mi oldalunkhoz. Ekkor az oldalunkon megjelenik egy jabb fl: FBML-1

Ami egyelre teljesen res oldalknt jelenik meg. Ahhoz, hogy ezen vltoztassunk ismt az Oldal szerkesztse Alkalmazsok tvonalat kell bejrnunk. Itt az alkalmazsaink legutols elemeknt mr ott is van a statikus fbml-nk:

A vlaszthat hrom lehetsg kzl nzzk a legegyszerbbet: Link erre a flre ez nem csinl mst, csak ad neknk egy szpnek nem mondhat, de annl hosszabb url-t, amit a bngszbe msolva az adott fl jn el Belltsok mdostsa szintn nem gyakran hasznlt fl. Itt tudjuk a fl lthatsgt belltani. legutoljra hagytam knyvem egyik f tmjt, szval gyernk: Tovbb az alkalmazshoz!

Tovbb az alkalmazshozMire is tudnnk hasznlni ezt a frissen megszerzett flet? elhelyezhetnk egy szp nagy fnykpet s kinevezhetjk kezd oldalnak az dvzl szveg mell akr egy krdssort is betehetnk, aminek vlaszait ki tudjuk rtkelni hrlevl feliratkozsra tudunk lehetsget teremteni interaktv kpgalrit tudunk csinlni vagy brmi mst ami esznkbe jut!

Kezdjk rgtn a legegyszerbbelHelyezznk el kezdoldalnak! Lpsek: 1. ksztsk el a kpet (figyeljnk a mretekre is, 520pixelnl ne legyen szlesebb lehetleg, ugyanis a hirdetseknek is ott a hely!) 2. tltsk fel egy szerverre (ha nincs trhelynk akr ingyenes trhelyre is elhelyezhetjk google) 3. Adjunk cmet a flnek s msoljuk be az albbi kdot az FBMLmezbe: (ez egybknt egy egyszer HTML-elem, aminek hatsra egy kpet fog megjelenteni (img) a megadott url-rl (src)) Azt, hogy nem rtuk-e el a kp elrs tjt a legegyszerbben gy tudjuk ellenrizni, hogy a -jelek kzti rszt bemsoljuk a bngsznkbe. Ha az a kp jelenik meg, amit vrtunk, mindent jl csinltunk, ha 404-es hibazenet, akkor ellenrizzk, nem rtunk-e el valamit. Ha kszen vagyunk lehet rlni, de azrt egyelre ne plyzzunk meg html-szerkeszti llsokat 4. gombot nyomjuk meg, majd trjnk vissza az Oldal szerkesztsre. 5. Mg meg kell csinlni, hogy az j fl legyen a mi ksznt flnk. Ezt az Engedlyek kezelse menpont alatt tudjuk belltani az Alaprtelmezett flnl lev lenyl listval: egy kpet s lltsuk be ezt az FBML-flet

6. Tekintsk meg az eredmnyt. Ahhoz, hogy tnylegesen lssuk amit csinltunk rdemes egy j bngszablakot nyitni s abban berni az oldalunkat. Ugyanis ha a facebook tudja, hogy mi vagyunk azok, akkor figyelmen kvl hagyja mit lltottunk be alaprtelmezett flnek.

Feliratkozs hrlevlreHa mr sikerlt az dvzl kpet elhelyeznnk, itt az ideje tovbblpni. Ttelezzk fel azt az letszer szitucit, hogy jelenlegi vsrlink, kapcsolatainkat bvteni szeretnnk a facebook segtsgvel. Lehetsget adhatunk arra, hogy aki rdekldik utnunk megadhassa nevt s email cmt, amit mi sajt adatbzisunkban eltrolunk vagy csak egy email-rtestben elkldnk magunknak. Itt mr szksgnk lesz egy php-t futtatni tud krnyezetre. Ilyen pldul a trhelynk is, ahol mr weboldalunk is el van helyezve. Amennyiben nincs ilyenre lehetsged, de szeretnl lni a lehetsggel, a knyben tallhat kupont erre is bevlthatod. Rszletek : info@tibro1977.hu A lpsek a korbban bemutatottakhoz hasonlatosak: 1. Vegynk fel j Statikus FBML flet oldalunkra. Amennyiben mr meglv FBML oldalunk mell msikat is szeretnnk felvenni, akkor nem az alkalmazsoknl kell hozzadni azt, hanem az FBML szerkeszt oldal aljn az jabb FBML doboz hozzadsa linkkel. 2. A kvetkez rszletet illesszk bele a kd helyre: Iratkozz fel hrlevelnkre! Nv: Email: Elkld 3. Termszetesen a http://szerveremneve.hu/form_submit.php rszt a sajt domainnevnkkel kell lecserlni, s a form_submit.php pedig az a program lesz, ami az adatokat fel fogja dolgozni. Vgezetl a gombbal mentsk el munknkat. 4. Ksztsk el a form_submit.php fjlt! Ehhez a mvelethez tkletesen megfelel neknk a Notepad/Jegyzettmb nev alkalmazs Itt kicsit bonyolultabb rsz jn, attl fggen, mit szeretnnk csinlni az adatokkal, gy kell elksztennk az adatfeldolgozas nev fggvnynket. a) Adatok elkldse e-mailben (szksgnk van a leveleznk SMTP belltsra, illetve a phpmailer osztlyra, amit innt tudunk letlteni: http://sourceforge.net/projects/phpmailer/ ): function adatfeldolgozas(){ require("class.phpmailer.php"); $mail = new PHPMailer(); $mail->IsSMTP(); $mail->SMTPAuth = false; $mail->Host = 'localhost'; $mail->CharSet = "iso-8859-2"; $mail->From = "info@enszerverem.hu"; $mail->AddAddress("info@enszerverem.hu");

$mail->Subject = "Feliratkozs hrlevlre"; $mail_body = "Nv: ".$_POST['name']; $mail_body = "
Email: ".$_POST['email'];

$mail->MsgHTML($mail_body); if(!$mail->Send()) { echo 'Hiba a levl kldsekor!'; echo 'Mailer hiba: ' . $mail->ErrorInfo; } else { echo 'Ksznjk!'; } } Abban az esetben, ha kimen levlkldnk hitelestst ignyel, gy tudjuk megadni az azonostt s jelszavat, illetve a portot: $mail->SMTPAuth = true; $mail->Username = felhasznalnv; $mail->Password =jelszo; $mail->Port = 25; b) Ha pedig nem e-mailban, hanem adatbzisban szeretnnk az adatokat letrolni, akkor szksgnk van adatbzis kapcsolatra (szintn a legtbb trhelyen rendelkezsre ll): function adatfeldolgozas(){ $kapcsolat = mysql_connect('localhost', 'adatbzisfelhasznl', 'adatbzis-jelsz'); mysql_select_db('adatbzisnv'); $query = "INSERT INTO tblanv (id, nev, emailcim, feliratkozva) values (null, '".$_POST['name']."' ,'".$_POST['email']."' ,now())"; mysql_query($query); echo 'Ksznjk!'; } Termszetesen tbb mezt is definilhatunk, illetve annak az rtkeit is el tudjuk rni, a $_POST[msikmezneve] hivatkozssal a fentiek mintjra.

Amennyiben elakadtl: info@tibro1977.hu

A fenti kt plda mg nem tartalmaz sok FBML elemet. Itt az ideje belehzni.

FBML-Prbeszd ablak ksztseHa tbb dolgot is ki szeretnnk tenni egy oldalra s nem akarjuk, hogy nagyon megnyljon lefele az oldal, kszthetnk egy listt, amire klikkelve az adott linkhez rendelt tartalom jn fel egy kln kis ablakban:

s a linkekre kattintva valami hasonlt kapunk:

A fenti pldt az albbi kddal oldhatjuk meg: Feliratkozs a hrlevlre Hrlevl

Iratkozz fel hrlevelnkre! Nv:

Email: Elkld

Az egyszer szveges link helyett kpet is elhelyezhetnk az albbi mdon: .img_button { display: block; border: none; height: 38px; width: 96px;

background-image: url('http://www.tibro1977.hu/images/fbml_linke_button.jpg'); background-position: 0px 0; } .img_button:hover { background-position: 0px -38px; } Ezt a 96x76px-es kpet hasznltam fel, aminek a fels rsze jelenik meg alap esetben s az als akkor, amikor az egrrel fl megynk. Ez a rsz szintn nem FBML volt, hanem szabvnyos CSS, azaz Cascading Style Sheet. (Egyre kzelebb jutunk a html szerkeszti llshoz! )

KpgalriaKpgalria a kpeket ki tudunk rhzva az ksztshez is szksgnk lesz sajt trhelyre, ahonnt vesszk. Ez is CSS-re s HTML-re pl, amivel egyszeren tenni fotokat FBML flnkre s az egeret egy-egy kpre adott kpet nagyobba is megmutatja:

s az egeret a plmafs kpre vittem:

Az albbi forrs beillesztsvel ez reproduklhat: ul#thumbs, ul#thumbs li{margin:0; padding:0; list-style:none;} ul#thumbs li{float:left; margin-right:5px; border:1px solid #999; padding:2px;} ul#thumbs a{display:block; float:left; width:100px; height:100px; line-height:100px;overflow:hidden; position:relative; z-index:1;} ul#thumbs a img{float:left; position:absolute; top:-20px; left:50px;} ul#thumbs a:hover{overflow:visible; z-index:1000; border:none;} ul#thumbs a:hover img{border:1px solid #999; background:#fff; padding:2px;} ul#thumbs:after, li#thumbs:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}

ul#thumbs, li#thumbs{display:block;} ul#thumbs, li#thumbs{min-height:1%;} * html ul#thumbs, * html li#thumbs{height:1%;}

Kicsit mozogjunk video begyazsaLehetsg van klnfle mdit begyazni FBML oldalunkba. Ehhez az -taget kell felhasznlni. Egszen pontosan egy Shockwave Flash objektumot tudunk ezzel a mdszerrel begyazni, ami lehet flash animcitl kezdve video, jtk is. Most egy video begyazsra nzznk pldt: