FB oldal doboz beépítése az oldalsávba (2016)

Az alább leírtak a 2016. júliusi állapotot tükrözik – de a Fb elég gyakran változtat a dolgokon, így lehet, hogy kicsit később már nem pontosan így fognak kinézni a dolgok.

Mivel ehhez a bloghoz nem készítettem Fb oldalt, itt egy másik blogom Fb oldal dobozát szúrtam be utólag.

1. Belépés az új Fb Developer oldalra

A Fb Developer oldalának linkje

Ez nem az a link, amit a bejegyzés végén található források ajánlanak, mert az már nem működik!

2. Beállítások:

2.1. Fb-oldal URL címe:

Ha bemegyek erre az oldalra, akkor picit lejjebb görgetve már rögtön látni fogom a saját, meglévő Fb oldalam képét, illetve az URL cím rubrikájában a saját Fb oldalam linkjét.

Illetve, ha több Fb oldalam is van, akkor annak az URL-jét kell beírnom ide, amelyet a Fb dobozba be akarom illeszteni éppen, majd Entert nyomok - erre megjelenik az adott Fb oldalam képe a szöveges rész alatt.

(A Fb doboz létrehozásának feltétele, hogy már előtte létrehoztam a saját Fb oldalamat!)

2.2. Blogbejegyzések megjelenítése:

Az URL címmel egy sorban van a „Lapfülek” / Tabs

Itt alapból be van írva az, hogy „timeline” – ez jelenti azt, hogy megjeleníti a blogon a Fb bejegyzéseket a Fb dobozban.

Én ezt nem szeretném, mert így túlságosan nagy helyet foglal el a Fb doboz, meg amúgy is nehéz olvasni a kis dobozban a szöveget.

Ezért a szövegre kattintottam, és így már ki lehet törölni a „timeline” feliratot. „Entert” nyomtam – erre el is tűnik az alább megjelenő Fb dobozból a bejegyzések képe.

Ekkor nem fogja megjeleníteni a Fb bejegyzéseket a blog Fb dobozában.

2.3. Szélesség és magasság beállítása

Érdekes módon a szélesség angolul van írva: Width, a magasság pedig magyarul. Felajánl minimum értékeket, szélességnek 180 pixelt, magasságnak 70 pixelt.

Szélesség /Width:

Ha szeretném megjeleníteni a megosztás gombot is, akkor nekem minimum 230 pixelt kellett megadnom a szélességnek. Ez valószínűleg függ az adott sablontól is, amit használok éppen.

Magasság / Height:

Ha szeretném, hogy a lájkolók arca megjelenjen, akkor nem elég az alábbi kockát bekattintani (2.4 pont), hanem olyan magasságot kell megadnom, hogy bele férjenek a képek. Nekem kb. 250 pixeles magasságnál fértek bele úgy a lájkolók képei, hogy nem vágta félbe az arcokat.

Ennél nagyobb értéket nem volt értelme megadni, mert akkor csak a doboz alatti részt növelte tovább, nem a doboz méretét, és nem mutatott több lájkoló képet sem.

