Hogyan csináljunk egyedi facebook oldalt 1 óra alattt by gondihenrik

FBML Facebook Markup Language

Hogyan csinรกljunk egyedi Facebook oldalt 1 รณra alatt? Szabรณ-Pรถlรถs Tibor

Facebook Markup Language – vagyis Facebook jelölőnyelv. mindenáron ragaszkodunk a magyarra fordításhoz.

már

Ebben a könyvben az FBML-t gyakorlati példákkal és képekkel illusztrálva szeretném közérthetőbbé, könnyen használhatóvá tenni, egy-egy látványos „trükkel”. Nem fogok viszont kitérni semmi olyasmire, hogy miért is jó maga a facebook, hogyan kell szerezni látogatót, marketing-stratégiát kialakítani. Ez nem egy elméleti kézikönyv. Tisztán gyakorlatias.

Rólam röviden annyit írnék, hogy különféle webes- és offline fejlesztésekkel közel 10 éve foglalkozom, A(!) közösségi oldallal viszont alig egy éve. Nem szeretek ismerősöket közösségi oldalakon „gyűjteni”, többre értékelem a személyes kapcsolatokat, viszont tudom, hogy ez a jövő és az árral érdemes együtt haladni. A könyvben bemutatott példák kipróbáltak, leellenőrizettek és működőek. Szinte egy copy+paste-tel átvehetők. A példák a legelterjedtebb és leghasznosabb FBML elemeket és azok használatát mutatja be.

Ezzel

kuponnal

kapsz

–

ja,

igen,

tegeződni

fogunk

–

50%-os

kedvezményt,

ha úgy döntesz engem bízol meg a facebookmegjelenésed kialakításával vagy a bemutatott példákat kicsit feltuningolva szeretnéd megvalósítani.

KUPONKÓD: FXEE1RD-2011 beválthatod itt: info@tibro1977.hu Érvényes: 2011. december 31.

A könyvben szereplő forráskódok letölthetők a www.tibro1977.hu oldalról regisztráció után.

Tartalomjegyzék FBML ........................................................................................................................................................ 2 Statikus FBML ...................................................................................................................................... 6 Tovább az alkalmazáshoz ...................................................................................................... 7 Kezdjük rögtön a legegyszerűbbel ................................................................................ 7 Feliratkozás hírlevélre ...................................................................................................... 9 FBML-Párbeszéd ablak készítése ................................................................................... 12 Képgaléria ................................................................................................................................... 15 Kicsit mozogjunk – video beágyazása ....................................................................... 17 Látogatóink hívják meg ismerőseiket ....................................................................... 18 Személyeskedés ......................................................................................................................... 20 Látogatói statisztikák ...................................................................................................... 21 Személyes üdvözlés ................................................................................................................ 22 Véletlen szövegek .................................................................................................................. 22 Kommentezés................................................................................................................................. 22 Képgaléria 2 .............................................................................................................................. 23 Minisite ........................................................................................................................................ 24 API ......................................................................................................................................................... 26 „Lájk” gomb: .............................................................................................................................. 27 Like Box ........................................................................................................................................ 28 Facepile ........................................................................................................................................ 28 Végezetül ..................................................................................................................................... 29

Statikus FBML Első lépésben menjünk be a termékoldalunkba és ott adjunk hozzá egy újabb alkalmazást oldalunkhoz a „további alkalmazások böngészése” linkre klikkelve.

Írjuk be a keresőbe, hogy „fbml” és a találati listából válaszuk ki a „Statikus FBML” elemet. Ekkor a „Statikus FBML” alkalmazás adatlapjára jutunk. A bal oldalt található Hozzáadás az oldalamhoz linkkel külön fülként hozzáadhatjuk a mi oldalunkhoz. Ekkor az oldalunkon megjelenik egy újabb fül: FBML-1

Ami egyelőre teljesen üres oldalként jelenik meg. Ahhoz, hogy ezen változtassunk ismét az Oldal szerkesztése  Alkalmazások útvonalat kell bejárnunk. Itt az alkalmazásaink legutolsó elemeként már ott is van a statikus fbml-ünk:

