dilluns, 17 de setembre del 2007

Com posar els botons socials?

És una mica friqui això que he posat, ho sé però, no sabia com referir-me als enllaços que serveixen perquè els visitants afegeixin entrades del bloc en serveis com Menéame, Digg,...
Si us fixeu, la imatge del principi d'aquesta entrada és una captura del peu de cada una de les entrades del bloc. En primer lloc hi ha un botó que permet que voteu aquest bloc a Top Català; el segon permet que afegiu l'entrada que esteu llegint a La Tafanera -el Menéame català-; el tercer permet que afegiu l'entrada a Menéame; el quart, que l'afegiu a Digg; el cinquè, que l'afegiu a Delicious; i, el sisè, que l'afegiu a Technorati. Són botons que permeten que afegiu el bloc un l'entrada en un dels agregadors socials de continguts, i per això els anomeno botons socials al títol.

Queda veure com es fa això amb Blogger. Es tracta de modificar la plantilla del vostre bloc, afegint el codi XML necessari perquè els mostri. Per fer-ho heu d'identificar-vos a Blogger i anar a la pestanya de gestió de la plantilla del bloc, tal com es veu a la imatge de la dreta. Allí heu d'activar la cel·la que diu Expandir models de widgets. El codi font de la plantilla el teniu al quadre de text central.

Només queda anar al codi de la plantilla i cercar el lloc on es volen posar els botons. En el cas d'aquest bloc els he posat al peu de cada entrada. Per fer-ho he cercat el paràgraf marcat amb la classe post-footer-line post-footer-line-3. Podeu cercar dins del text i el trobareu. Aquest paràgraf està buit i és un dels lloc millors on afegir codi propi. En el cas del meu bloc el seu contingut és el seqüent:



<p class="post-footer-line post-footer-line-3">
<a href="http://www.topcatala.com/index.php?a=in&u=manelzaera" target="_blank"><img alt="Votam al TOP CATALÀ!" src="http://www.topcatala.com/topcatala2.gif" border="0" /></a>
<a href="http://www.blogger.com/%22http://www.latafanera.net/submit.php?url=%22+data:post.url" target="_blank">
<img alt="La Tafanera" src="http://lh4.google.com/manelzaera/Ru6Hc3RSGMI/AAAAAAAAAO0/SD7zsW18RPA/s144/latafanera.jpg" /></a>
<a href="http://www.blogger.com/%22http://meneame.net/submit.php?url=%22+data:post.url" target="_blank">
<img alt="Meneame" src="http://lh6.google.com/manelzaera/Ru6FSXRSGLI/AAAAAAAAAOs/wVd47EUXb6U/s144/meneame.gif" /></a>
<a href="http://www.blogger.com/%22http://digg.com/submit?phase=3&url=%22+data:post.url" target="_blank">
<img alt="DiggIt!" src="http://digg.com/img/badges/91x17-digg-button.gif" /></a>
<a href="http://www.blogger.com/%22http://del.icio.us/post?title=&url=%22+data:post.url" target="_blank">
<img alt="Delicious" src="http://lh5.google.com/manelzaera/Ru6FSHRSGJI/AAAAAAAAAOc/8DWfQtVUHso/s144/delicious.gif" /></a>
<a href="http://www.blogger.com/%22http://www.technorati.com/search/%22+data:post.url" target="_blank">
<img alt="Technorati" src="http://lh5.google.com/manelzaera/Ru6FSHRSGKI/AAAAAAAAAOk/phaT1aUEZCU/s144/technorati.gif" /></a>
</p>


Com veieu, es tracta d'un conjunt d'enllaços que duen al servei social en qüestió, passant-li la informació del lloc que es vol referenciar. En el cas del Top Català només es passa el nom d'usuari. En el cas de la resta de serveis es passa l'enllaça a l'entrada. En el cas de Blogger això ve indicat per data:post.url. Un cop es processi l'entrada, Blogger interpreta això i ho subtitueix per l'adreça de l'entrada escrita.

Finalment, només comentar-vos que heu de tenir en compte que els paràmetres de les adreces, quan n'hi ha més d'un, en el cas d'HTML se separen amb el caràcter &. Però, la plantilla no està expressada en HTML sinó en un llenguatge XML, amb la qual cosa hi ha certes regles que cal complir. Una fa referència a caràcters especials, els quals cal substituir. En el cas del caràcter & cal substituir-lo per & amp; (sense l'espai aband s'amp). Si no ho feu segurament us apareixerà un error en desar o fer una vista prèvia de la plantilla.

1 comentari:

Gustau Moreno ha dit...

Moltes gràcies per aquesta entrada, Manel.
M'ha estat molt útil ;-)