A Facebook 2013 január 25-i frissítésével kizárta a külső CSS használatának lehetőségét és inline-style-al látta el Like Box-okat, így ezen segédlet sem működik. Amennyiben lesz új megoldás, azt közöljük egy új blog bejegyzésben.
Frissítés: A február 8.-i Facebook frissítés ismét engedélyezi az egyedi boxok megjelenítését, azonban Like funkcióját elveszítette. Nem lehet a gombra nyomni. Javasoljuk a box alá egy külön like gomb elhelyezését.
Frissítés: A február 15.-ei Facebook frissítéssel ismét helyre jöttek a gombok, azonban a gomb új stíluskészletet kapott, tehát az új class-okat kell immáron felülírni, de legalább működik ismét az egyedi Facebook doboz készítés.
.
Az Facebook Likebox-ot talán egyetlen fejlesztőnek sem kell bemutatni, ez az a kis panel, amivel az olvasók láthatják, van Facebook oldalunk és rögtön követni is tudják. A legelterjedtebb formája az, amikor egy gomb és alatta pár követő jelenítődik meg. Ezen felül persze lehetőségünk van a legfrissebb postokat is kiíratni, de ezt kevesen használják. Egy alap Facebook Like boksz az esetünkben így néz ki:
< iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftotalstudio&width=570&height=290&colorscheme=light&show_faces=true&border_color&stream=false&header=true&appId=280760345284439"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:570px; height:290px;"
allowTransparency="true">
< /iframe>
Ez a legelterjedtebb iframe-es beágyazás, gyakorlatilag szinte semmi képzetség nem kell hozzá, hogy valaki elhelyezze az oldalán és máris gyűlnek a követők. Mindez addig egészen jól is néz ki ameddig az oldalunk fehér vagy valami világos alappal készült el. Jelen cikkünkben itt a totalstudio.hu-n látható, hogy a sötétszürke háttéren már minden csak nem esztétikus ez a doboz. Most bemutatjuk miként is lehet teljesen megváltoztatni a doboz kinézetét.
1. lépés
Helyezzük el a következő scriptet és DIV-et a rögtön a BODY tag nyitása után. Elvileg természetesen bárhova helyezhetnénk, azonban főleg IE alatt lehetnek problémák, ha nem a BODY után futtatjuk a scriptet azonnal.
< div id="fb-root">
< script type="text/javascript">
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/hu_HU/all.js#xfbml=1&appId=280760345284439";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
< /script>
2. lépés
Helyezzük el a következő kódot oda, ahol a Facebook Like boxunkat szeretnénk látni az oldalunkon. Ügylejünk a következő paraméterek helyes megadására.
profile_id: oldalunk profil kódja. Amennyiben Facebook oldalunknak már direkt linkje van akkor a leggyorsabb módon úgy tudhatjuk meg ezt a kódot, ha megkeressük az FB oldalon a" Frissítések RSS csatornán keresztül" linket baloldalt és ott a hivatkozásban meg lesz adva az id= paraméter után a kívánt számsorozat.
stream: ezzel kapcsolhatjuk ki/be a hírfolyamot a likeboxban
connections: ahány embert meg szeretnénk jeleníteni a Facebook Likeboxban, ha nem fér ki annyi akkor természetesen csak annyit fogunk látni, amennyi belefér az adott szélességbe és magasságba
width: LikeBox szélessége
height: LikeBox magassága
header: a Csatlakozz Facebookon szöveg kiiratása vagy eltűntetése (ajánlott a 0 érték)
css: ez a legfontosabb része az egésznek. Itt adjuk meg, a saját stíluskészletünket a Facebook Likebox számára. Ebben színezhetünk vagy rendezhetünk át mindent, tehát ügyeljünk, hogy jó hivatkozást adjunk meg! A kérdőjel utáni számra később kitérünk, majd mert nagyon fontos szerepe lesz!
< fb:fan profile_id="152756568111455"
stream="0"
connections="30"
width="300"
height="530"
header="0"
logobar="0"
css="http://www.totalstudio.hu/css/facebook.css?1">
< /fb:fan>
Amennyiben TinyMCE-t használunk és abban szeretnénk beadni ezt a fajta facebook boxot, akkor először adjuk hozzá paraméterként a következőt: extended_valid_elements : "fb:fan[profile_id|stream|connections|header|logobar|css|height|width]"
3. lépés
Hozzuk létre a facebook.css-ünket, a szerveren. Az adott esetben nem minden van átalakítva a dobozon, hiszen csak a képzelet szabhat határt, hogy miként szeretnénk megváltoztatni a Facebook Like boxot. A színektől kezdve a háttérképeken át a képek méretéig és a betűtípusokig mindent megváltoztathatunk kedvünkre. Amennyiben valamelyik elemnek a Likeboxon belül nem tudod a class nevét, akkor érdemes Chrome Developerrel vagy Firebug-al kielemezni az ablakot és megnézni mi az adott stíluskészlet. Ha valamit nagyon nem tudunk megváltoztatni, ne legyünk restek és használjuk az !important parancsot az értékeknél. Íme, egy minta CSS, az adott példához.
Egyedi Facebook Likebox minta 1
.fan_box a:hover{ text-decoration:none}
.fan_box .full_widget{ height:535px; border:0 !important; background:none !important}
.fan_box .connect_top{ background:none !important; padding:0 !important}
.fan_box .profileimage, .fan_box .name_block a{color:#0085F8 !important}
.fan_box .profileimage, .fan_box .name_block{padding-bottom:8px !important; position:relative !important}
.fan_box .profileimage, .fan_box .name_block a:hover{ color:#ffffff !important}
.fan_box .full_widget .connect_top{ background-color:#050505 !important; padding:10px 10px 10px 10px !important; margin-bottom:10px !important; border-bottom: 1px dotted #666666}
.fan_box .full_widget .connect_top img{ border:1px solid #666666 !important; padding:2px !important; background-color:#2F2F2F !important; margin-right:10px !important; width: 50px; height: 50px;}
.fan_box .connect_action{ padding:0 !important}
.fan_box .connections{ padding:0 !important; border:0 !important; font-family:Arial; font-size:12px; font-weight:bold; color:#666}
span.total{ color:#0085F8; font-weight:normal; line-height:19px; text-align:center; display:block; font-size:16px; font-family:Georgia; padding:10px 0px 10px 0px !important }
.fan_box .connections .connections_grid{ padding-top:10px !important}
.fan_box .connections_grid .grid_item{ padding:0 13px 10px 0 !important}
.fan_box .connections_grid .grid_item img{border: 1px solid #000000;}
.fan_box .connections_grid .grid_item .name{ font-family:Arial; font-weight:normal; color:#CCC!important; padding-top:1px !important; font-size:12px !important}
.fan_box .connect_widget{right:0px; bottom:0px}
.fan_box .connect_widget .connect_widget_interactive_area{margin:0 !important}
.fan_box .connect_widget td.connect_widget_vertical_center{padding:0 !important}
.connect_widget .connect_widget_text{color:#424242 !important; display:none !important}
Itt pedig egy másik példa, ahol sokkal több helyet takarítottunk meg annak érdekében, továbbá alulra került a Tetszik gomb és lekerült a felső információs sáv. Ilyenkor azért a Facebook boksz köré érdemes elhelyezni egy linket, ami a Facebook oldalunkra mutat akár egy ikont akár csak egy szöveges hivatkozást. Ügyesebbek abszolút pozícióval a Likebox jobb alsó sarkába is berakhatnak egy ikont akár. LÁssuk most a példát é sa hozzá tartozó egyedi Facebook CSS-t:
Egyedi Facebook Likebox minta 2
.fan_box a:hover{ text-decoration:none}
.fan_box .full_widget{ height:185px; border:0 !important; background:none !important; position:relative}
.fan_box .connect_top{ background:none !important; padding:0 !important}
.fan_box .profileimage, .fan_box .name_block{ display:none}
.fan_box .connect_action{ padding:0 !important}
.fan_box .connections{ padding:0 !important; border:0 !important; font-family:"Lucida Sans Unicode",Arial,Helvetica,sans-serif; font-size:12px; font-weight:bold; color:#666}
span.total{ color:#fff; font-weight:normal; line-height:19px}
.fan_box .connections .connections_grid{ padding-top:10px !important}
.fan_box .connections_grid .grid_item{ padding:0 8px 10px 0 !important; width: 35px;}
.fan_box .connections_grid .grid_item .name{ font-family:"Lucida Sans Unicode","lucida grande",tahoma,verdana,arial,sans-serif; font-weight:normal; color:#0085F8!important; padding-top:1px !important; font-size:10px !important}
.fan_box .connections_grid .grid_item img{width: 35px}
.fan_box .connect_widget{position:absolute; bottom:0px; left:0px; margin:0 !important}
.fan_box .connect_widget .connect_widget_interactive_area{margin:0 !important}
.fan_box .connect_widget td.connect_widget_vertical_center{padding:0 !important}
.connect_widget .connect_widget_text{color:#fff !important}
FONTOS! Amint megváltoztatunk valamit a CSS-ben vissza kell mennünk a beágyazó kódra és a kérdőjel utáni számot eggyel növelni ugyanis a Facebook lecacheli a CSS-eket így ha nem növeljük a számot nem is fogjuk látni a változást a Facebook Likebox-unkon.
Remélem sikerül mindenki számára bemutatni, hogy nem kell megelégednünk a Facebook által kínált szolgáltatásokkal, hiszen igen is lehetőségünk van kicsit mindenbe belenyúlni és egyedivé faragni, ahogy azt most láthattuk a Facebook Likebox esetében is.
