7 BLAZE OÜ - Õpetus: Kuidas muuta Facebooki “like boxi” disaini

Paljud veebilehe omanikud lisavad oma kodulehele Facebooki “like boxi” selleks, et näidata külastajatele kui palju neil on sõpru (fänne) ning pakkuda lihtsat ja kiiret võimalust ühe kliki abil enda lehe fänniks hakata. Siiamaani on üheks mureks olnud plugina jäik ja paindumatu disain, mis enamasti ei sobi kokku lehe üldise kujundusega Loe edasi […]

Paljud veebilehe omanikud lisavad oma kodulehele Facebooki “like boxi” selleks, et näidata külastajatele kui palju neil on sõpru (fänne) ning pakkuda lihtsat ja kiiret võimalust ühe kliki abil enda lehe fänniks hakata. Siiamaani on üheks mureks olnud plugina jäik ja paindumatu disain, mis enamasti ei sobi kokku lehe üldise kujundusega ning jätab ebaprofessionaalse mulje.

Tänaseks on see mure murtud – selles postituses õpetame sulle, kuidas “like boxi” disaini saab kohandada just selliseks nagu sul on parajasti vaja.

1 – Esialgse plugina ülesseadmine

Kõigepealt peaksid lisama tavalise Facebooki “like boxi” plugina. Sa võid kasutada allolevat näidet või vaata mida pakub Facebooki oma “Social Plugin” lehel. Kindlasti tuleks kasutada XFBML varianti, sest IFRAME puhul antud lahendus ei tööta. Meie näita kautamisel lihtsalt asenda mõne sinu loodud rakenduse ID’ga ja oma fännilehe ID’ga.

[html]

[/html]

2 – CSS’i linkimine pluginaga

Järgmisena tuleb plugina definitsiooni lisada sinu poolt tehtud CSS fail, kus hakkatakse hoidma plugina uut kujundust. Uuendatud näite leiad altpoolt. Lisaks CSS’ile muutsime ära ka kasti laiuse (300px asemel 260px) ja fännide piltide arvu (10 asemel 8). Samuti lisasime uue atribuudi – kõrguse (hetkel 200px).

[html]
[/html]

Kindlasti märkasid, et CSS’i aadressi lõppus on ‘?1′. Seda on vaja sellepärast, et Facebook kasutab CSSi puhul oma cache’i ja meie muudatused ei oleks nähtavad, kui me iga kord CSS’i faili uuendades seda numbrit ei suurenda.

3 – CSS’i kohandamine

Nüüd muudame varem loodud CSS’i faili vastavalt sellele, missugust ilmet me oma pluginale anda tahame. Esimese osa muudatustest leiad altpoolt.

[css].fan_box a:hover{
text-decoration: none;
}
.fan_box .full_widget{
height: 200px;
border: 0 !important;
background: none !important;
position: relative;
}[/css]

Real 1 kuni 3, me võtame ära linkide allajoonimse effekti. Seda sellepärast, et see hoiab ära erinevad probleemid, mis plugina linkide puhul tekkida võivad. Real 4 kuni 9 eemaldatakse plugina kastilt raami ja paneme kõrguse paika, eemaldame tagatausta ning paneme paika positsiooni atribuudi, et hiljem “like” nuppu saaks ringi liigutada.

4 – Plugina päise muutmine

[css].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;
}[/css]

Selle muudatusega me eemaldame plugina küljest tegelikult kogu päise, välja arvatud “Like” nuppu, mille me hiljem liigutame üldse allapoole. Real 1 kuni 4 eemaldatakse helesinine tagataust ja “padding“. Real 5 kuni 7 eemaldame nii profiili nime kui ka pildi. Real 8 kuni 10 eemaldame “like” nuppu “paddingu”, mida meil ei ole antud disaini juures hetkel vaja.

5 – Fännipiltide asetuse uuendamine

[css].fan_box .connections{
padding: 0 !important;
border: 0 !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666;
color: #FF6600;
}
span.total b{
color: #666;
font-weight: bold;
}
.fan_box .connections .connections_grid {
padding-top: 10px !important;
}
.fan_box .connections_grid .grid_item{
padding: 0 10px 10px 0 !important;
}
.fan_box .connections_grid .grid_item .name{
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-weight: normal;
color: #666 !important;
padding-top: 1px !important;
}[/css]

Nende uuendustega muudame plugina fondi suurusi ja stiile. Real 1-9 muudame teksti “113 people like” stiili ja värvi (antud juhul oražiks) ja real 10-13 muudame lehekülje nime värvi halliks. Ülejäänud muudatused on seotud üldise disaini muutmiseks. Neid parameetreid saad ise katsetada. TÄHELEPANU! Real 20 ära kindlasti fonti vaheta, sest see võib tekitada erinevaid joondamisega seotud probleeme.

6 – “Like” nuppu asukohta muutmine

[css].fan_box .connect_widget{
position: absolute;
bottom: 0;
right: 10px;
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;
}
.fan_box .connect_confirmation_cell {
display:none;
}
[/css]

Selle muudatusega liigutame “Like” nuppu hoopis alla paremasse nurka. See on võimalik, kuna alguses muutsime me plugina positsiooni relatiivseks ning nüüd muudame nuppu absoluutseks ja “bottom” ning “right” atribuute kasutades liigutame nupu soovitud kohta. Kui sa soovid nuppu liigutada kuhugi mujale võid samuti kasutada “top” ja/või “left” parameetreid.

Nipid

Kui sa soovid muuta veel teisi elemente, mida antud õpetuses ei kajastatud, siis soovitame kasutada Mozilla Firefox brauserit koos Firebug lisaga. Selle abil näed, millist struktuuri ja CSS’i Facebook vaikimisi kasutab ja saad katsetada erinevaid variante.

Probleemid

Kui sul tekivad õpetust kasutades mingisugused probleemid, siis palun loe õpetus uuesti läbi ning tee täpselt nii nagu siin on kirjas. Kui sa jääd ikka hätta, siis kirjelda oma probleemi kommentaaride sektsioonis ning me proovime sulle kindlasti abiks olla.

Kõiksugused sinupoolsed ideed ja ettepanekud on samuti oodatud kommentaaridena. Jõudu katsetamisel!