A választható három lehetőség közül nézzük a legegyszerűbbet:  Link erre a fülre – ez nem csinál mást, csak ad nekünk egy szépnek nem mondható, de annál hosszabb url-t, amit a böngészőbe másolva az adott fül jön elő  Beállítások módosítása – szintén nem gyakran használt fül. Itt tudjuk a fül láthatóságát beállítani.  legutoljára hagytam könyvem egyik fő témáját, szóval gyerünk: Tovább az alkalmazáshoz!

Tovább az alkalmazáshoz Mire is tudnánk használni ezt a frissen megszerzett fület?     

elhelyezhetünk egy szép nagy fényképet és kinevezhetjük kezdő oldalnak az üdvözlő szöveg mellé akár egy kérdéssort is betehetünk, aminek válaszait ki tudjuk értékelni hírlevél feliratkozására tudunk lehetőséget teremteni interaktív képgalériát tudunk csinálni vagy bármi mást ami eszünkbe jut!

Kezdjük rögtön a legegyszerűbbel Helyezzünk el kezdőoldalnak!

egy

képet

és

állítsuk

ezt

FBML-fület

Lépések: 1. készítsük el a képet (figyeljünk a méretekre is, 520pixelnél ne legyen szélesebb lehetőleg, ugyanis a hirdetéseknek is ott a hely!) 2. töltsük fel egy szerverre (ha nincs tárhelyünk akár ingyenes tárhelyre is elhelyezhetjük google) 3. Adjunk címet a fülnek és másoljuk be az alábbi kódot az FBMLmezőbe: <img src="http://www.szerveredneve.hu/facebook-kezdokep.jpg"> (ez egyébként egy egyszerű HTML-elem, aminek hatására egy képet fog megjeleníteni (img) a megadott url-ről (src)) Azt, hogy nem írtuk-e el a kép elérésí útját a legegyszerűbben úgy tudjuk ellenőrizni, hogy a „”-jelek közti részt bemásoljuk a böngészőnkbe. Ha az a kép jelenik meg, amit vártunk, mindent jól csináltunk, ha 404-es hibaüzenet, akkor ellenőrizzük, nem írtunk-e el valamit. Ha készen vagyunk lehet örülni, de azért egyelőre ne pályázzunk meg html-szerkesztői állásokat  4.

gombot nyomjuk meg, majd térjünk vissza az Oldal szerkesztésére. 5. Még meg kell csinálni, hogy az új fül legyen a mi köszöntő fülünk. Ezt az Engedélyek kezelése menüpont alatt tudjuk beállítani az Alapértelmezett fülnél levő lenyíló listával:

6. Tekintsük meg az eredményt. Ahhoz, hogy ténylegesen lássuk amit csináltunk érdemes egy új böngészőablakot nyitni és abban beírni az oldalunkat. Ugyanis ha a facebook tudja, hogy mi vagyunk azok, akkor figyelmen kívül hagyja mit állítottunk be alapértelmezett fülnek.

Feliratkozás hírlevélre Ha már sikerült az üdvözlő képet elhelyeznünk, itt az ideje továbblépni. Tételezzük fel azt az életszerű szituációt, hogy jelenlegi vásárlóink, kapcsolatainkat bővíteni szeretnénk a facebook segítségével. Lehetőséget adhatunk arra, hogy aki érdeklődik utánunk megadhassa nevét és email címét, amit mi saját adatbázisunkban eltárolunk vagy csak egy email-értesítőben elküldünk magunknak. Itt már szükségünk lesz egy php-t futtatni tudó környezetre. Ilyen például a tárhelyünk is, ahol már weboldalunk is el van helyezve. Amennyiben nincs ilyenre lehetőséged, de szeretnél élni a lehetőséggel, a könyben található kupont erre is beválthatod. Részletek : info@tibro1977.hu A lépések a korábban bemutatottakhoz hasonlatosak: 1. Vegyünk fel új Statikus FBML fület oldalunkra. Amennyiben már meglévő FBML oldalunk mellé másikat is szeretnénk felvenni, akkor nem az alkalmazásoknál kell hozzáadni azt, hanem az FBML szerkesztő oldal alján az Újabb FBML doboz hozzáadása linkkel. 2. A következő részletet illesszük bele a kód helyére: Iratkozz fel hírlevelünkre! <fb:bookmark /> <form action="http://szerveremneve.hu/form_submit.php" method="post"> <p> <label for="name">Név:</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();">Elküld</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 küldése 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. Természetesen a http://szerveremneve.hu/form_submit.php részt a saját domainnevünkkel kell lecserélni, és a form_submit.php pedig az a program lesz, ami az adatokat fel fogja dolgozni. Végezetül a gombbal mentsük el munkánkat. 4. Készítsük el a form_submit.php fájlt! Ehhez a művelethez tökéletesen megfelelő nekünk a Notepad/Jegyzettömb nevű alkalmazás <?php adatfeldolgozas(); ?> Itt kicsit bonyolultabb rész jön, attól függően, mit szeretnénk csinálni az adatokkal, úgy kell elkészítenünk az adatfeldolgozas nevü függvényünket. a) Adatok elküldése e-mailben (szükségünk van a levelezőnk SMTP beállítására, illetve a phpmailer osztályra, amit innét tudunk letölteni: 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 = "Feliratkozás hírlevélre"; $mail_body = "Név: ".$_POST['name']; $mail_body = "<br/>Email: ".$_POST['email'];

