FBML

Facebook 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

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.

Tartalomjegyzk
FBML ........................................................................................................................................................ 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 FBML
Els 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 alkalmazshoz
Mire 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 legegyszerbbel

Helyezznk el
kezdoldalnak!

egy

kpet

lltsuk

be

ezt

az

FBML-flet

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:
<img src="http://www.szerveredneve.hu/facebook-kezdokep.jpg">
(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:

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 hrlevlre
Ha 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!
<fb:bookmark />
<form action="http://szerveremneve.hu/form_submit.php"
method="post">
<p>
<label for="name">Nv:</label>
<input type="text" name="name" id="name" />
</p>
<p>
<label for="email">Email:</label>
<input type="text" name="email" id="email" />
</p>
<button type="submit" onclick="return
submitAjaxForm();">Elkld</button>
<p id="ajaxMessage"></p>
</form>
<script><!-function submitAjaxForm()
{
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.ondone = function(data)
{

document.getElementById('ajaxMessage').setInnerFBML(data)
;
}
document.getElementById('ajaxMessage').setInnerXHTML('Az
adatok kldse folyamatban van...');
var queryParams = { 'name' :
document.getElementById('name').getValue(), 'email' :
document.getElementById('email').getValue() };
ajax.post('http://szerveremneve.hu/form_submit.php ',
queryParams);
return false;
}
//--></script>
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
<?php
adatfeldolgozas();
?>
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 = "<br/>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 ksztse

Ha 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:

<!-- FBML LINK -->
<a href="#" clicktoshowdialog="test_dialog">Feliratkozs a hrlevlre</a>
<!-- END FBML DIALOG LINK -->
<!-- FBML DIALO -->
<fb:dialog id="test_dialog">
<fb:dialog-title>Hrlevl</fb:dialog-title>
<fb:dialog-content>

Iratkozz fel hrlevelnkre!

<fb:bookmark />
<form action="http://szerveremneve.hu/form_submit.php"
method="post">
<p>
<label for="name">Nv:</label>

<input type="text" name="name" id="name" />

</p>
<p>
<label for="email">Email:</label>
<input type="text" name="email" id="email" />
</p>
<button type="submit" onclick="return
submitAjaxForm();">Elkld</button>
<p id="ajaxMessage"></p>
</form>
<script><!-function submitAjaxForm()
{
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.ondone = function(data)
{
document.getElementById('ajaxMessage').setInnerFBML(data)
;
}
document.getElementById('ajaxMessage').setInnerXHTML('Az
adatok kldse folyamatban van...');
var queryParams = { 'name' :
document.getElementById('name').getValue(), 'email' :
document.getElementById('email').getValue() };
ajax.post('http://szerveremneve.hu/form_submit.php ',
queryParams);
return false;
}
//--></script>
<fb:dialog-button type="submit" value="Bezr" close_dialog=true />
</fb:dialog-content>
</fb:dialog>
<!-- END FBML DIALOG -->

Az egyszer szveges link helyett kpet is elhelyezhetnk az albbi

mdon:
<!-- IMAGE LINK -->
<style type="text/css">
.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; }
</style>
<a href="http://www.tibro1977.hu" target="_blank"
class="img_button"> </a>
<!-- END IMAGE LINK -->
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! )

Kpgalria
Kpgalria
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:

<!-- IMAGE THUMBNAIL -->
<style type="text/css">
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%;}
</style>
<ul id="thumbs">
<li><a href="#"><img src="http://www.tibro1977.hu/images/ref1.jpg"
/></a></li>
<li><a href="#"><img src="http://www.tibro1977.hu/images/ref2.jpg"
/></a></li>
<li><a href="#"><img
src="http://www.tibro1977.hu/images/robinsonhu.jpg" /></a></li>
<li><a href="#"><img
src="http://www.tibro1977.hu/images/robinsonru.jpg" /></a></li>
</ul>
<!-- END IMAGE THUMBNAIL -->

Kicsit mozogjunk video begyazsa

Lehetsg van klnfle mdit begyazni FBML oldalunkba. Ehhez az
<fb:swf />-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:
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtubenocookie.com/v/0G3OnxmiPUg?fs=1&amp;hl=en_US&autoplay=1'
imgsrc=''http://www.tibro1977.hu/images/tcs.jpg' width='150'
height='110' />
Flash-alap mdia lejtszval is tudunk videot elhelyezni
oldalunkra:
<fb:flv src='http://www.mediacollege.com/videogallery/testclips/barsandtone.flv' width='400' height='300'
title='my movie' color='#FFBB00' salign='r'
img='http://www.example.com/test.jpg' scale='showall'/>
Itt is, mint a korbbi pldknl, lehet tvzni az elemeket, tbb
videot elhelyezni, kisrletezgetni.

Ltogatink hvjk meg ismerseiket