Az általam beírt értékeket nem árt egy papírra feljegyezni, mert amikor legközelebb visszajövök, érdekes módon nem írja ki, milyen értéket állítottam be előzőleg :-(

2.4. Lájkolók képének megjelenítése:

Alapból be van kattintva a „Show Friend’s Faces” kockája. Ha mégsem szeretném, hogy látszanak a fényképek, akkor kiveszem a pipát a kockából rákattintással.

2.5. Borítókép eltüntetése

Ha NEM szeretném, hogy a blogon látsszon a Fb oldalam borítóképe, akkor pipát kell tenni a „Hide Cover Photo” szöveg előtti kockába.

2.6. Fejléc beállítása

Alap állásban egy szélesebb fejléc jelenik meg, amely tartalmazza a „Kedveled” és a „Megosztás” gombot is.

Ha keskenyebb dobozt szeretnék megjeleníteni, akkor rákattintok a „Use Small Header” szöveg előtti kockára. Ekkor azonban a megosztás gomb eltűnik.

Illetve a megosztás gomb akkor is eltűnik, hogyha a szélességnél olyan értéket adok meg, ami már túl keskeny ahhoz, hogy mind a két gomb kiférjen – azaz 230 pixel alatti értéket írok be.

2.7. Szélesség adaptálása

Ha jól gondolom, akkor az „Adapt to plugin containet width” kocka, ami alapból be van kattintva, azt eredményezi, hogy a szélesség automatikusan alkalmazkodik az oldalam szélességéhez, illetve a helyhez, ahová be akarom illeszteni.

Az eddigi összes kattintásom eredménye látható lesz a megjelenő képen a szövegek alatt.

2.8. Beállítások 

Ezek alatt van egy „Settings” azaz beállítások felirat, amely alatt egy felsorolás van, mit lehet kódolással változtatni. Én ehhez nem nyúltam, mert a többivel épp elég jól be lehetett állítani mindent.

3. Kód generálás

Miután minden beállítást elvégeztem, rákattintok a „Kód megtekintése” / "Get Code" gombra.

3.1. Iframe kód kérés

Feljön egy ablak, amiben a fejlécben két fül van. Alapból a „Java Srcipt SDK” fül látszik. Mellette van az „Iframe” fül. Az Iframe fülre kattintva másik lapra vált a kép. Az itt megjelenő kódra van szükségem.

3.2. Kód kimásolása

Ha az egérrel bele kattintok a megjelenő keretbe, ahol a kód van, akkor kijelöli az egész kódot (ha kattintás után mégsem jelölné ki az egészet, akkor „Ctrl+a” billentyű kombinációt nyomok, és erre kijelöli.)

„Ctrl+c” gombbal kimásolom a kódot.

4. Kód beillesztés a saját blog oldalsávjába:

4.1. HTML/JavaScipt modul

Belépek a saját blogom vezérlőpultjába > Elrendezés menüpont >

Sidebar-right-1 felirat alatt rákattintok a „+ Modul hozzáadása” gombra

Feljön egy ablak a választható modulokkal

Ebben kiválasztom a „HTML/ JavaScript” modult a plusz gombra kattintva

A feljövő ablakban a „Tartalom” alatti dobozba kattintok, és „Ctrl+v” betűkombinációval bemásolom a kódot.

4.2. Név adás:

Ha akarok, adhatok egy nevet a doboznak, ami a blogon a like doboz felett fog megjelenni. Pl Kövess a Fb-on is! Vagy valami hasonló szöveget.

Ezt a szöveget az ablak „Név” alatti kis szövegdobozába kell beíri.

5. Mentés!!!

Ha bemásoltam a kódot, akkor az ablak alján levő narancssárga „Mentés” gombra kattintva elmentem a változtatásokat.

6. Ellenőrzés!!!

Mentés után automatikusan visszakerülök az irányítópultomra.

Felül, bal oldalon a „Blog megtekintése” gombra kattintva bejön egy új fülön a blogom felülete, ahol meg tudom nézni, hogy néz ki, amit műveltem :-) (Vagy az előnézet gombra kattintva – de ezen nem mindig jelenik meg nekem a beépített Fb doboz, pedig a blogon már ott van.)

7. Változtatások

Valószínűleg még alakítani szükséges a méreteken.

Ezt úgy tehetem meg, hogy visszamegyek az 1. pont alatt behozott Fb oldalra, ami valószínűleg még mindig nyitott kód-ablakkal található meg a böngészőmben.

Az ablak jobb felső sarkában található X-re kattintva kilépek a kód-ablakból, és máris ott találom magamat a Fb like doboz szerkesztő oldalán.

Ha a szélességen vagy a magasságon akarok változtatni, akkor vissza görgetek a „Width” = szélesség”, illetve a Magasság sorig, és ott változtatok a méreteken. Újra feljegyzem, milyen értéket állítottam be, hogyha ismét változtatni szükséges, tudjam hová-merre.

Ekkor azonban új kódot kell generálnom, azaz a 3-as ponttól újra végre kell hajtani a lépéseket, azzal a különbséggel, hogy a kód beillesztés előtt természetesen ki kell törölni az előzőleg bemásolt kódot. (Belekattintok a kód dobozába, „Ctrl+ a” val kijelölöm az egészet, és Deletet nyomok. Erre kitörli az egész kódot.) Ezután illesztem be a már ismert módon az új kódot.

Ezt addig ismétlem, amíg elégedett nem leszek a like dobozommal :-)

Elképzelhető, hogy a blogom hasábjainak szélességén is változtatnom kell ahhoz, hogy szépen be tudjam illeszteni a Fb dobozát.

Ebben a bejegyzésben írtam le, Hogyan tudom módosítani a blog hasábjainak szélességét?

Források:

Startüzlet oldala
Kezdő vállalkozó oldal