keskiviikko 26. syyskuuta 2012

Facebook -kuvakkeen lisäysohje


1. Kirjaudu Bloggeriin
2. Klikkaa vasemmalta "Ulkoasu"
3. Klikkaa laatikkoa "Lisää gadget"
4. Etsi sellainen gadget, jossa lukee otsikko "HTML/JavaScript"
5. Jätä otsikkokenttä tyhjäksi ellet halua laittaa siihen jotain tekstiä esim. "XXXXX Facebookissa" tjs.
6. Kopioi Sisältö -kenttään koodi, jonka muokkaamisen esittelen alempana
(7. Raahaa gadgetti haluaamaasi paikkaan sivustolla)
8. Tallenna

KOODIN MUOKKAAMINEN (tässä ei esitellä kaikkea seikkaperäisesti vaan ainoastaan niiltä osin kuin yleensä tarvetta)

KOODI JOTA LÄHDETÄÄN MUOKKAAMAAN
<a href="FACEBOOK-SIVUN OSOITE" target="_blank" title="JOKIN TEKSTI, ESIM. BlogiHelppi Facebookissa"><img border="0" alt="" width="32" height="32" src="KUVAN OSOITE" /></a>

VAIHEET:
1. href="" => hipsujen sisään laitetaan sen sivuston nimi, jonne sydäntä klikkaamalla pääsee esim. Facebook-sivun nimi
2. target="_blank" => tarkoittaa sitä, että sivusto aukeaa omaan välilehteen kun sydäntä klikkaa. Itse tykkään käyttää tätä vaihtoehtoa. Tämän voi poistaa, jos sivu saa aueta samaan välilehteen.
3. title="" => hipsujen sisään laitetaan se teksti, joka näkyy vihjetekstissä/tooltipissä kun kuljetat hiiren kuvakkeen päälle. Tämän voi poistaa jos ei halua mitään tekstiä
4. border (reunus) kannattaa yleensä antaa olla nollana
5. alt="" vaihtoehtoinen teksti, joka näkyy, jos esim. kuvaa ei saada ladattua kuvapalvelusta. Itse en käytä yleensä, koska lataan kuvat omaan kuvapalveluun. Joskus, jos linkattu vieraalle sivulle ja kuva esim. poistetaan sieltä => se ei enää näy sinunkaan sivulla.
6. width="32" height="32" => näillä määritellään kuvan koko "leveys ja korkeus, pikseliä". Yleensä suositellaan, että kuvan koko kannattaa kertoa tässä koodissa JA kuva pitäisi olla vieläpä oikeastikin samaa kokoa kuin nuo luvut on (ts. jos kuva on oikeasti 32*32, pitää siitä huolimatta mainita tuo width="32" height="32" koska se parantaa sivun suorituskykyä). Kokeilemalla löytää yleensä oikean koon, laittamalla hipsuihin pienempiä/suurempia arvoja. Nyrkkisääntö, että vain pienentäminen kannattaa, koska kuvan laatu heikkenee suurennettaessa.
7. src="" hipsujen sisään tulee se osoite, josta kuva ladataan. Yleensä kannattaa kuvat ladata esim. Picasa-palveluun, mutta tässä voi käyttää esim. mistä tahansa netistä löytyvää kuvaa. Sitä voi sitten tuolla kokoasetuksella säätää sopivaksi. (HUOM! Hyvien tapojen vastaista, ks. eteenpäin)

Facebook-kuvakkeita voi tehdä myös itse, mutta netti on pullollaan myös ilmaisia kuvakkeita. Yleensä toivotaan linkkausta tuonne sivustoon, josta kuva ladataan. Kuvakkeita voi kokeilla hakea esim. hakusanoilla "free facebook icon" tjs ja kannattaa hakea kuvakkeita tai pienempiä kuvia kuin 256*256 (yleensä riittää valtaosalle käyttäjistä), jotta niiden lataamiseen ei mene niin kauaa aikaa (suorituskyky heikkenee sivulla) eikä mitään "vippaskonstipienentämisiä" tarvitse ruveta tekemään. Kun haluamasi kuva löytyy, niin hiiren oikealla valitaan vaihtoehto "Kopioi kuvan URL-osoite" (eri selaimissa eri tekstejä!) => osoite vaan src-hipsujen sisään ja laittelee koon oikeaksi. Huomioi, että kuva pitää aina aukaista eikä kopioida osoitetta googlen kuvahaun tuloksista!

MINUN SIVULLENI LISÄÄMÄ KOODI ON TÄSSÄ:


<a href="http://blogihelppi.blogspot.fi/p/blogihelppi-ei-ole-viela-facebookissa.html" target="_blank" title="BlogiHelppi ei ole vielä Facebookissa"><img border="0" alt="" width="64" height="64" src="http://www.veteran.uci.edu/images/facebookicon.png" /></a>


 (BlogiHelppihän ei ole siis vielä Facebookissa) =)

35 kommenttia:

  1. hei mite saan sen esim sen otsikon sillee et kun viie hiiren päälle nii se väri vaihtuu ?

    VastaaPoista
  2. Hei Noora, tuo vaatii hiukan työtä ja CSS:n käyttöä. En ole itse koskaan tehnyt, mutta esim. täältä näkee hiukan, että millainen työ tuossa on: http://www.blogohblog.com/pure-css-tooltips/

    Lisää sivuja löytyy esim googlettamalla "change background color tooltip css" tjs. Muitakin tapoja varmaan on => katsotaan innostunko joskus kokeilemaan ja tekemään postauksen asiasta.

    VastaaPoista
  3. Miten saan kuvat haaleammaksi ja kun laittaa hiiren kuvan päälle niin kuva palautuu värillisemmäksi? :)

    VastaaPoista
    Vastaukset
    1. Hei, Niina, sorry en ollut huomannut viestiäsi. En valitettavasti osaa auttaa tuossa asiassa kun en ole koskaan moista kikkaillut. Pitää joskus tutustua aiheeseen ja kirjoittaa juttua, joten kiitos vinkistä! Toivottavasti löydät apua jostakin.

      Poista
  4. Miten hiiren saa esim. (siis silloku hiirtä liikuttaa ni siin on tähtiä) sellakseks mis on tähtii pitää vissii olla joku koodi ? mistä niitä saa ? (:

    VastaaPoista
    Vastaukset
    1. Essi, katotaan innostuisinko joskus tekemään ohjetta ko asiasta...

      Poista
  5. Osaisitko neuvoa, miten sais tekstin otsikon sellaseks vaikka mustaks palkiksi, missä lukee valkosella otsikko?:)

    VastaaPoista
    Vastaukset
    1. tiiia, ulkoasun muokkauksen kautta eli taustaväri mustaksi ja lisäasetusten kautta valitset valkean fontin.

      Poista
  6. Voisitko auttaa mua yhdessä ongelmassa. Toivon että vastaat pian! Eli...Aina kun aloitan postaamisen, ja yritän lisätä kuvia, niin sitten kun olen valinnut jo tarvittavat tiedostot esiin tulee palkki jossa lukee "Hups! Tallennustila loppui. 100 prosenttia 1 gigatavun suuruisesta valokuvien tallennuskiintiöstä on tällä hetkellä käytössä" Tarvitsen kipeästi apua ongelmani kanssa ja toivon myös saavani sitä :c

    VastaaPoista
    Vastaukset
    1. Moikka ~Zuki ja kiitos kysymyksestä! Tuo ilmoitus johtuu siitä, että sinun "kuvapankki" on täynnä ja sinun täytyisi ostaa lisää tilaa tai pienentää kaikki kuvasi. Nuo kuvathan on Bloggerissa yleensä tallennettuna PicasaWebiin ja sinä olet tallentanut ne täysikokoisena ja tavallaan "ohjelmallisesti" pienentänyt ne.

      Esimerkiksi blogissasi on kuva, joka löytyy osoitteesta:
      http://3.bp.blogspot.com/-7xRECB7noe0/UJTy-Y8c5nI/AAAAAAAADpo/4PrRR-9ZDy8/s640/Y%C3%B6koulu+019.JPG

      ==> tämä on pakotettu ohjelmallisesti kokoon 640*480 eli Blogger on pienentänyt sen puolestasi. Kuva on kuitenkin tallennettu PicasaWebiin oikean kokoisena eli se vie tilaa tuosta 1GB:stä yli 3 megatavua. Sen oikea koko näyttää olevan 2048*1536 pikseliä.

      Tuo pienennys on hirveän yksinkertainen toimenpide ja alkuperäisen kuvan näkee kun muuttaa tuota osoitetta hiukkasen eli laittaa sen muotoon:
      http://3.bp.blogspot.com/-7xRECB7noe0/UJTy-Y8c5nI/AAAAAAAADpo/4PrRR-9ZDy8/s2400/Y%C3%B6koulu+019.JPG

      Kokeilepa myös osoitetta:
      http://3.bp.blogspot.com/-7xRECB7noe0/UJTy-Y8c5nI/AAAAAAAADpo/4PrRR-9ZDy8/s120/Y%C3%B6koulu+019.JPG niin näet miten se saadaan vielä pienemmäksi. Lisäksi tuon "koodin" avulla kuvan mittasuhteita voi muuttaa eli esim. http://3.bp.blogspot.com/-7xRECB7noe0/UJTy-Y8c5nI/AAAAAAAADpo/4PrRR-9ZDy8/s640-c/Y%C3%B6koulu+019.JPG

      Vertailun vuoksi, että 1GB = ~1000 megatavua ja noita reilun kolmen megan kuvia menee siihen määrään ~300 kpl.

      Mitä nyt pitää tehdä?
      1) ostaa lisää tilaa. Se maksaa 2.49 dollaria / kk ja sillä irtoaa 25 GB TAI
      2) pienentää kaikki kuvat kuvankäsittelyohjelmalla esim. kokoon 640*480 ja ladata ne uudestaan blogiin (suositeltavin vaihtoehto)

      Aikaisemmin kuvat sai muokattua suoraan WebPicasan mainostyökalun avulla, mutta se ei nykyään ole käytössä tai se ei ainakaan käynnisty. Muistelen, että Google ilmoitti palvelun loppumisesta vaikka linkki siihen löytyykin vielä.

      Ja mistä kuvat löytyy?
      1) kirjaudu google-tilillesi
      2) mene osoitteeseen https://picasaweb.google.com/home
      3) sieltä ne pitäisi löytyä, jos et ole tehnyt mitään erityisjärjestelyjä kuvien varastoinnin suhteen =)

      Kerroppa auttoiko tämä ja jos ei niin kysy toki lisää!

      Br Blogihelppi

      Poista
    2. Okei...No kiitti paljon avusta, toivon että saan kuvat nyt ladattua c: Eli siis pitäiskö mun nuo kaikki kuvat pienentää? Niitä on yli 300, niin kävishän se aika työlääksi...Voisko niitä esim. poistaa tai jotain vastaavaa?

      Poista
    3. Voit toki poistaakin ne, mutta sitten ne poistuvat myös blogistasi... =) Mitä enemmän pienennät, sitä enemmän tilaa vapautuu..

      Poista
    4. Okei...Mua ei haittais ollenkaan jos ne kuvat poistuis mun blogista, mut miten ne voi poistaa sieltä Picasastakin?

      Poista
    5. Picasassa saa kätevästi pienennettyä vaikka kuinka monta kuvaa kertaheitolla merkitsemällä halutut kuvat ja sen jälkeen klikkaamalla alhaalla olevaa VIE-sanaa, jolloin avautuu uusi ohjenäkymä. Sieltä valitaan sopiva tiedosto pienennettäville kuville. Samalla kannattaa ruksata, että ohjelma nimeää kuvat uudelleen (numeroi), jolloin et menetä alkuperäisiä kuvia. Hyvä pienennyssuhde on esim. pitkälle sivulle 640 pixeliä.
      Itse pienensin 1300 kuvaa ja vaihdoin ne omassa blogissani olevien isojen kuvien tilalle. Kova homma, mutta kannatti. Jokunen kuva jäi kadoksiin, mutta ei haitannut. Kuvien vaihdon jälkeen on muistettava käydä poistamassa isot kuvat PicasaWebistä, kuten BlogiHelppi neuvoi. Muuten ei tallennustila pienene.

      Poista
    6. Kiitos Between hyvästä tarkennuksesta! Itsekin oppii tässä samalla sillä en ollut tuollaista aiemmin kokeillut. =)

      Kuvien pienentäminen tosiaan kannattaa sillä se parantaa myös blogin suorituskykyä eli sivu avautuu nopeammin. Se onkin hauskaa "virittelyä" kun alkaa optimoimaan sivuston nopeutta. =)

      Poista
  7. Hei, PicasaWebiin vaan sisään ja valitset albumin, jossa kuvat on => sitten vaan valitset kuvan kerrallaan ja ylävalikosta Toimenpiteet->Poista kuva.

    Sellaisen albumin joka on jaettu/käytössä poistaminen kerralla ei valitettavasti onnistu. Sen huomaa siitä, että valitsee albumin ja ylävalikosta Toimenpiteet->Poista albumi on harmaaa (disabloitu).

    Albumin poisto onnistuu koneeseen asennettavan Picasa-sovelluksen avulla, mutta se on toinen ja liian pitkä tarina ... =)

    VastaaPoista
  8. Moi,en pysty muokkaamaan mun tekstin otsikon väriä...? Malli on toi simple/yksinkertainen. Kiitos jos autat:)

    VastaaPoista
    Vastaukset
    1. Kirjaudu Bloggeriin => Malli => Mukauta => Lisäasetukset => Muokkaa CSS

      Kopioi ruutuun seuraava:

      .post-title a
      {
      color:#000000;
      }

      .post-title
      {
      color:#000000;
      }


      Vaihtamalla risuaita+6 merkkiä koodiin, jonka löydät täältä:
      http://w3schools.com/cssref/css_colors.asp

      ..saat vaihdettua sellaisen värin kuin haluat. Huomaa että väri vaihtuu kun kokeilet eri koodeilla eli voit testata tässä sopivaa väriä.

      Auttoiko?

      Poista
  9. Kiitokset blogistasi. Löysin täältä apua, kun bloggeri ei suostunut enää lisäämään kuvia blogiin koneelta. Odottelen ensin, jos haitta poistuisi ja sitten vasta ryhdyn toimimaan verrkoalbumin kautta. Täältä löytyi tietoa vaikka mistä. Mukavaa alkanutta uutta vuotta!

    VastaaPoista
    Vastaukset
    1. Kiitos Virpi kommentista. Mukava kuulla, että täältä löytyi apua...

      Poista
  10. moikka,, yks ongelma mun blogin kanssa. Miten sais tekstin alkamaan ja loppumaan siitä mistä kuva alkaa ja loppuu. Huonosti selitetty, mutta tällaiseksi haluaisin tekstin kuin tässä blogissa http://kaisa-asiam.blogspot.fi/ eikä niinkuin tässä blogissa http://jossuuun.blogspot.fi/.. Kiitoss kauheesti jos jaksat auttaa:)

    VastaaPoista
    Vastaukset
    1. Hei Ellu,
      tuossa esimerkkiblogissa kirjoittaja on käyttänyt (lähes) koko ajan samanlevyisiä kuvia ja hän on säätänyt "kirjoitusalustan" samanlevyiseksi. Voit esimerkiksi tehdä valinnan, että käytät koko ajan 640 px leveitä kuvia ja laitat tuon alustan samanlevyiseksi.

      Mikäli et ole tehnyt mitään erikoisempia säätöjä blogisi ulkoasuun (käytännössä olet siis ottanut jonkun valmiin Bloggerin blogipohjan), niin alustan säätö tapahtuu seuraavasti: malli => mukauta => säädä leveyksiä. En ehtinyt testaamaan, että täytyykö tuo alusta olla täsmälleen saman levyinen => voi nimittäin olla, että se täytyy olla pikkasen isompi, mutta kokeilemalla se selviää.

      Kerroppa auttoiko, kiitos!

      Poista
  11. Moikka !

    Osaatko yhtään auttaa, että miten saisin blogissani esim. blogiarkiston, tunnisteet ym jollakin muulla värillä, kuin tuolla nykyisellä sinisellä? Ennen sain sen muokattua mallin muokkaustyökalulla, mutta nyt en? :o Laitan blogini vielä tähän alas jos sitä katsomalla ymmärrät paremmin (:

    www.sannaaas.blogspot.com

    VastaaPoista
  12. moikka, tää blogi on tosi hyvä:) tietkö miten saa niinkun kuvat tosi lähelle toisiaan blogissa?:D kiitos jos osaat auttaa! :)

    VastaaPoista
  13. Olis kiva jos pystyis kopsaan tuon koodin mutta ei voi ko on kielto :/

    VastaaPoista
    Vastaukset
    1. Voit vetää sen sinne palkkiin. Eli ''mustaat'' sen ja otat hiirellä siitä kiinni ja vedät sen sinne minne haluat.

      Poista
  14. Moi! Mulla ois kysymys, mikä ei kylläkään liity tähän postaukseen mutta:
    Mulla on jonnekkin ihmeeseen kadonnut kommenttiboxi? Miten sen saa takaisin? Tai mulla se ei ainakaan näy, näkyykö sulla? :O kiitos jos auttaisit (:

    http://at-this-frequency.blogspot.fi/

    VastaaPoista
  15. Tämä oli hyödyllinen. Kiitos!

    VastaaPoista
  16. Moi! Miten blogin kuvista saa reunukset pois. Oon kokeillut vaikka mitä, mut ei auta. Kiitti jos jaksat auttaa :)

    VastaaPoista
  17. Heipudei, minulla olis pikku kysymys, johon olis kiva saada vastaus.

    Haluaisin saada tumblr- logon blogiini. Kuitenkin niin, että siitä ei olisi sitä tavallista T:tä; T:n tausta olisi erilainen/se olisi liitetty jonkun toisen kuvan päälle.
    Osaisitko vastata miten tälläinen tehdään?

    VastaaPoista
  18. Jos voisit auttaa viel sellasessa ku on toi ''liity tähän sivustoon'' -painike, nii miten sen tekstin pystyis muokkaamaan, eli niinku ''liity tähän sivustoon'' -painikkeen tekstin sais sellaseks ku haluaa? :D

    VastaaPoista
  19. Miten saa "sivut" takaisin? :) Oon yrittänyt monella tapaa lisätä niitä mutta siinä lukee " Lisätty aiemmin" ???? :OO HELP

    VastaaPoista
  20. Miten saan lisättyä lukijat jutun koska valittaa vaan aina ja aina että Korjaa lomakkeen virheet. Apua??:((

    VastaaPoista