Añadir marcadores sociales en tu blog

sábado, 21 de noviembre de 2009
Hace un tiempo vimos en El Balcon de Jaime una entrada sobre como aplicar unos marcadores sociales en tu blog, para permitir a los usuarios compartir las entradas en diferentes páginas como Facebook, Technorati, Delicious, Twitter, Digg, etc.
Pues bien, nos pareció muy interesante, así que vamos a explicarlo para aquel que quiera conseguirlo.

Vamos a Diseño> Edición de HTML de la plantilla y expandimos artilugios:


Ahora buscamos esta linea (Ctrl+F):
<div class='post-footer-line post-footer-line-3'>
Debajo de esa línea, añade lo siguiente:

<b>Compartir:</b>

<a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Technorati'><img alt='Agregar a Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhTWbrpM_jWy4vuO9Dsr_n52Xo5G4wRTn9p9bWBXJh0RtVoMwU7RVI8htQy8Cl1B_yuadsle2YLcQkI3prTLucnxfKFwcYruosLCvIPPti4jUjjj912ojgA1ljwsX3bL9dKsXZh2AbPr4/s1600-r/technorati.gif'/></a>

<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Twittealo'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhML1ycd5EKwwksryNVQObNe2tdrCl9B1iW8Kttzk_aHGo3zb7VghPKmxONyBRmk36aI1edDbeRqWJTy8XPc3woD1eGg36w68wUOrUPcddC804akkqwNAVpzX7TC0JuS_xMe7T0He5b5Z8/s1600-r/twitter.png'/></a>

<a expr:href='&quot;http://bitacoras.com/votar/anotacion/externo/mini/&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Bitácoras.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVXVSztK0I76dUH5aFDHl_v2PcpOO14sxczfXlVghRe-Ii8i3AlAl72BQAFCn0xrzyk1VmYqiXPeF3Ofh8R9trXr8fgYPRz5zwlEYTkcnoOLgg9qzw04ve90_q91y1xxRHcoPc66cUWKI/s1600-r/bitacoras.png'/></a>

<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Reddit'><img alt='Agregar a Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgMDlknqkz42MAIsEEoHdAAaezYulSZhBdcih5Ce0M-RnI8YVQFHUUehDfakZfi6Qr9FB3xQi89kFcgbQD6uPSGdx4P_3-4fVb1ewEhxGmghHazN_jGiYKCfkRaYw_UB4R5RF3YtdNlp4/s1600-r/reddit.png'/></a>

<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Del.icio.us'><img alt='Agregar a Del.icio.us' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEYmfa5wZtc3nRbTT5wXfzG-pGaQcgH9bznSOibvsWJ6nX7bV4aYodMtUP4mK9bScyS6-NndZEpQpnKDz2-mWskoUQz5M6fZXZmEoTF8KqXK-h6-saB4HG6KqmWxeMsWnjr93CBhKS2Tg/s1600-r/delicious.gif'/></a>

<a expr:href='&quot;http://digg.com/submit?phase=2&amp;amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a DiggIt!'><img alt='Agregar a DiggIt!' src='http://img171.imageshack.us/img171/8971/digg.png'/></a>

<a expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Blinklist'><img alt='Agregar a Blinklist' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_XBK-Ej5nWntL715QxiNL8pnZyCVlUNIns9rzcozF38KVoO41Sva6ejGluUc3OFkaIXeonPgCQqndFgZZ64OEpE098RRQKmG6KJYFY7Sjf8prC2Cj3PdE0iQfNY4KU1QGUDdvFFwHKYM/s1600-r/blinklist.png'/></a>

<a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Google'><img alt='Agregar a Google' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghko1scPBssr3f6PI0iFWwD2eUhtg0IpWYwO0mRQ2LzPmyjVz6ArGv5R1rPXyBdH9s7qoUmDsOkbDwTLdakZQkNsiOeBWrSu5bL4KkzLoYOWWZowyduE2em2hrbHa9Q8EL_-Jae8kpsvQ/s1600-r/Google.png'/></a>

<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDqtW6KBEd_rGwgx38K6Ntj2qgH_OXW4tGMfeyHVk6yC6IcRqRASM-y6Z0wOX3luPO6B_4QQmpWXw8l4sjC3jPEo9GzQKGKgIRGO1ZRo0SSU5Y7zgQeAg7UwtACLN-gEN15bcRUXUBvQc/s1600-r/facebook.png'/></a>

<a expr:href='&quot;http://meneame.net/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Meneame'><img alt='Agregar a Meneame' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuulIM99k8-wVGRsvg29lG_FVcGLtakmwJjKwcM3iffLALaugWw_Larb_EyFpYFHyMRwIbt9gRkmLvXDhaEK65DYJumlwAEULCEK9cJVVEoN6qx92VkaEsQnHhHEZ16ztpyzlXEaN8ANI/s1600-r/meneame.gif'/></a>


Y si todo ha salido bien, Guardamos Cambios, y el resultado debería ser este:

Saludos!!!

