¿Cómo crear botones para compartir en Facebook y Twitter?

Esta es una pregunta muy común y lo bueno es que la respuesta es muy fácil.

Facebook

Pegue el siguiente código en el HTML de su página web:

<a name="fb_share" type="button" href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script>

El mismo se verá de la siguiente forma:Share al hacer click en el botón se abrirá un pop-up que le permite compartir en Facebook si esta conectado a Facebook y si no le mostrará una ventana de acceso a Facebook

Los contenidos de lo que se ponga en Facebook depende de los metadatos de la página donde esté el script. Ejemplo:

<meta name="title" content="El titulo que queremos" /> 
<meta name="description" content="Una pequeña descripción de los contenidos" /> 
<link rel="image_src" href="http://www.sitioweb.com/una_imagen_que_ilustre_el_link.jpg" / >

Twitter

El de Twitter requiere un poco más de conocimiento técnico ya que hay que editarlo para nuestros propósitos. Así por ejemplo si quisiera crear un boton de twitter para este post sería así:

<a href="http://twitter.com/home?status=Aprenda a crear links para Twitter y Facebook http://emmanuelulloa.blogspot.com/2010/06/como-crear-botones-para-compartir-en.html">Compartir este artículo en Twitter</a>

El mismo se vería así: Compartir este artículo en Twitter al hacer click en el link lo llevará a la página de Twitter y si esta conectado llenará la casilla de texto para compartir.

Para que se vea mejor recomiendo que en lugar de utilizar un link con texto se utilice una imagen

Herramienta útil para previsualizar HTML, CSS y JS

Esta herramienta es muy util para previsualizar HTML, CSS y JS: http://acme-web-design.info/free-web-design-toy.php

Javascript basico. JS en href y alert( ).

Hoy vamos a ver como usar el "href" de los links para disparar JavaScript. Generalmente en los "href" es para redireccionar el browser a otra pagina asi:

<a href="http://www.google.com">Haz click para ir a otra pagina</a>

Haz click para ir a otra pagina Pero tambien se puede usar para disparar un alert de Javascript asi:

<a href="javascript: alert('Esto es un mensaje de alerta');">Abre una alerta de Javascript</a>

Abre una alerta de Javascript Lo importante a notar es que se escribe primero javascript: y luego el codigo de JavaScript en este caso alert('Mensaje que se quiere mostrar'); TAREA: Hacer una pagina html que tenga un texto que diga: "Entradas gratis al cine (*)" Cuando el usuario hace click en (*) saldra una alerta que dice: "Valido de Lunes a Jueves. No valido en estrenos o salas de 3D."