dimarts, 20 de novembre de 2007

Com posar a Blogger els enllaços a la Tafanera o a Menéame

Fa un parell de dies vaig rebre aquest mail al correu del bloc (si si, aquest que comença per "laveudet" i acaba amb "gmail.com" i que està disponible a la part dreta):

Hola!

Avui he descobert el teu bloc i m'he fixat que a sota de cada entrada, ofereixes al lector l'opció d'afegir la notícia a menéame, a la tafanera, etc. M'agradaria posar-ho al meu bloc (http://empremtes.blogspot.com), però no sé com es fa. És molt complicat?

Gràcies!
No és el primer cop que m'ho pregunten, així que he decidit publicar una petita explicació que vaig enviar a les felines amigues de Cat People fa uns mesos. Ho vaig extreure d'algun altre bloc però no me'n recordo de la direcció. Si l'autor llegeix aquest article, que posi un comentari i posaré una actualització amb la direcció immediatament.

Com afegir les icones de menéame a blogger

0.- L'explicació està plena de codi XML, no us espanteu. A més, Blogger no m'ho ha posat gaire fàcil, així que el format del codi no és precisament llegible.

1.- Aneu a "Plantilla-> Edición de HTML"

Accés al codi HTML

2.- Feu clic a "Descargar Plantilla Completa" i descarregueu-vos l'actual. sempre anirà bé tenir una còpia se seguretat per si alguna cosa surt malament.

Fer una còpia de seguretat

3.- Marqueu "Expandir plantillas de artilugios" per veure tot el codi de la pàgina.

Veure tot el codi HTML


4.- busqueu on posa quelcom de l'estil:
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> </p>
<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data: label.url' rel='tag'><data:label.name/>
</a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span></p>
<p class='post-footer-line post-footer-line-3'/>
</div>
</div>
</b:includable>

5.- El codi que posareu serà
<br/>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img align='absbottom' src='http://www.feedforall.com/delicious.png' style='border:none;'/></a>
<a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img align='absbottom' src='http://img243.imageshack.us/img243/5545/meneame1vs2.png' style='border:none;'/></a>
<a expr:href='"http://tec.fresqui.com/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img align='absbottom' src='http://img110.imageshack.us/img110/6861/fresquiwo3.gif' style='border:none;'/></a>
<a expr:href='"http://latafanera.net/submit.php?url=" + data:post.url' target='_blank'><img align='absbottom' alt='Tafaneja aquesta notícia' src='http://latafanera.net/rebost/blogger-tafanera.gif' style='border:none;' title='Tafaneja aquesta notícia'/></a>

i anirà entre el "</b:if>" i el "</span></p>".

6.- Us quedarà més o menys així:
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> </p>
<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data: label.url'
rel='tag'><data:label.name/>
</a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

<br/>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img align='absbottom' src='http://www.feedforall.com/delicious.png' style='border:none;'/></a>
<a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img align='absbottom' src='http://img243.imageshack.us/img243/5545/meneame1vs2.png' style='border:none;'/></a>
<a expr:href='"http://tec.fresqui.com/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img align='absbottom' src='http://img110.imageshack.us/img110/6861/fresquiwo3.gif' style='border:none;'/></a>
<a expr:href='"http://latafanera.net/submit.php?url=" + data:post.url' target='_blank'><img align='absbottom' alt='Tafaneja aquesta notícia' src='http://latafanera.net/rebost/blogger-tafanera.gif' style='border:none;' title='Tafaneja aquesta notícia'/></a>

</span> </p>
<p class='post-footer-line post-footer-line-3'/>
</div>
</div>
</b:includable>

7.- Deseu els canvis

Desa els canvis
8.- I ja hauria de funcionar

Tachan!

Per si no us n'heu adonat, tot els enllaços són iguals. Anem a veure quin és el format:
<a expr:href='" http://meneame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img align='absbottom' src='http://img243.imageshack.us/img243/5545/meneame1vs2.png' style='border:none;'/></a>
De cadascun dels article se n'agafa la url i el títol. Pel que a mi respecta aquesta codificació és errònia i hauria de ser:
<a expr:href='" http://meneame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title + "' target='_blank'><img align='absbottom' src='http://img243.imageshack.us/img243/5545/meneame1vs2.png' style='border:none;'/></a>
Però al blog d'on ho vaig treure ho feien així i no filaré tant prim.

NOTA: no totes les plantilles de Blogger són iguals, i molt menys si ja heu fet canvis sobre l'HTML. És possible que us costi una mica localitzar on posar el codi.

NOTA: perquè els de Blogger posen tant difícil publicar fragments de codi font. Vull una etiqueta <code> o alguna cosa per l'estil ja!

ACTUALITZACIÓ: en un dels comentaris, el/la lector/a Hinfra ha comentat que falta un enllaç a remoume.net. Doncs bé, per afegir-lo només cal posar el codi.

<a expr:href='"http://remoume.net/submit.php?url=" + data:post.url' target='_blank'><img align='absbottom' alt='Remou aquesta notícia' src='http://remoume.net/bloc/images/ruc.gif' style='border:none;' title='Remou aquesta notícia'/></a>

just sota de l'enllaç a la tafanera.

13 comentaris:

Anònim ha dit...

Ops...
no em deixa desar la plantilla.
Segur que l'xml que hem de copia i enganzar esta ben constriuit ?

Ferran Recio Calderó ha dit...

Bé, el tornaré a enganxar l'xml per si algun cas. No confio massa amb l'editor de Blogger.

Ferran Recio Calderó ha dit...

He tornat a posar el codi XML, a veure si ara funciona.

Hinfra ha dit...

Podries agregar també el botó del remoume (remoume.net), és un clon del menéame en català que acava de neixer.

Al bloc hi ha un plugin pel WordPress i tot.

Donali una ullada ;-)