Az egyik legfontosabb elem a kapcsolatptsben, a minl nagyobb
kvetszm elrsben az, hogy a ltogatink knnyedn tovbb tudjk
ajnlani oldalunkat. Ehhez az albbi FBML-kd fog kelleni:
<!-- INVITATION -->
<div style="padding: 0px;">
<fb:request-form method="get"
action="http://www.facebook.com/oldalad-azonostja" content="Kvesd
te is XYZ oldalt!<fb:req-choice url='http://www.facebook.com/xyz'
label='YES' />" type="page" invite="true">
<div class="clearfix" style="padding-bottom: 10px;">
<fb:multi-friend-selector condensed="true" style="width: 100%;"
showborder="false" actiontext="Hvd meg bartaidat, hogy megismerjk
XYZ oldalt" />
</div>
<fb:request-form-submit />
</fb:request-form>
</div>
<!-- END INVITATION -->
Ekkor a ltogatinknak lehetsgk van, hogy egyszerre legfeljebb 6
ismersknek meghvt kldjenek oldaladrl:

Mieltt a ltogatnk elklden a meghvt, kr egy megerstst is

az oldal, illetve megmutatja miknt fog megjelenni a meghv az
ismersnl:

Szemlyeskeds
Mdunkban ll olyan rszeket is elhelyezni oldalunkon,
megnevezett felhasznlnl fog egyedl megjelenni. Pldul a
<fb:visible-to-user
ms van...

uid="12345">Szeretlek!</fb:visible-to-user>Itt

ami

valami

hatsra ha az 12345-s azonostj felhasznl ltogatja meg

oldalunkat, ltni fogja, hogy szeretjk. Ezzel vigyzzunk, mert nem
sokig marad titok, ugyanis ha valaki megtekinti a forrskdot,
gyorsan kiderl a titok.
Ezt ltja mindenki, kivve 12345:

de ezt lthatja mindenki aki belenz a forrsfjlba (bngszn jobbklikk s forrs megtekintse vagy elem kivizsglsa, attl fggen
milyen bngszt hasznlunk):

Mivel ennek hasznlatt mg

vesztegessnk r tbb idt.

Facebook

is

ellenjavalja,

ne

is

Ltogati statisztikk
Honlapunk
ltogatottsgi
statisztikjnak
legfontosabb
s
legpontosabb mreszkze a Google Analytics, amely egy ingyenes
lehetsg
s
rengeteg
informcit
elrul
a
ltogatkrl.
(Rszletesebben a www.google.com/analytics oldalon tallhatunk rla
lerst)
Ezttal mr Facebook oldalunk ltogatit is feltrkpezhetjk,
honnan jttek, mennyi idt voltak nlunk, mik a trendek, stb. Ehhez
az albbi kdrszletet kell beilleszteni FBML-lapunkba:
<fb:google-analytics uacct="UA-9999999-99" />

Termszetesen az UA-kdot a sajtunkra ki kell cserlni s

hamarosan kezdett veszi a forgalom mrse. Sajt kdot pedig a
fenti honlapon lehet ignyelni egy Analytics fik ltrehozsa utn.

Szemlyes dvzls
Ugye mennyivel szemlyesebb egy olyan megszlts, hogy Szia
Jzsi! mint a Kedves Ltogat!? A mostani rszben az FBML
hasznlatnak ilyen irny lehetsgt mutatom be.
Ha a kvetkez rszletet tesszk be az FBML-flre, akkor mr szemlyesebb
lesz a megszlts:
Hello <fb:userlink uid="loggedinuser" />!

Vletlen szvegek
Nagyon aktvnak fogunk tnni ltogatink eltt, ha mindig ms s
mst olvasnak a kszntben. Erre nagyon j plda a kvetkez
kdrszlet, aminek hatsra hol az egyik, hol a msik szvegrszlet
fog megjelenni nem egyforma gyakorisggal:
<fb:random>
<fb:random-option
weight="2">Ez
megjelenni,
mint
a
</fb:random-option>
<fb:random-option
weight="1">Ez
</fb:random-option>
</fb:random>

ktszer
olyan
msik
ritkbban

fog

gyakran

fog
rsz

megjelenni.

Kommentezs
zenetet nem csak az zenfalon tudunk kapni, hanem csinlhatunk is
magunknak akr minden tmnkra kln-kln egyet. Ehhez az adott
FBML-lapra kell a kvetkezt beilleszteni:
<fb:comments xid="egyedi_xid_azonost" canpost="true"
candelete="false">
<fb:title>Beszlgessnk az dvzl oldalamrl </fb:title>
</fb:comments>
A bellthat paramterek:
xid egyedi azonostja a kommentnek
canpost true/false engedlyezi a ltogatnak a hozzszlst
candelete true/false engedlyezi a ltogatnak a hozzszlsok trlst

