info@totalstudio.hu    +36 20 930 9231    +36 20 313 9004

Egyedi Facebook Likebox készítés

2011-11-30 napon

A Facebook beépítése egy oldalba manapság már szinte kihagyhatatlan, azonban valljuk be, a fehér kék nem minden esetben passzol weboldalunkhoz. Most bemutatjuk, hogy miként is lehet teljes mértékben átszabni egy Facebook Likebox kinézetét, hogy az passzoljon az oldalunkhoz.
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.

  • 2011-11-30 napon
  • Webes tippek, trükkök

Kapcsolódó

2020. Június 12.
A TotalStudio betört a plasztikai sebészet piacára is!
A Csomorszerszamgep.hu  átadásával egy igazán érdekes projektünk zárult le. Miben rejlett az érdekessége? Leginkább abban, hogy a kivitelezés során számos  elvarratlan szálba botlottunk, amelyekkel kezdenünk kellett valamit. Így gondoltam megosztom a tapasztalataimat a projektről, mert ez a megbízás tökéletes példája annak, hogyan ne kezeljük weboldalunkat és a hozzá tartozó szolgáltatásokat.
A járvány beköszönte óta az offline kereskedelem zuhanórepülésbe kezdett, hiszen aki tud, otthon marad, és csak akkor dugja ki az orrát, ha feltétlenül szükséges.
István, Koppány, Sarolt, Gizella... Ismerősek a nevek?  Igen, ezek az István, a király  rockopera szereplői. Mindezt gyerekekkel? Bizony!