Bookmark - Instalar marcadores sociales en jQuery

5/06/2010 02:06:00 p.m. | Publicadas por nenesio | Editar entrada


Un plugin de jQuery que establece un div para permitir que los usuarios compartan su página en varios sitios de bookmarking.

Comparte tu página con cualquier número de sitios bookmarking. Las características incluyen:

  • Completo y versiones compactas.
  • Personalizable lista de sitios.
  • Fácil añadido de nuevos/otros sitios.
  • Favoritos y E-mail enlaces.
  • Marcar una página que no sea la actual.

La instalación es algo sencilla:

Primero añades en el head la ruta de la libreria jQuery:


<script type="text/javascript" src="http ://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


Seguido añades la ruta del estilo CSS y la librería jQuery del plugin:

<br /><style type="text/css">@import "DOMINIO.COM/RUTA DEL ARCHIVO/jquery.bookmark.css";</style> <br /><script type="DOMINIO.COM/RUTA DEL ARCHIVO/text/javascript" src="jquery.bookmark.js"></script><br />


abajo añadimos el DOM script :

<br /><script type='text/javascript'><br />$(selector).bookmark();<br /></script><br />


si no deseas mostrar todos los sitios, sino solo lo que tu quieras entonces usarías algo así:

<br /><script type='text/javascript'><br />$(selector).bookmark({sites: ['delicious', 'digg']});<br /></script><br />


Bien ahora ya se puede crear crear el DIV donde quieres el botón de compartir:

<br /><div id="defaultBookmark" class="hasBookmark"> <br />    <div class="bookmark_popup"> <!-- Clase si es ventana emergente --> <br />        <ul class="bookmark_list"> <!-- Clase si es estilo bookmark_compact --> <br />            <li><a href="DIRECCION URL o CODIGO DE LA DIRECCION"> <br />                <span class="iconsStyle"/> Nombre a mostrar</a></li> <br />            <!-- Opcional estilo de la URL --> <br />            <li><a href="DIRECCION URL o CODIGO DE LA DIRECCION"> <br />                <span class="background-image: url(icons.gif);"/> Nombre a mostrar</a></li> <br />            <!-- Opcional estilo de la URL --> <br />            <li><a href="DIRECCION URL o CODIGO DE LA DIRECCION"><img src="icon.png" /> Nombre a mostrar</a></li> <br />            : <br />        </ul> <br />    </div> <br /></div><br />






Etiquetas: , ,
ShareThis

Recientes Post:

Suscribirse a: Comentarios de la entrada (Atom)

Suscripciones

Blog Archivo

Designed by Blogger Recursos Created by ИЄИЄSIØ.