$mail->MsgHTML($mail_body); if(!$mail->Send()) { echo 'Hiba a levél küldésekor!'; echo 'Mailer hiba: ' . $mail->ErrorInfo; } else { echo 'Köszönjük!'; } } Abban az esetben, ha kimenő levélküldőnk hitelesítést igényel, így tudjuk megadni az azonosítót és jelszavat, illetve a portot: $mail->SMTPAuth = true; $mail->Username = ’felhasznalónév’; $mail->Password =’jelszo’; $mail->Port = 25; b) Ha pedig nem e-mailban, hanem adatbázisban szeretnénk az adatokat letárolni, akkor szükségünk van adatbázis kapcsolatra (szintén a legtöbb tárhelyen rendelkezésre áll): function adatfeldolgozas(){ $kapcsolat = mysql_connect('localhost', 'adatbázisfelhasználó', 'adatbázis-jelszó'); mysql_select_db('adatbázisnév'); $query = "INSERT INTO táblanév (id, nev, emailcim, feliratkozva) values (null, '".$_POST['name']."' ,'".$_POST['email']."' ,now())"; mysql_query($query); echo 'Köszönjük!'; } Természetesen több mezőt is definiálhatunk, illetve annak az értékeit is el tudjuk érni, a $_POST[’másikmezőneve’] hivatkozással a fentiek mintájára.

Amennyiben elakadtál: info@tibro1977.hu

A fenti két példa még nem tartalmaz sok FBML –elemet. Itt az ideje belehúzni.

FBML-Párbeszéd ablak készítése Ha több dolgot is ki szeretnénk tenni egy oldalra és nem akarjuk, hogy nagyon megnyúljon lefele az oldal, készíthetünk egy listát, amire klikkelve az adott linkhez rendelt tartalom jön fel egy külön kis ablakban:

és a linkekre kattintva valami hasonlót kapunk:

A fenti példát az alábbi kóddal oldhatjuk meg:  <a href="#" clicktoshowdialog="test_dialog">Feliratkozás a hírlevélre</a>   <fb:dialog id="test_dialog"> <fb:dialog-title>Hírlevél</fb:dialog-title> <fb:dialog-content>

Iratkozz fel hírlevelünkre! <fb:bookmark /> <form action="http://szerveremneve.hu/form_submit.php" method="post"> <p> <label for="name">Név:</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();">Elküld</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 küldése 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="Bezár" close_dialog=true /> </fb:dialog-content> </fb:dialog>

Az egyszerű szöveges link helyett képet is elhelyezhetünk az alábbi módon:  <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>  Ezt a 96x76px-es képet használtam fel, aminek a felső része jelenik meg alap esetben és az alsó akkor, amikor az egérrel fölé megyünk. Ez a rész szintén nem FBML volt, hanem szabványos CSS, azaz Cascading Style Sheet. (Egyre közelebb jutunk a html szerkesztői álláshoz!  )

Képgaléria Képgaléria a képeket ki tudunk ráhúzva az

készítéséhez is szükségünk lesz saját tárhelyre, ahonnét vesszük. Ez is CSS-re és HTML-re épül, amivel egyszerűen tenni fotokat FBML fülünkre és az egeret egy-egy képre adott képet nagyobba is megmutatja:

