Kaip prie nuorodos įterpti favicon

Favicons
Iliustracija paimta iš MpP Favicon Gallery

Rusų liaudės patarlė byloja „Neturėk 100 rublių, bet turėk 100 draugų!“ Prie ko čia ši patarlė ir nuorodos su favicon?

Ogi vieną vakarą sumąsčiau, kad būtų smagu (gražu) tinklaraštyje prie kiekvienos nuorodos įterpti favicon tinklalapio ar tinklaraščio į kurį ji veda. Sumąstyti yra viena, o įgyvendinti – kas kita. Paieškojęs radau kelis WordPress įskiepius, bet jie veikė ne taip, kaip aš norėjau. Dažniausiai favicons reikėjo nusistatyti pačiam, o kiekvienai svetainei, į kurią dedi nuorodą, po favicon juk nenustatysi. Na taip, tai įmanoma, bet manau greit atsibostų, nes tai užima daug laiko.

Parašiau į Lietuvos blogerių kanalą skype, o ten atsiliepė Aidas. Jis pasakė, kad su JavaScipt tai turėtų būt gan nesudėtinga. Po kelių minučių jis man jau atsiuntė pirmą kodo versiją. Žinoma aš nebūčiau aš, jei nebūčiau užsiprašęs dar kelių kodo papildymų, kol galiausiai viskas veikė taip, kaip norėjau.

Dabar dalinuosi šiuo kodu su jumis. Jį įdiegti gan paprasta. Pirma, nueikite į šį paste.lt puslapį ir iš textarea (langelio be numeracijos) nusikopijuokite kodą. Tada kodą įterpkite savo tinklalapio ar tinklaraščio šablone prieš </head>. Jei kodą dedate į WordPress šabloną, </head> greičiausiai rasite header.php byloje.

Toliau kodą reikės šiek tiek pakoreguoti, ketvirtoje eilutėje pakeičiant .itemtext į DIV’ą, kuriame jūsų šablone yra talpinami įrašai. Mano tinklaraštyje tas DIV’as naudoja klasę, todėl pavadinimas prasideda tašku. Jei jūsų šablone DIV’as naudoja ID, pavadinimas prasidės grotelėmis (#).

Štai ir viskas! Paprasta :)

Tiesa, šis sprendimas turi kelis trūkumus:
1. favicons nekešuojamos, tad kaskart atvertus ar perkrovus puslapį, jos užkraunamos iš naujo;
2. dabar populiaru į favicon.ico failą įdėti kelias ikonos versijas (16×16, 32×32, ir t.t.) – tokiu atveju kai kurios naršyklės rodys ne 16×16 ikoną, o dalį didesnės ikonos.