20 comentarios:

  • hola muy buena entrada
    bueno tengo una pregunta mi primo tiene un blog pero queremos poner codigos en las entradas pero no sabemos como
    nose si pudieras hacer una entrada explicando como poner esos cuadros con el borde verde,el fondo y todo lo demas
    gracias

  • La Trucoteca

    Anónimo:
    Puede que esta entrada te sirva: http://latrucotecadeblogs.blogspot.com/2009/06/insertar-cajas-de-html-en-tus-entradas.html
    De todas formas en el nuevo editor de Blogger, en Opciones de entrada si le das a "Mostrar html literalmente", este no te lo transformará ;)
    Por cierto, esos cuadros se llaman Blockquotes o Citas. Pronto publicaremos algo sobre ese tema y como personalizarlos :)
    Saludos!

  • ordago13

    Muy grande el truco...

    Aunque en mi reciente política de austeridad para el blog no lo voy a poner...

    Esta muy bien¡¡¡
    Tienes mazo de lectores de feedburner

  • La Trucoteca

    Hola de nuevo, Ordago13!
    Bueno, no pasa nada, todo es cuestión de gustos :)
    Gracias por tus numerooosos comentarios ;)
    Saludines!

  • Grupo Cumorah

    Gracias, ya lo probé y funciona, pero mi duda es ¿cómo hago para que las insignias de facebook, twitter, etc, aparezcan en forma horizontal y no vertical?

    Saludos, y seguiré aprendiendo trucos en Trucoteca.

  • *//////*

    ¡Que lindos son!

    Yo encontré otros que vienen todos en uno, y lo que hice para que siempre estén incorporados es:
    1) copiar el código que te dan en esta página
    2) colocar ese código en la sección de "Configuración"-"Formato" donde dice: "Plantilla de entrada"

    De este modo cada vez que realizamos un post, al final del mismo ya sale el elemento incorporado con sus indicadores sociales =)

    Besos enorme !!!

  • El Angel de cari

    Hola!
    Lo he hecho y me ha quedado bien.
    Gracias

  • La Trucoteca

    Alberto Zepeda:
    Hemos visto tu blog, y exactamente, los marcadores aparecen en vertical. Tras pensar y pensar, lo hemos solucionado probando con esa misma plantilla en un blog de pruebas.
    Al parecer, en el código de esa plantilla, aparece esto:
    img {
    border: 0;
    display: block;
    }

    Pues bien, unicamente, elimina la línea display: block; , y volverá todo a la normalidad :)
    Bueno, y ya está, esperamos que se solucione y puedas disfrutar de los marcadores en tu blog :D

    ¡¡Muchos saludos!!

  • La Trucoteca

    Hola Maria Rosa!
    Ay, que alegría verte por aquí :):):)
    De verdad que nos alegran mucho tus comentarios ;)
    Lo que tú dices es también otra forma de implementarlo, y está "chulo".
    Gracias, infinitas gracias, y, por cierto, pronto agregaremos tu página a las recomendadas... jeje ;)
    Saludos!!!!

    Y, hola Cari y Yoly!
    Nos alegramos de que os haya servido, y si sale bien, mucho más :):)
    Gracias por el comentario ;)

    Saludos y nos vemos!!!

  • aserecubano

    Esta muy bien ya lo puse en mi blog.
    gracias por compartir.

  • La Trucoteca

    Hola Aserecubano
    Nos alegra que te haya gustado y servido el truquillo ;)
    Gracias a ti por la visita, los iconos te han quedado muy bien!
    Saludines!

  • La Trucoteca

    Hola Flapi!
    Pues, la verdad, no entendemos que te ha podido pasar, porque el código está perfecto.
    Te recomendaríamos que lo pruebes de nuevo, tras Expandir artilugios(marcando la casilla que aparece), y, sobre todo, que agregues el código después de la parte que indicamos exactamente.
    Si continúan los errores, veremos que se puede hacer :)
    ¡Saludos y esperamos verte más por aquí!

  • Orlando Bravo Jesus

    Hola!

    No encontre el codigo en mi blog:
    La primera linea que mencionas

  • La Trucoteca

    Hola Orlando
    Asegúrate de haber expandido los artilugios de tu plantilla, y sí lo marcaste y aún así no seguía apareciendo, por favor, explícanos en que blog te ocurre el problema y trataremos de solucionarlo.
    Saludos!

  • Orlando Bravo Jesus

    Hola. Nuevamente, hice todo lo que indica, pero como le dijo no encuentro esos codigos en mi blog y me gustaria añadir los marcadores al final de mi post.
    el blog al que quiero instalar es REPORTE AL DIA

    Agradezco de antemano su gentil ayuda. Saludos

  • La Trucoteca

    Hola Orlando
    Bueno, parece que al final pudiste poner una lista de marcadores sociales después de <div class='post-footer'>.
    Para cualquier cosa que necesites, aquí estamos :) :)
    Un saludo.

  • Orlando Bravo Jesus

    Si gracias, fue de mucha utilidad. Saludos!s

  • La Trucoteca

    OK, Orlando, nos alegra que ya esté todo bien :)
    Saludos!

  • Marileska

    Muy buena entrada. Ayuda mucho y sobretodo Funciona!!
    Gracias
    Saludos.!

  • Ir Arriba