Kpgalria 2
Egy l plda kpgalria megvalstsra. A 4 full-os kp kzl csak az
elst jelenti meg az albbi kd, s ha a kicsi kpek valamelyikre
klikkelsz akkor az adott kphez tartoz teljes kpet megjelenti, mg a
maradk hrmat elrejti:
<div id="image1">
<img src="http://www.oldalam.hu/full-1.jpg" />
</div>
<div id="image2" style="display: none;">
<img src="http://www.oldalam.hu/full-2.jpg" />
</div>
<div id="image3" style="display: none;">
<img src="http://www.oldalam.hu/full-3.jpg" />
</div>
<div id="image4" style="display: none;">
<img src="http://www.oldalam.hu/full-4.jpg" /><br />
</div>
<a href="#" clicktoshow="image1" clicktohide="image2,image3,image4">
<img src="http://www.oldalam.hu/thumb-1.jpg" />
</a>
<a href="#" clicktoshow="image2" clicktohide="image1,image3,image4">
<img src="http://www.oldalam.hu/thumb-2.jpg" />
</a>
<a href="#" clicktoshow="image3" clicktohide="image1,image2,image4">
<img src="http://www.oldalam.hu/thumb-3.jpg" />
</a>
<a href="#" clicktoshow="image4" clicktohide="image1,image2,image3">
<img src="http://www.oldalam.hu/thumb-4.jpg" />
</a>

Minisite
Kerlhetnk abba a helyzetbe, hogy nem akarunk sok flet feltenni a
rajongi oldalunkra, de mgis sok informcit szeretnnk megosztani.
Az
albbi
plda
bemutatja,
miknt
lehet
egy
miniszjtot
megvalstani, aminl ha az egyes cimkkre klikkel a ltogat,
aszerint jn fel ms tartalom:
<!navigcis rsz -->
<a href="#" clicktoshow="nav1"
<a href="#" clicktoshow="nav2"
<a href="#" clicktoshow="nav3"
<a href="#" clicktoshow="nav4"

clicktohide="nav2,nav3,nav4">Kezdlap</a>
clicktohide="nav1,nav3,nav4">Esemnyek</a>
clicktohide="nav1,nav2,nav4">Helyek</a>
clicktohide="nav1,nav2,nav3">Rlunk</a>

<!ide jn a Kezdlap-ra sznt rsz -->

<div id="nav1">
Kezdlap<br/>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Donec porttitor varius mollis. Integer enim elit, sollicitudin vel
tempus at, molestie at nunc. Donec sed mi a justo facilisis dapibus
sit amet vel elit....
</div>
<!ide jn az Esemnyek-re sznt rsz -->
<div id="nav2" style="display: none;">
Esemnyek<br/>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Donec porttitor varius mollis. Integer enim elit, sollicitudin vel
tempus at, molestie at nunc. Donec sed mi a justo facilisis dapibus
sit amet vel elit....
</div>
<!ide jn a Helyek-re sznt rsz -->
<div id="nav3" style="display: none;">
Helyek<br/>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Donec porttitor varius mollis. Integer enim elit, sollicitudin vel
tempus at, molestie at nunc. Donec sed mi a justo facilisis dapibus
sit amet vel elit....
</div>
<!ide jn a Rlunk-ra sznt rsz -->
<div id="nav4" style="display: none;">
Rlunk<br/>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Donec porttitor varius mollis. Integer enim elit, sollicitudin vel
tempus at, molestie at nunc. Donec sed mi a justo facilisis dapibus
sit amet vel elit....
</div>

Ez a rsz a Kpgalria mintjra mkdik, csak szveges tartalommal:

a nav1-es elem a lthat egyedl, mg a tbbi rejtett s aszerint,
hogy melyikre klikkelnk, azt lthatv, a tbbit rejtett teszi.

Termszetesen az aloldalaknl lehetsg van minden interaktv dolog,

kp, video, zenfal, ... felhasznlsra is.

API

Gyakran merl fel arra is igny, hogy ne csak a kzssgi oldalon

fejlesszk
vllalkozsunkat,
hanem
az
elsdleges
honlapunkon
szeretnnk tovbbi kvett toborozni, esetleg az zenfal zeneteit
kitenni vagy itt tudjanak zenetet hagyni neknk. Az albbiakban
erre mutatok pldkat:
VIGYZAT! Nagyon egyszer!

Ljk gomb:
http://developers.facebook.com/docs/reference/plugins/like

Tltsk ki az egyszer formot s

nyomjuk meg a GetCode gombot.
Majd
az
iFrame-s
kdrszt
msoljuk be a honlapunkra s
mris tudnak ljkolni minket.

Like Box
Ettl nagyobb tuds API a Like Box. Itt mr az egyszer Like gomb
mellett kvetinkrl lthatunk profilkpeket,
az zenfalunk
legutols
bejegyzseit
is.
Itt
is
egyszeren
fel
tudjuk
paramterezni, hogy mit szeretnnk viszontltni honlapunkon s
eszerint elkrni a beillesztend kdot.

Facepile
Ez a plugin megmutatja azoknak a felhasznlknak a profilkpt s
csak azt -, akiknek tetszik az oldalunk.

Vgezetl
Remlem sikerlt a knyvben szerepl zeltkkel kedvet kapnod
ahhoz, hogy vllalkozsod termkoldalt kicsit vagynyabbl, ne
sablonosan mutasd be a Facebook egyre nvekv kzssgnek. A
vagnysg mellett termszetesen a hasznossg lebegjen a szemed
eltt. A fenti mdszerek hasznlatval jelents mrtkben meg fogod
nvelni ismeretsgedet, ezt tapasztalatbl tudom.

ksznm figyelmedet,
Szab-Pls Tibor