Taip pat verta žinoti, kad:
1. galite parsisiųsti jquery-latest.min.js ir įsidėti failą pas save serveryje, kad jis būtų užkraunamas greičiau;
2. skriptas nerodo favicon nuorodose į savo paties puslapį;
3. jei puslapis, į kurį veda nuoroda, neturi favicon, tarpas po nuorodos paliekamas nebus;
4. jei norite nerodyti kokios nors favicon, tiesiog pridėkite nuorodai klasę noicon (pvz.: <a href=”#” class=”noicon”>)

Jei nepavyksta įdiegti šio kodo pas save, ar turite kitų klausimų – klauskite, padėsiu kiek galėsiu.



Gal sudomins?

35 Comments

  1. Oni rašo:

    Aš čia gal truputį ne į temą, bet kas per Lietuvos blogerių kanalas Skype? : )

  2. u- rašo:

    Favicon’as tekste truputį praretins eilutes.

    Tai nepridės patogumo skaitant (bent jau man tai nepatinka), o taip pat ir truputį gadins tekstą vizualiai (praretintos eilutės primena naują pastraipą…).

  3. Taip pat verta pastebėti, kad faviconas ir kitokiu failo pavadinimu gali būti išsaugotas. Tokiu atveju, jis turėtų būti nurodytas svetainės (į kurią veda nuoroda) bloke, bet tada jo išknisimas pasudėtingėja, tačiau visdar įmanomas.

  4. Ir dar: jQuery galima įsidėti ne tik į savo serverį, bet ir imti iš google:

    http://code.google.com/apis/ajaxlibs/documentation/#jquery

    Tokiu atveju galbūt visai nereikėtų krauti jQuery failo, nes jį jau naršyklė būtų anksčiau galbūt išsisaugojusi besilankant kitose svetainėse, kurios irgi jQuery ima iš google.

  5. Karolis Pocius rašo:

    @ Oni »

    Per blogin Def.lt padarė pokalbių kanalą, į kurį sukvietė visus dalyvius, o po to taip ir liko: http://def.lt/vieta-bendravimu/

    @ Tomas Markauskas »

    Dėl to kitokio pavadinimo tai taip — nelabai ką ir pakeisi. O jQery tame kode pagal nutylėjimą ir imamas tiesiai iš Google :)

  6. Man kažko tai neveikia nei su tašku, nei grotelėmis..

  7. fosron rašo:

    Geras kodas, bet manau jam reikia šiek tiek patobulinimų.Kyla problema su formatais, dabar favicon būna ne tik ico bet ir png formate, tad kraunant tik ico kaikurie favicon gali neatsirasti. Tai galima išspresti su PHP (O gal ir su JS, nežinau), ištaukiant meta tag su favicon iš puslapio į kurį veda nuoroda. :) Taip pat panaudojus PHP galima sutvarkyti ir problemą su ikonų dydžiais, ir kešavimu :) Manau padirbėjus galima pagaminti neblogą priedą tinklaraščiams, kurį ir pats tikrai naudočiau :)

  8. @Ramas: groteles turi galvoj ten kur “href=” ? Ten turi būt tinklapio adresas, į kurį veda nuoroda, o grotelės tik šiaip kaip placeholderis įrašytas…

  9. Karolis Pocius rašo:

    @ Tomas Markauskas »

    Tu teisus — mano akelės kreivai rodo :)

    O su Ramu atrodo jau išsiaiškinom…

  10. Karolis Pocius rašo:

    @ fosron »

    Jei žinai kas užsiimtų tokio plugin gamyba arba pats galėtum pagamint — būtų smagu. Aš tai ne programeris :)

  11. fosron rašo:

    Na galiu bandyti ką nors susukti, dabar kaip tik knaisiuojuos po google, jei viskas ok, pranešiu :)

  12. Karolis Pocius rašo:

    Jei ką susuktum, mielai pabūčiau beta testeriu :)

  13. ichmbch rašo:

    Teoriškai neva turėtų būti galima ir be PHP, t.y., kiekvieną psl įkrauti į atskirą paslėptą iframe’ą, o tuomet iš iframe’o ištraukti favicon’os URL.

  14. fosron rašo:

    Bet pagalvok koks būtų apkrovimas vartotojui? :) Jau pagaminau kaiką, bet tik labai ankstyva beta versija…

  15. ichmbch rašo:

    nebūtinai. Į iframe’ą užtenka įkrauti tik patį html. Be to Javascript’as lengvai gali krauti ikonas ir jau pasikrovus puslapiui, taip stabdymo vartotojas kaip ir nepastebės. O konkrečiai PHP sprendimas gali stabdyti pačio puslapio užsikrovimą, nes besikraunant puslapiui reiks prisijungt prie prie visų kitų puslapių, kad sužinot favicon URL.

  16. O kaip įkrauti į iframe tik html?

  17. ichmbch rašo:

    taip dar pamislijau, kad galima sukurti php failą, kuriam GET metodu paduodam nuorodos URL, o jis grąžina patį paveiksliuką. Tuomet panaudotume praktiškai tą patį JavaScript kodą kuris čia Karolio nurodytas ir būtų liux :)

  18. fosron rašo:

    ichmbch – Tam yra kešavimas, ir šiaip, pagalvok, jeigu yra 30 nuorodų, kurios veda į ~20kb puslapius, kiek užtruktų užkrovimas o poto ir parse’inimas naršyklėje? :) O šiaip galima daryti taip: Rašant įrašą į duomenų bazę, PHP pagalba “prasukti” nuorodas, ir prie jų iškart pridėti ikonas. Taip sutaupytum puslapio krovimo laiką naršyklėje, aišku serveriui tektų apkrova, bet ko gi nepadarysi dėl skaitytojų :)

  19. fosron rašo:

    ichmbch – Jau panašiai esu padaręs, tik dabar gražina tik url :)

  20. ichmbch rašo:

    Tomas Markauskas:

    aš taip įsivaizduoju krauni iframe, paiimi ko iš jo reikia ir iškart sunaikini ;) Nieko jis nespės daugiau įkraut. :)

  21. fosron rašo:

    O kam tada iframe? Ajax tam yra :)

  22. Su ajax gali tik į savo puslapį kreiptis. T.y. į tą patį domeną.

  23. Karolis Pocius rašo:

    Oho kokia programerių diskusija užvirė :) Lieka tikėtis, kad iš jos kažkas produktyvaus gims…

  24. ichmbch rašo:

    Žinai dėl tų domenų dabar pamislijau (buvau pamiršęs), kad ir su iframe’ais gali gautis tas pats š (nors reik žiūrėt, gal yra kokie atskiri niuansai). Ne per seniausiai ši bei tą programavau, tai pastebėjau, kad į svetimo domeno iframe’ą per JavaScript nepavyko įsibraut. Čia matyt nuo kada nors bus tas reikalas saugumo sumetimais užspaustas, nes senovėje pamenu viskas veikė OK.

    Matai, Karoli, čia vienas žmogus dirba, o aš čia iš tų žioplių, kuris stebi ir pliurpia kurioj vietoj vinį geriau kalt :D

  25. Tiesa, ztkp.lt, tai netoks faviconas…ten rodo private.lt…

  26. Žmogau, turintis ką pasakyti:

    kai kolegos baigs programuot, turėtų probema išsispręst :)

  27. Karolis Pocius rašo:

    Vienas programeris ir daug aiškintojų :D

  28. ties trečiu komentaru jau pradėjau nieko nesuprasti. Kai nesveikai.

  29. Karolis Pocius rašo:

    Nematau ko čia pykt — padarei visiems didelę paslaugą.

  30. Armandas rašo:

    Karoli. patarčiau dėti tą skriptą puslapio pabaigoje, nes kol vykdomas javascript, joks kitas turinys nekraunmas ir susidaro lėtumo lėto tinklalapio vaizdas ;)

  31. Karolis Pocius rašo:

    @ u- »

    Na, bent jau tas skriptas, kurį dabar naudoju, nieko nepraretina. Matysim kaip fosron parašytas skriptukas veikia.

    @ Armandas »

    Dėkui, taip ir reiks padaryt…

  32. [...] įrašu liepą tapo instrukcija kaip prie nuorodos įterpti favicon [07]. Tai tik dar kartą įrodo, kad norėdami pritraukti lankytojų, kurie vėliau potencialiai [...]

  33. [...] ar daug yra naudojančių mano sugalvotą, Aido parašytą, fosron patobulintą būdą įrašuose prie nuorodų įterpti favicon, bet [...]

Leave a Reply