ShareSidebar: Barra para compartir entradas

ShareSidebar es un servicio para quienes no quieran lidiar con códigos ya que de manera simple, nos permite agregar una barra lateral fija en nuestra web, con iferentes servicios que permiten a los visitantes, compartir las entradas en las redes sociales.

Sólo necesitamos completar el formulario con una dirección de mail, la URL del blog, definir si se mostrará a la izquierda o a la derecha y seleccionar los servicios que vamos a usar: Facebook, Twitter, Delicious, Digg, Google Buzz, StumbleUpon, Reddit y Yahoo Buzz.

Decidido eso, hacemos click en Get the code y listo. Ahí nos darán el código necesario que luego pegaremos en la plantilla, justo antes de la etiqueta </body>.

<!--ShareSidebar.com BEGINS-->
<style>
  .FBConnectButton_Small {
    background-position: -5px -232px !important;
    border-left: 1px solid #1A356E
  }
  .FBConnectButton_Text {
    margin-left: 12px !important;
    padding: 2px 3px 3px !important
  }
  #ShareSidebar {
    font-size: 9px;
    line-height: normal;
    overflow: hidden;
    position: fixed;
    right: 0 !important;
    text-align: center;
    top: 25%;
    width: 69px;
    z-index: 100000;
    _position: absolute;
  }
  #ShareSidebar a, #ShareSidebar a:hover, #ShareSidebar a:visited {
    font-size:9px;
    text-decoration: none;
  }
</style>

<div id="ShareSidebar">
  <div style="float:left; margin:10px 0 0 10px;">
    <a name="fb_share" type="box_count" 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>
  </div>
  <div style="float:left; margin:10px 0 0 10px;">
    <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
  </div>
  <div style="float:left; margin:7px 0 0 10px;">
    <a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a>
    <script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
  </div>
  <div style="float:left; margin:10px 0 0 10px;">
    <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
  </div>
  <div style="float:left; margin:10px 0 0 5px; color:#000000; font-family:Arial, Helvetica, sans-serif; background-color:#F4295C; padding:2px 3px;">
    <a href="http://sharesidebar.com" target="_blank"><font color="#ffffff">Share</font><font color="#000000">Sidebar</font></a>
  </div>
</div>
<!--ShareSidebar.com ENDS-->

Por supuesto, quien quiera, peude modificar el estilo para adaptarlo pero, así como está, funcionará normalmente en casi cualquier plantilla:

mostrar/ocultar

REFERENCIAS:wwwhatsnew.com

¿Quién es quién? Este es Juan y aquel es Pedro; más fácil, este es Juan y aquella es Antonia. Facílisimo. No es necesario saber sus nombres para identificarlos y no confundirlos pero, pese a lo que muchos creen, las computadoras son idiotas. Es decir, hacen cuentas muy pero muy rápido pero ignoran todo lo que no les explicamos con pelos y señales.

Ese es el problema con los IDs que tanto se utilizan y que tantos problemas causan cuando ponemos dos cosas con el mismo nombre y sólo funciona una de ellas.

El ID se utiliza para IDentificar algo y ese algo debe ser ÚNICO, sólo debe haber uno con ese nombre en toda la página; si no lo es, el navegador no sabrá a cuál nos referimos cuando le decimos que haga algo. Por eso, los IDs no se ponen en todas las etiquetas, sólo los usaremos cuando sea necesario y la regla genérica dice que deberíamos reservalos exclusivamente para los sectores importantes, para definir los grandes rectángulos que conforman un sitio web: el header, las columnas, el footer, etc.

Pero, también los usamos cuando requerimos identificar sectores auxiliares, cualquier cosa que se nos ocurra manipular con JavaScript.

Vamos a un ejemplo que no funcionará.

Una funcióm simple que permuta la visibilidad de una etiqueta. Dado su ID, si está oculta se muestra y si está visible se oculta:

<script>
  function toggletag(cual) {
    var elElemento = document.getElementById(cual);
    if(elElemento.style.display == 'block') {
      elElemento.style.display = 'none';
    } else {
      elElemento.style.display = 'block';
    }
  }
</script>

Ponemos dos DIVs y queremos ocultar el segundo pero ... en ambos hemos usado el mismo ID:

<div id="mi_id" style="display:block;"> Este es un DIV cualquiera ... </div>
<div id="mi_id" style="display:block;"> Este es el DIV que quisiera ocultar ... </div>
<a href="javascript:toggletag('mi_id');">click</a>

