Sain jokin aika sitten eräältä lukijalta pyyntöä, että näyttäisin, miten blogiin saa asennettua Facebookin tykkäysboxin. Pahoittelen, että tämä postaus julkaistaan vasta nyt.

Tästä postauksesta löydät kuvaruutuohjeet, miten lisäät Facebook tykkäysboxin omaan blogiin.Näin lisäät Facebook tykkäysboxin blogiisi

HUOM! Blogialustat ovat erilaisia ja riippuen alustasta, voi olla, että joudut hieman soveltamaan näitä ohjeita. Kokeile kuitenkin näillä ja katso mitä tapahtuu.

Näin lisäät Facebook tykkäysboxin blogiisi

Aluksi kirjoita Googleen Facebook Page Plugin. Avautuvalle sivulle käy hakemassa Facebookista blogisi sivu. HUOM! Tämä ominaisuus ei toimi sinun henkilökohtaisella FB sivulla vaan FB Page toiminnolla.

Tabs” = tässä kohtaa minulla luki ”timeline” mutta halusin boxiin pelkästään tykkäykset. Vaihdoin sanaksi ”liked”.

Boxin leveyttä voit säätää ”Width” kohdassa. Tämä kannattaa käydä tarkistamassa blogista, miten leveä sivupalkki on. Laita Fb boxi hieman kapeammaksi kuin sivupalkki, jotta se asettuu nätisti kohdalleen.

Height” kohtaan voit lisätä, miten korkea boxi saa olla. Itse en lisännyt tähän mitään ylimääräistä.

Lopuksi voit päättää, mitkä neljästä laatikosta aktivoit. Kun lisäät täpän yhteen laatikkoon, odota hetki niin kuva alla vaihtuu. Tällä tavalla pääset heti näkemään, miltä boxi lopulta näyttää.

Hei! Haluatko lisätä blogisi sivupalkkiin Pinterest taulun? Kurkkaa ohjeet täältä.

 

Näin lisäät Facebook tykkäysboxin blogiisi

Kun kaikki asetukset ovat laitettu, skrollaa sivua hieman alaspäin. FB tykkäyslaatikon alapuolelle vasempaan reunaan tulee sininen ”Get the code” laatikko. Klikkaa siitä.

Olipa tylsää. Painikkeessa lukikin vain Get Code…

Näin lisäät Facebook tykkäysboxin blogiisi

Koodin hakemisen jälkeen sinulla on kaksi vaihtoehtoa, miten lisäät boxin blogiisi. Joko JavaScriptin kautta tai IFramena. Testaa, kumpi sopii blogiisi paremmin. Omassa blogissa tykkäysboxi on IFrame-kehyksenä.

Näin lisäät Facebook tykkäysboxin blogiisi

Koodin kopioimisen jälkeen on aika sijoittaa koodi siihen kohtaan, mihin haluat boxin tulevan näkyviin blogissasi.

BLOGGER

Ulkoasu –> Lisää Gadget –> HTML / JavaSkript –> Liitä sisältökohtaan ja tallenna. Tallenna asettelu ja tarkastele, onko Facebookin tykkäysboxi oikeassa kohdassa.

Voit raahata HTML / JavaSkript laatikon siihen kohtaan sivupalkkia, johon haluat sen asettuvan. Muista tallentaa asettelu joka kerta, kun teet muutoksia.

Näin lisäät Facebook tykkäysboxin blogiisi

WORDPRESS

Ulkoasu –> Mukauta –> Vimpaimet –> Valitse oikea Widget (esim. right) –> Lisää Vimpain –> Teksti –> Liitä koodi Sisältö kohtaan ja tallenna.

Näin lisäät Facebook tykkäysboxin blogiisi

Näin lisäät Facebook tykkäysboxin blogiisi

Koodin voi laittaa WordPressiin myös vähemmällä vaivalla (Ulkoasu –> Vimpaimet –> Lisää vimpain…) mutta lyhyemmällä polulla et pääse näkemään esikatselua. Joudut siis tallentamaan asettelun ja käymään katsomassa, näkyykö laatikko oikein. Ensimmäisenä oleva polku näyttää sinulle koko ajan esikatseluna, miltä tykkäysboxi näyttää ennen kuin tallennat ja julkaiset sen.

Huomioithan, että koodia ei pysty laittamaan WordPress.com blogiin. Jos haluat vaihtaa ilmaisblogin sellaiseen, jota pystyy muokkaamaan rajattomasti jopa ilmaiseksi, kurkkaa tänne.

Haluatko lisätä blogiisi myös Instagram feedin? Käy katsomassa kuvaruutuohjeet täältä.

Koitko tämän postauksen hyödylliseksi? Olen superhyper kiitollinen, kun jaat sitä eteenpäin, kiitos!