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) =)