El resultado será este:

Este es un DIV cualquiera ...

Este es el DIV que quisiera ocultar ...

click

No funciona. Se oculta el primero y no el segundo ya que el navegador lo encontró primero e ignora al otro.

Todo se debe a ese detalle, ambos tienen el mismo ID así que, para que esto funcionara, deberíamos ponerles nombres diferentes:

<div id="mi_id_1" style="display:block;"> Este es un DIV cualquiera ... </div>
<div id="mi_id_2" style="display:block;"> Este es el DIV que quisiera ocultar ... </div>
<a href="javascript:toggletag('mi_id_2');">click</a>

Este es un DIV cualquiera ...

Este es el DIV que quisiera ocultar ...

click

Y todos felices ...

Como este es un reproductor que me gusta mucho y ha salido una actualización, vuelvo a comentarlo.

tubePlayer es un reproductor de vídeos de Youtube independiente, creado por unijimpe, muy liviano y sencillo de utilizar.

La nueva versión incluye opciones de autoplay, volumen por defecto, posibilidad de desplazarse a cualquier parte del video, previsualización de la imagen, mensajes de error cuando el video esta bloqueado o ha sido eliminado, pantalla completa y además, elimina la publicidad y las anotaciones que son tan molestas.

Descargamos el ZIP desde la página del autor y al descomprimirlo, nos encontraremos con un demo y el archivo newtubeplayer.swf que es el único que necesitamos alojar en algún servidor: Google Sites, Filede DropBox o cualquier otro que nos guste.

De aquí en más, tenemos varias opciones para utilizarlo. La más simple es agregarlo como cualquier otro archivo SWF; allí donde queremos ver el video, ponemos las etiquetas correspondientes:

<object width="510" height="320" type="application/x-shockwave-flash" data="URL_tubeplayer.swf">
  <param name="movie" value="URL_tubeplayer.swf" />
  <param name="FlashVars" value="videoId=XXXXXXXXXXX" />
  <param name="allowFullscreen" value="true" />
</object>

donde:

• en width y height colocamos el tamaño deseado
• reemplazamos URL_tubeplayer.swf por la URL del archivo que hayamos alojado
• y colocamos en XXXXXXXXXXX el ID del video a reproducir

Para quien nunca lo haya hecho, el ID de un video de YouTube es ese conjunto de once caracteres que se muestra tanto en la página del video como en los códigos que nos dan para insertarlos; por ejemplo:

http://www.youtube.com/watch?v=NdkzQ5_Sv_8
http://www.youtube.com/watch?v=wb4RauhteFA&feature=list_related&playnext=1
http://www.youtube.com/v/NdkzQ5_Sv_8?fs=1&hl=es_ES&rel=0

Si queremos agregarle alguna opción extra, colocamos los parámetros uno al lado del otro, separándolos con el caracter &:

<param name="FlashVars" value="videoId=NdkzQ5_Sv_8&autoPlay=true&volume=100" />

Si tenemos instalada la librería SWFObject, podríamos incluir el reproductor con JavaScript:

<div id="divmovie">tubePlayer</div>
<script type="text/javascript">
  swfobject.embedSWF("URL_tubeplayer.swf", "divmovie", "510", "320", "9", "",
  {videoId: "XXXXXXXXXXX"}, {allowFullscreen: "true"});
</script>

Eso no es muy práctico ya que habría que escribirlo en cada video que quisiéramos mostrar pero podemos mejorarlo, creando una función que colocaríamos antes de </head>;

<script type='text/javascript'>
//<![CDATA[
function videoyoutube(id) {
  document.write ("<div id='" + id +"'>tubePlayer</div>");
  swfobject.embedSWF("URL_tubeplayer.swf", id, "510", "320", "9", "", {videoId: id,volume:"100"}, {allowFullscreen: "true",menu: "false",quality: "high",wmode: "transparent"});
}
//]]>
</script>

y la llamamos, colocando esto donde vamos a mostrar el video, por ejemplo, en un post:

<script> videoyoutube("XXXXXXXXXXX") </script>

Si no tenemos la librería instalada, no importa; algo similar puede hacerse sin ella:

