Inserir botó de compartir en Ghost

El theme principal de Ghost (Casper), així com la configuració dels posts, només tenen per defecte la funcionalitat de compartir articles en Facebook i Twitter.

Es queden moltes xarxes socials un poc de costat, com poden ser Linkedin, Pinterest i Instagram entre altres.

Afegir un botó nou no és molt complicat, encara que potser necessites prendre algunes dades del botó de compartir de Facebook o Twitter per defecte, ja que el desenvolupament perquè a més prenga dades personalitzades pot ser més complex.

Així doncs, us mostraré com afegir botons de compartir en el theme Casper de Ghost.

Inserint un botó nou

El primer que necessitarem és el logo en format .svg d’una grandària d’uns 16 píxels. Si no trobes el logo en este format, hi ha aplicacions web que t’ajudaran a convertir la imatge en este tipus de fitxer.

Una vegada creat, haurem de guardar-lo en /partials/icons/ i haurem de canviar el nom del fitxer pel nom de la xarxa social seguit de .hbs. Per exemple, per a Linkedin quedaria linkedin.hbs dins de la carpeta icons.

Després d’això, haurem d’accedir al fitxer floating-header.hbs, i des d’ací veurem una cosa com esta. El codi seleccionat és el que he afegit jo per a tindre el botó de compartir de Linkedin.

Cadascun dels enllaços mostrats fa referència a un botó de compartir. Precisament l’últim, el de Linkedin, és un duplicat del codi de Facebook però amb alguns canvis lleugers.

La url la vaig canviar per l’enllaç de compartir de Linkedin:

https://www.linkedin.com/sharing/share-offsite/?url={{url absolute=»true»}}

La classe també la vaig modificar per floating-header-share-ln, ja que després haurem d’afegir els estils en el fitxer .css que es troba dins de /assests/built/screen.css. Si seguiu el mateix disseny, us quedarà una cosa així:

Finalment, haureu d’inserir la icona que abans vau guardar en la carpeta /icons/. Just on posa {{> «icons/facebook»}} en el codi duplicat (compte, no modifiqueu el de Facebook), canviem facebook pel nom de la nostra xarxa social afegida; segons l’exemple sobre el qual estem treballant, quedaria com {{> «icons/linkedin»}}