És az egeret a pálmafás képre vittem:

Az alábbi forrás beillesztésével ez reprodukálható:  <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>

Kicsit mozogjunk – video beágyazása Lehetőség van különféle médiát beágyazni FBML oldalunkba. Ehhez az <fb:swf />-taget kell felhasználni. Egészen pontosan egy Shockwave Flash objektumot tudunk ezzel a módszerrel beágyazni, ami lehet flash animációtól kezdve video, játék is. Most egy video beágyazására nézzünk példát: <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ú média lejátszóval 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 korábbi példáknál, lehet ötvözni az elemeket, több videot elhelyezni, kisérletezgetni.

Látogatóink hívják meg ismerőseiket Az egyik legfontosabb elem a kapcsolatépítésben, a minél nagyobb követőszám elérésében az, hogy a látogatóink könnyedén tovább tudják ajánlani oldalunkat. Ehhez az alábbi FBML-kód fog kelleni:  <div style="padding: 0px;"> <fb:request-form method="get" action="http://www.facebook.com/oldalad-azonosítója" content="Kövesd te is XYZ oldalát!<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="Hívd meg barátaidat, hogy megismerjék XYZ oldalát" /> </div> <fb:request-form-submit /> </fb:request-form> </div>  Ekkor a látogatóinknak lehetőségük van, hogy egyszerre legfeljebb 6 ismerősüknek meghívót küldjenek oldaladról:

Mielőtt a látogatónk elküldené a meghívót, kér egy megerősítést is az oldal, illetve megmutatja miként fog megjelenni a meghívó az ismerősénél:

Személyeskedés Módunkban áll olyan részeket is elhelyezni oldalunkon, megnevezett felhasználónál fog egyedül megjelenni. Például a <fb:visible-to-user más van...

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

ami

valami

hatására ha az 12345-ös azonosítójú felhasználó látogatja meg oldalunkat, látni fogja, hogy szeretjük. Ezzel vigyázzunk, mert nem sokáig marad titok, ugyanis ha valaki megtekinti a forráskódot, gyorsan kiderül a titok. Ezt látja mindenki, kivéve 12345:

de ezt láthatja mindenki aki belenéz a forrásfájlba (böngészőn jobbklikk és forrás megtekintése vagy elem kivizsgálása, attól függően milyen böngészőt használunk):

Mivel ennek használatát még vesztegessünk rá több időt.

Facebook

ellenjavalja,

Látogatói statisztikák Honlapunk látogatottsági statisztikájának legfontosabb és legpontosabb mérőeszköze a Google Analytics, amely egy ingyenes lehetőség és rengeteg információt elárul a látogatókról. (Részletesebben a www.google.com/analytics oldalon találhatunk róla leírást) Ezúttal már Facebook oldalunk látogatóit is feltérképezhetjük, honnan jöttek, mennyi időt voltak nálunk, mik a trendek, stb. Ehhez az alábbi kódrészletet kell beilleszteni FBML-lapunkba: <fb:google-analytics uacct="UA-9999999-99" />

Természetesen az UA-kódot a sajátunkéra ki kell cserélni és hamarosan kezdetét veszi a forgalom mérése. Saját kódot pedig a fenti honlapon lehet igényelni egy Analytics fiók létrehozása után.

Személyes üdvözlés Ugye mennyivel személyesebb egy olyan megszólítás, hogy „Szia Józsi!” mint a „Kedves Látogató!”? A mostani részben az FBML használatának ilyen irányú lehetőségét mutatom be. Ha a következő részletet tesszük be az FBML-fülre, akkor már személyesebb lesz a megszólítás: Hello <fb:userlink uid="loggedinuser" />!

Véletlen szövegek Nagyon aktívnak fogunk tűnni látogatóink előtt, ha mindig más és mást olvasnak a köszöntőben. Erre nagyon jó példa a következő kódrészlet, aminek hatására hol az egyik, hol a másik szövegrészlet fog megjelenni – nem egyforma gyakorisággal: <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>

kétszer olyan másik ritkábban

fog

gyakran

fog rész

megjelenni.