<script type='text/javascript'>
//<![CDATA[
function videoyoutube(id) {
  document.write ("<div id='" + id +"'>  tubePlayer </div>");
  var salida = "<object type='application/x-shockwave-flash' height='320' width='510'";
  salida += "data='URL_tubeplayer.swf'>";
  salida += "<param name='movie' value='URL_tubeplayer.swf'>";
  salida += "<param name='FlashVars' value='videoId=" + id + "' />";
  salida += "<param name='allowFullscreen' value='true' />";
  salida += "</object>";
  document.write (salida);
}
//]]>
</script>

REFERENCIAS:unijimpe.net

Para continuar con sus cambios de cara, Twitter ha actualizado los botones y widgets que podemos agregar en nuestra web.

Por un lado están los botones simples que se agregan al Twittear lanzado hace poco y que parece haber logrado la estabilidad que antes no tenia. A eso le han sumado logos oficiales que antes no tenían

• Widget de perfil que mistrará nuestros propios tweets en cualquier página
• Widget de búsqueda que muestra en tiempo real, tweets conteniendo determinada combinación de palabras
• Faves Widget con los tweets favoritos mostrados en tiempo real
• Widget para listas para mostrar las listas que hayamos creado.

REFERENCIAS:todoTwitter

Esta es una forma sencilla de mostrar un fondo diferenciado en ciertos párrafos, cuando se coloca el cursor del ratón encima de ellos.

• Sed sagittis arcuMorbi consectetur orci at nibh viverra eget bibendum risus dictum. Nulla consequat quam arcu. Nullam euismod pharetra diam et ultricies? Aenean convallis scelerisque velit, et vehicula turpis consectetur et.

La idea básica es utilizar la posibilidad que nos dan los enlaces pero, en realidad, en cualquier navegador moderno, lo mismo puede lograrse sin recurrir a ellos ya que la mayoría de las etiquetas aceptan :hover.

Primero, las definiciones de estilo:

a.button:link, a.button:visited { /* cada párrafo es un enlace */
background: transparent url(URL_imagen) no-repeat 20px 40px;
display: block;
text-decoration: none;
margin: 20px auto;
padding: 10px 20px 10px 100px;
width: 500px;
}
a.button:hover { /* el enlace cambia de estado al poner el cursor encima */
background-color: #FFEBCD;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
span.title { /* el título del párrafo */
color: #F08;
display: block;
font-size: 18px;
}
span.text { /* el contenido del párrafo */
color: #999;
font-family: Arial;
font-size: 15px;
line-height: 1.5em;
}
ul.demohover { /* usaremos una lista para contener los enlaces */
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
}

Y lo aplicamos a una lista ordenada:

<ul class="demohover">
<li>
<a href="#" class="button" onclick="return false;">
<span class="title"> ... el título ... </span>
<span class="text"> ... el contenido ... </span>
</a>
</li>
.......
</ul>

• Condimentum quam elementumCurabitur venenatis, nisl at scelerisque aliquet, ipsum quam rutrum enim; ac euismod tortor arcu quis orci. Nunc vitae augue augue. Integer nec orci ut neque sagittis laoreet. Sed id ante sit amet neque aliquet volutpat.
• Eget cursus tortor posuereVivamus suscipit nisi sed libero accumsan et dictum sem pretium. Aliquam quis lectus eget lorem fermentum fermentum. Integer convallis; libero et feugiat venenatis; ligula dolor mollis urna, et lacinia tortor mauris quis erat.

REFERENCIAS:impressivewebs.com

Calaveras, brujas, terror, el especial de los Simpsons ... un gran negocio que se extiende de norte a sur y que nos vuelve un poco más zombies de lo que éramos.

Sea como sea, ¿colaboro? con estas fechas y acá va un gif animado de esos que uno sabe si está muy bien hechos o si son un poco exagerados.

No. Asustar no asusta pero, cualquier cosa, puedo gritar BUUUUUUUUU y listo.

REFERENCIAS:haha.nu

Facebook Insights es la página de estadísticas donde Facebook nos da información sobre las páginas creadas pero también es posible utilizarlo para hacer un seguimiento de las interacciones con otros sitios.

Para eso, debemos agregar el dominio a seguir y copiar y pegar la etiqueta META que nos dan, en alguna parte, del head de nuestra plantilla:

<meta content='1234567890' property='fb:admin' />

Una vez verificado, podemos enlazar los reportes a nuestro Perfil o a cualquier página de Facebook que tengamos.