Ferran Recio Calderó ha dit...

Gràcies hinfra, la veritat és que no coneixia remoume.net. Com a normal general, les xarxes d'enllaços socials em carreguen una mica, però crec que són un bon sistema per promocionar els blocs en català.

Un altre tema seria si realment era necessari un nou clon del menéame en català. Potser per una blocosfera tant petita ja en fem prou amb la tafanera.

En tot cas, l'enllaç no varia gaire. No ho he pogut provar perquè blogger està en manteniment ara mateix, però segurament seria quelcom de l'estil:

<a expr:href='"http://remoume.net/submit.php?url=" + data:post.url' target='_blank'><img align='absbottom' alt='Remou aquesta notícia' src='http://remoume.net/bloc/images/ruc.gif' style='border:none;' title='Remou aquesta notícia'/></a>

Quan ho hagi provat ja ho posaré a l'article.

Sybaria ha dit...

Moltes gràcies per tot Ferran =^_^=

Pilarll ha dit...

Gracies, acabo de descobrir el teu bloc i aprofitaré per provar de posar-me aquests enllaços

Ferran Recio Calderó ha dit...

Hola PilarII, ja em diràs si t'ha funcionat. Et diria "sort amb el bloc" però veig no la necessites.

Hinfra ha dit...

Salutacions Ferran,

És normal que no coneguessis el remoume.net, no fa ni un mes que és a la xarxa i de moment no el visita gaire gent...

Jo en soc el webmaster, així que si vols qualsevol cosa, ja saps, pots escriurem a hinfra@gmail.com, cap problema.

Ens veiem!

Jordi Massaguer i Pla ha dit...

Quan intentes guardar et dona un error ja que el caràcter "&" l'interpreta com a una entitat. Per a què no doni l'error, s'ha de posar & en comptes de &.

Jordi Massaguer i Pla ha dit...

el que volia dir és que has de posar amp; després del & ...

Ferran Recio Calderó ha dit...

Gràcies Jordi. Vaja , es curiós això del &. Quan poses & estàs posant el caràcter reservat d'html mentre que & accedeix als valors de la pàgina.

El codi que he posat és el que està funcionant en aquest bloc, ja provaré el canvi a veure que passa.

Ferran Recio Calderó ha dit...

Carai, he fet el mateix que tu. Vull dir que &amp; és el caràcter reservat.