Marcadores de redes sociales en Blogger


Han sido varios los que me han preguntado como agregar íconos de redes sociales a su blog. Hoy vamos a ver cómo hacerlo y más adelante veremos como darle algunos "efectos" (pushbutton, transparencia,etc.)


Para colocar los íconos haremos lo siguiente:

♠ Vamos a Diseño - Edición de HTML y Expandir plantilla de artilugios.
♠ Con ayuda de CTRL+F buscaremos lo siguiente:

<p class='post-footer-line post-footer-line-3'/>

♠ Antes del código anterior, pegaremos lo siguiente:
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Del.icio.us' src='http://img30.imageshack.us/img30/1893/delicious24x24s.png'/></a>
<a expr:href='"http://digg.com/submit?phase=2&amp;amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a DiggIt!' src='http://img30.imageshack.us/img30/8708/digg24x24.png'/></a>
<a expr:href='"http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Google' src='http://img17.imageshack.us/img17/6836/google24x24.png'/></a>
<a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Technorati' src='http://img2.imageshack.us/img2/1722/technorati24x24.png'/></a>
<a expr:href='"http://ma.gnolia.com/beta/bookmarklet/add?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Magnolia' src='http://img30.imageshack.us/img30/3479/magnolia24x24.png'/></a>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Reddit' src='http://img30.imageshack.us/img30/7517/reddit24x24.png '/></a>
<a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Blinklist' src='http://img14.imageshack.us/img14/5392/blinklist24x24.png'/></a>

Damos click a guardar y eso sería todo. Si queremos podemos agregar más redes sociales o cambiar los íconos que les proporcione por otros.

Por cierto si desean alojar directamente los íconos, aquí les dejo el link de la colección de íconos que usé » Descargar

► Iconos vía Fasticon

8 opinaron:

squirrel

Es lo que buscaba, genial!

Responder
G

Es lo que iba a preguntar; gracias por compartir con todos tus conocimientos :)

Responder
juan carlos

Muy buenos

Responder
Josué

Me quedaron preciosos, hoy mismo los puse :D. Si, se que pregunto mucho :), pero,
tengo que estar registrado en cada una de estas páginas para que funcionen?
Tanto para enviar webs, como para que otros envien la mia?
Saludos y te doy 100 puntos por este articulo.

Responder
Graciela

:D Jesi muy bueno tu blog, vengo siguiendo tus entradas...saludos

Responder
Jéssica YK

» squirrel: me alegra :)

» G: gracias a ti por la visita

» juan carlos: gracias :)

» Josué: sí, los vi en tu blog y quedaron muy bien.
En cuanto a tu pregunta, pues no es necesario que tú te suscribas a cada una de las páginas para que funcione el código, pero para que alguien envíe tus entradas o post si tiene que estar suscrito e iniciar sesión cuando quiera recomendar tus post.

» Graciela: me alegra que sigas el blog :) te visitaré pronto

S@lu2

Responder
jhyrlecrystal

:) MUCHAS GRACIAS ME FUNCIONO PERFECTO.. SOLO QUIERO SABER COMO AGREGO EL DE FACEBOOK Y TWITTER ;)

Responder
Jéssica YK

» jhyrlecrystal:

Para Twitter agrega lo siguiente:
<a expr:href='&quot;http://twitter.com/home/?status=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src='AQUÍ-URL-IMAGEN-BOTÓN' style='border:0px; padding:2px' valign='bottom'/></a>

Para Facebook:
<a expr:href='&quot;http://facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src='AQUÍ-URL-IMAGEN-BOTÓN' style='border:0px; padding:2px' valign='bottom'/></a>

Reemplazas AQUÍ-URL-IMAGEN-BOTÓN por los botones que tengas para twitter y facebook.

S@lu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio