tiistai 17. joulukuuta 2013

Bloggerin esikatselukuvat kuntoon Facebookissa

Mikäli postailet Blogger-postauksia ahkerasti esimerkiksi Facebookkiin, olet saattanut huomata että postauksen kuvia ei saa enää esikatselukuviksi. Asiaan on onneksi korjaus.

Joudut muokkaamaan blogisi koodia, mutta ei hätää, sinun ei tarvitse olla olla mestarikoodari sitä varten. Tarvitset myös vähintään 200 x 200 pikselin kokoisen kuvan blogisi yleisesikatselukuvaksi. Kuva pitää saada tallennettua jonnekin julkisesti nettiin mutta esimerkiksi Dropbox tai Picasa käy kunhan saat kuvan suoran osoitteen kopioitua.

Päästäksesi muokkaamaan blogisi koodia, avaa blogisi hallinta, valitse sivupalkista Malli ja sitten Muokkaa html-koodia -nappulan pitäisikin olla jo näkyvillä.


Sen jälkeen etsi koodista <html -teksti, sen jälkeen on muutama riviä koodia kunnes > -merkki sulkee osan. Sijoita teksti xmlns:og='http://ogp.me/ns#' ennen sulkevaa merkkiä. 

Etsi seuraavaksi </head> -teksti ja sijoita seuraava koodi sitä ennen:


<!-- Begin Open Graph metadata --> 
<meta expr:content='&quot;fi_FI&quot;' property='og:locale'/> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
</b:if> 
<meta expr:content='data:blog.title' property='og:site_name'/> 
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='tähän-tulee-linkki-yleisesikatselukuvaasi' property='og:image'/>
</b:if> 
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<!-- Still looking for a way to use the post snippet if there's no description -->
</b:if>
<!-- End Open Graph metadata -->

Korvaa punainen teksti linkillä yleisesikatselukuvaasi. Mikäli kirjoitat englanniksi, voit vaihtaa fi_FI:n tilalle esimerkiksi en_EN.

Mikäli kaikki meni nappiin, blogistasi löytyy nyt toimivat OpenGraph -protokollan mukaiset esikatselukuvat niitä tukeville palveluille.

Jos kaikki ei kuitenkaan toimi niin kuin pitäisi, tarjoaa Facebook avuksi Debugger-työkalun. Tosin ainakin itselläni (ja netin mukaan myös muilla) Debugger bugaa sen verran että se aina ensimmäisellä kerralla ilmoittaa että esikatselukuva on liian pieni. Uusi debuggaus ja homma toimii.

Ja mikäli sössit kunnolla, saa koodin onneksi palautettua alkuperäiseen tilaansa napin painalluksella.

edit: Facebookkiin linkkaaminen saattaa silti aiheuttaa ongelmia. Äskettäin testaamani postaukset eivät enää toimi oikein eikä Debuggerin näpyttelykään auta. Enkä ole ainoa joka kärsii ongelmista, toisaalta, koskapa Facebookin kanssa elo olisikaan ollut turhan kivutonta.

Ei kommentteja:

Lähetä kommentti

Jätä toki kommentti tai kysymys.