Kommentezés Üzenetet nem csak az üzenőfalon tudunk kapni, hanem csinálhatunk is magunknak – akár minden témánkra – külön-külön egyet. Ehhez az adott FBML-lapra kell a következőt beilleszteni: <fb:comments xid="egyedi_xid_azonosító" canpost="true" candelete="false"> <fb:title>Beszélgessünk az üdvözlő oldalamról  </fb:title> </fb:comments> A beállítható paraméterek: xid – egyedi azonosítója a kommentnek canpost – true/false engedélyezi a látogatónak a hozzászólást candelete – true/false engedélyezi a látogatónak a hozzászólások törlését

Képgaléria 2 Egy élő példa képgaléria megvalósítására. A 4 „full”-os kép közül csak az elsőt jeleníti meg az alábbi kód, és ha a kicsi képek valamelyikére klikkelsz akkor az adott képhez tartozó teljes képet megjeleníti, míg a maradék hármat 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 Kerülhetünk abba a helyzetbe, hogy nem akarunk sok fület feltenni a rajongói oldalunkra, de mégis sok információt szeretnénk megosztani. Az alábbi példa bemutatja, miként lehet egy miniszájtot megvalósítani, aminél ha az egyes cimkékre klikkel a látogató, aszerint jön fel más tartalom: <!—navigációs rész --> <a href="#" clicktoshow="nav1" <a href="#" clicktoshow="nav2" <a href="#" clicktoshow="nav3" <a href="#" clicktoshow="nav4"

clicktohide="nav2,nav3,nav4">Kezdőlap</a> clicktohide="nav1,nav3,nav4">Események</a> clicktohide="nav1,nav2,nav4">Helyek</a> clicktohide="nav1,nav2,nav3">Rólunk</a>

<!—ide jön a ’Kezdőlap’-ra szánt rész --> <div id="nav1"> Kezdőlap<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 jön az ’Események’-re szánt rész --> <div id="nav2" style="display: none;"> Események<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 jön a ’Helyek’-re szánt rész --> <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 jön a ’Rólunk’-ra szánt rész --> <div id="nav4" style="display: none;"> Rólunk<br/>

Ez a rész a Képgaléria mintájára működik, csak szöveges tartalommal: a nav1-es elem a látható egyedül, míg a többi rejtett és aszerint, hogy melyikre klikkelünk, azt láthatóvá, a többit rejtetté teszi.

Természetesen az aloldalaknál lehetőség van minden interaktív dolog, kép, video, üzenőfal, ... felhasználására is.

API

Gyakran merül fel arra is igény, hogy ne csak a közösségi oldalon fejlesszük vállalkozásunkat, hanem az elsődleges honlapunkon szeretnénk további követőt toborozni, esetleg az üzenőfal üzeneteit kitenni vagy itt tudjanak üzenetet hagyni nekünk. Az alábbiakban erre mutatok példákat: VIGYÁZAT! Nagyon egyszerű! 

„Lájk” gomb: http://developers.facebook.com/docs/reference/plugins/like

Töltsük ki az egyszerű formot és nyomjuk meg a GetCode gombot. Majd az iFrame-s kódrészt másoljuk be a honlapunkra és máris tudnak lájkolni minket.

Like Box Ettől nagyobb tudású API a Like Box. Itt már az egyszerű Like gomb mellett követőinkről láthatunk profilképeket, az üzenőfalunk legutolsó bejegyzéseit is. Itt is egyszerűen fel tudjuk paraméterezni, hogy mit szeretnénk viszontlátni honlapunkon és eszerint elkérni a beillesztendő kódot.

Facepile Ez a plugin megmutatja azoknak a felhasználóknak a profilképét – és csak azt -, akiknek tetszik az oldalunk.

Végezetül Remélem sikerült a könyvben szereplő ízelítőkkel kedvet kapnod ahhoz, hogy vállalkozásod termékoldalát kicsit vagyányabbúl, ne sablonosan mutasd be a Facebook egyre növekvő közösségének. A „vagányság” mellett természetesen a hasznosság lebegjen a szemed előtt. A fenti módszerek használatával jelentős mértékben meg fogod növelni ismeretségedet, ezt tapasztalatból tudom.

köszönöm figyelmedet, Szabó-Pölös Tibor