Si el blog no es nuestro no tenemos otra alternativa que dejar el campo imagen vacío o intentar compartir el artículo como un simple enlace.

Si por el contrario es nuestro propio blog el que presenta estos problemas al compartitr artículos en Facebook, la solución es bastante sencilla. En la siguiente imagen se muestra cómo se debería ver un enlace a un artículo compartido dentro de Facebook:

En WordPress es bastante sencillo solucionar el error de que no se muestra la imagen, título o descripción al compartit en Facebook:

• Lo primero que haremos será localizar y editar el fichero header.php de nuestro theme.
• Lo siguiente pegar este código antes de <?php wp_head(); ?>

• Guarda y sube de nuevo el fichero header.php con los cambios realizados.

Si eres de los que prefiere utilizar plugins antes de tocar código, existe un plugin que hace exactamente lo mismo llamado Facebook Meta Tags Plugin.

Recuerda también añadir el botón compartir o “Me gusta” en tus artículos.

La solución lógica es hacer que ese botón se muestre sólo cuando es realmente necesario y tiene una utilidad, es decir, el momento en el que el usuario comienza a realizar scroll en nuestra página hacia abajo. Al realizar el efecto contrario también desaparece, ya que el usuario no está haciendo uso de el y por lo tanto, es un elemento en pantalla del que se puede prescindir.

UItoTop es un plugin bastante sencillo que nos servirá para hacer desaparecer el botón de “Subir” o “Ir arriba” y mostrarlo sólo cuando sea necesario.

Para comenzar a utilizar el plugin bassta con descargar los ficheros, realizar las llamadas en nuestro documento y añadir el siguiente código:

$(document).ready(function() {

	var defaults = {
		containerID: 'moccaUItoTop',
		containerHoverClass: 'moccaUIhover',
		scrollSpeed: 1150,
		easingType: 'linear'
	};

	$().UItoTop({ easingType: 'easeOutQuart' });
});

En el código se pueden configurar algúnanas opciónes como: el diseño CSS y la velocidad del scroll con la que sube nuestra página al pulsar sobre el botón, recordar que no es recomendable una velocidad demasiado baja, ya que el fin de este botón es ahorrar tiempo a los usuarios para llegar de nuevo a la cabecera del sitio.

Power PWChecker es un plugin en jQuery que se encarga de comprobar la calidad de las contraseñas escritas por los usuarios. Para llevarlo esto a cabo previamente requiere definir algunos parámetros como por ejemplo, la cantidad mínima y máxima de caracteres para que las contraseñas sean válidas y los dos avisos de contraseña correcta y concordancia entre dos contraseñas.

Para comenzar a utilizarlo añadimos las referencia a la librería jQuery, llamamos a los ficheros: pschecker.js y style.css

Añadimos el siguiente código HTML, con la clase "password-container" para los campos de contraseña y llamamos a la función de inicialización con los parámetros requeridos.

Este es un ejemplo de cómo utilizar un medidor de fuerza de contraseña:

No es bueno generalizar, pero es un hecho tan demostrable como ver el número de comentarios de nuestros artículos anteriores a la “era Twitter y Facebook” y en estos días atrás. ¿Han dejado de ser interesantes nuestros artículos? la respuesta es no, antes en los comentarios se hacian directamente en los blogs, ahora la comnidad se ha desplazado a las redes sociales, una de las muchas causas es que nos enteramos antes de un nuevo artículo gracias a su Twitter que a su propio feeds RSS, por lo tanto una vez leído el artículo si nos ha gustado lo normal es hacer un RT (retweet) para recomendárselo a nuestros seguidores, este retweet también puede contener un pequeño comentario o seguir la conversación a continuación recibiendo un @replie directamente a la cuenta del blog.

Sucede lo mismo con otras redes sociales como Facebook, la mayor parte de los comentarios se realizan desde allí quedando “encerrados” dentro del muro de la persona que compartió el enelace, o en el mejor de los casos, en nuestra propia página de Facebook.

Para evitar que nuestros blogs de WordPress se muestren sin comentarios, MailChimp ha desarrollado un fantástico sistema cuya misión es la de mostrar en nuestros comentarios los tweet, replies, retweet y comentarios en Facebook. De esta forma se completará el espacio de comentarios con el feedback recibido en cada artículo en estas redes sociales.

El plugin llamado Social no necesita mas que la instalación típica y configurar nuestras cuentas de Facebook y Twitter.

Una vez instalado cambiará completamente la sección de comentarios de tu blog mostrando una caja con menús específicos para cada red (replies, comentarios realizados en WordPress, tweets y pingbacks), manteniendo así separados todos los comentarios.

Estas son algunas de sus características:

• Software gratuito y Open Source
• Ligero. No utiliza imágenes
• Skins 100% personalizables mediante CSS (se incluyen los aspectos: vimeo, YouTube y Hulu)
• Independiente de frameworks
• Fácil de usar, de entender y extender
• Aspecto coherente entre los distintos navegadores
• Pantalla completa
• Control de volumen
• Fallback a Flash

Para utilizar VideoJS en nuestra página, lo primero será descargar la última versión de VideoJS, descomprimirla y subirla a nuestro servidor. El siguiente paso será incluir los archivos JavaScript y CSS.

<head>
  ...
    <script src="video.js" type="text/javascript" charset="utf-8">
    </script>
    <link rel="stylesheet" href="video-js.css" type="text/css"
    media="screen" title="Video JS" charset="utf-8">
  ...
  </head>

Para tener las funcionalidades de VideoJS añadimos una función JavaScript que se ejecutará cuando cargue la página:

<script type="text/javascript" charset="utf-8">
VideoJS.setupAllWhenReady();
</script>

Para finalizar, en el tag body construimos el player dentro de un div con clase “video-js-box” para reconocer la sección. Dentro del div creado añadimos <video> con sus respectivos atributos y opciones de formato de video.

  <!-- Begin VideoJS -->
  <div>
    <!-- Using the Video for Everybody Embed Code
http://camendesign.com/code/video_for_everybody -->
    <video width="640" height="264" controls preload
poster="http://video-js.zencoder.com/oceans-clip.png">
      <source src="http://video-js.zencoder.com/oceans-clip.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
      <source src="http://video-js.zencoder.com/oceans-clip.webm"
type='video/webm; codecs="vp8, vorbis"' />
      <source src="http://video-js.zencoder.com/oceans-clip.ogv"
type='video/ogg; codecs="theora, vorbis"' />
      <!-- Flash Fallback. Use any flash video player here.
Make sure to keep the vjs-flash-fallback class. -->
      <object id="flash_fallback_1"code-value">vjs-flash-fallback"
width="640" height="264" type="application/x-shockwave-flash"
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
        <param name="movie"
value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars"
value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png",
{"url": "http://video-js.zencoder.com/oceans-clip.mp4",
"autoPlay":false,"autoBuffering":true}]}' />
        <!-- Image Fallback. Typically the same as the poster image. -->
        <img src="http://video-js.zencoder.com/oceans-clip.png"
width="640" height="264"
alt="Poster Image"
          title="No video playback capabilities." />
      </object>
    </video>
    <!-- Download links provided for devices that can't play
video in the browser. -->
    <p><strong>Download Video:</strong>
      <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
      <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
      <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
      <!-- Support VideoJS by keeping this link. -->
      <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
    </p>
  </div>
  <!-- End VideoJS -->

Se puede ver una demo online de la funcionalidad del reproductor y sus Skins 100% CSS.

También dispone de varios plugins para hacerlo aún más compatible con: WordPress, jQuery, Drupal, Umbraco y Joomla.

Con el plugin jQuery Portamento, nos resultará muy sencillo colocar una caja flotante en diferentes partes de nuestra web (derecha, izquierda, arriba o abajo) sabiendo que la caja con el contenido mantendrá siempre su posición a medida que el usuario realice scroll en la página.

Para comenzar a utilizarlo en nuestra web primero descargamos el plugin y realizamos las llamadas a portamento.js antes del cierre del tag </body> de nuestra web, así como también indicamos a que ID habrá de aplicarse el script.

<script src="portamento.js"></script>
<script type="javascript">
$('#ejemplo').portamento();
</scritp>

El siguiente paso es dar formato a nuestra caja por medio de CSS:

#portamento_container {
	float:right;
	position:relative;
}

#portamento_container #example {
	float:none;
	position:absolute;
}

#portamento_container #example.fixed {
	position:fixed;
}

Para finalizar añadimos el código HTML donde deseamos mostrar la caja flotante en nuestra web:

<div id="ejemplo">
<p>Esto es un ejemplo de caja flotante en ZonaW.com</p>
</div>

Este extra es el de unificar los resultados de varias redes sociales devolviéndonos un solo número, con el número total de veces que un enlace se ha compartido ya sea en: Facebook, Twitter, Digg o almacenado en Delicious. Sólo echamos en falta a Google Plus en esa lista y esperamos que pronto añadan esa funcionalidad, pero aún así el resultado merece la pena.

¿Cómo se utiliza?

Lo primero será descargar desde su web el archivo que contiene el fichero sharecount.js subirlo a nuestro servidor y realizar la llamada.

Después insertamos el botón en cualquier parte de nuestra web:

<a href="http://www.google.com/" class="shareme">Total</a>	

<div class="sharecount">Compartir</div>

La llamada la realizamos antes del cierre de la etiqueta:

<script type="text/javascript" src="sharecount.js"></script>	

</body>

Por último guardamos los cambios. El script además, trae algunas opciones mediante las que controlar el tiempo de espera, servicios sociales a incluir, clases del link, etc.

Como extra si utilizáis un blog en WordPress existe un plugin llamado Broken Link Checker que se encarga de comprobar dentro del blog enlaces e imágenes ausentes o redirecciones informándonos dentro del mismo panel de WordPress o si lo indicamos mediante un email, con la información de posibles enlace rotos en nuesteo sitio o redirecciones.

Entre los errores posibles en nuestro panel de Webmasters de Google se incluyen:

• La página solicitada no se encuentra

Estos errores son los más frecuentes, se dan cuando el servidor realiza una solicitud de una página que no existe en el servidor.

Existen muchos tipos de errores por códigos de estado HTTP. Los puedes encontrar en la sección códigos de estado de HTTP:

- 200: El servidor muestra la página correctamente
- 404: La página solicitada no existe
- 503: Cuando el servidor está temporalmente fuera de servicio

• No se han seguido estas URL

- Error de redireccionamiento: significa que Google no puede seguir los redireccionamientos, sus directrices sugieren que permitas el acceso a todas las páginas del sitio desde al menos un enlace de texto estático.

- Error de bucle de redireccionamiento: como su nombre indica, existen páginas cuyos redireccionamientos no dirijen a sí mismos.

- URL de redireccionamiento demasiado larga: Google recomienda no añadir información automáticamente a las URL de nuestro sitio web (como un ID de sesión) Recuerda que el límite sugerido en RFC 2616 (255 bytes)

- Redireccionamiento no válido: se da cuando desde un redireccionamiento desde una página, no consigue acceder a la página de destino.

- Redireccionamiento vacío: aparece cuando Google detecta un redireccionamiento en nuestro site, pero éste no redirige a ningún sitio.

- Error de cookies: muy posible que motores de búsqueda tengan dificultades para rastrear sitios que utilizan cookies para la navegación

• URL restringidas por robots.txt

Ya hemos hablado en otras ocasiones del archivo robots.txt y de cuál podría ser un robot optimizado para WordPress, pero en ocasiones somos nosotros mismos los que no permitimos o dificultamos a los buscadores que encuentre una URL en nuestro site. En este caso tendremos que revisar nuestro robot.txt y volver a enviárselo a Google desde el apartado información del sitio > Acceso de rastreadores.

• URL caducadas

Aparecen estos errores cuando los motores de búsqueda tratan de acceder a alguna de nuestras páginas y reciben un aviso de tiempo de espera caducado al intentar acceder a la página.

- El tiempo de espera de la búsqueda DNS ha caducado.
- El tiempo de espera de la URL ha caducado.
- El tiempo de espera de robots.txt ha caducado.

• Errores de HTTP

Son errores que se dan cuando Google visita nuestra web y recibe un mensaje de error al intentar visitar una URL. Revisar los errores del primer punto en códigos de estado de HTTP.

• URL inaccesibles

Este tipo de errores es muy común en servidores lentos o cuando se detecta un error de DNS. Entre otros errores se incluyen:

• Error 5xx
• Problema de DNS
• No se puede acceder al archivo robots.txt
• No se puede acceder a la red
• Se ha producido un error al establecer conexión.
• No se ha obtenido respuesta.
• Se ha obtenido una respuesta incompleta.
• Se ha rechazado la conexión.
• Las cabeceras están incompletas.

• Errores 404 leves

Son los errores más comunes, se dan cuando se realiza una petición por parte de un usuaario a una página de nuestra web inexistente, el servidor se encarga de devolver un código de error 404 (Página no esncotrada). Se suelen dar al eliminar páginas que han estado recientemente activas e indexadas o al cambiar de URL una página. Su solución es sencilla, bastará con hacer un correcto redirecionamiento de la URL antigua a la nueva y actualizar nuestro sitemap.

En todo caso, es conveniente tener una página de error 404 personalizada que pueda proporcionar información extra al usuario, incluso añadir un buscador o una lista con los artículos o secciones más importantes de nuestra web en ella.

Con el plugin WP-CopyProtect conseguiremos además de deshabilitar el botón derecho del ratón, evitar que nuestros textos puedan ser seleccionados, ahuyentando de una forma “un poco más elegante” a posibles usuarios con la intención de copiar nuestros artículos. Es cierto que este tipo de plugins van contra las normas de accesibilidad web y no son bien vistos en muchos casos por nuestros lectores, además de que en la mayoría de los casos de vuelven inservibles ya que con una simple desactivación de JavaScript en nuestro navegador el plugin anticopia dejaría de funcionar.

Para instalar WP-CopyProtect en nuestro blog seguiremos los pasos habituales de: descargar el plugin, descomprimir y subir el archivo wp-copyprotect.php al directorio /wp-content/plugins/ de nuestro servidor.

Como se muestra en la página de configuración, el plugin nos permite tanto deshabilitar el menú contextual al hacer clcik derecho como asignar un mensaje cuando el usuario intente acceder a el. La segunda opción es la de activar o desactivar permitir que nuestros usuarios puedan seleccionar el texto de nuestra web.

Hay que destacar que este plugin no afecta al posicionamiento SEO de nuestra web.

Su configuración es bastante simple, y nos permite gestionar opciones básicos relacionados con la reproducción del video como por ejemplo: controles básicos, volumen, calidad, proporción, aspecto, bufferIMG, opacidad…

No tendrás que preocuparte por el tiempo de carga de tu site, ya que el propio plugin nos ofrece una serie de opciones para gestionar de forma eficiente los retrasos y tiempos de descarga del video inicial, para ello utiliza imágenes que son mostradas mientras el video inicia su reproducción.

Un ejemplo del simple funcionamiento de este plugin y de la utilización del mínimo cóodigo lo podemos encontrar implementando la siguiente configuración básica. De todas formas, si lo que queremos es modificar el aspecto visual del video podemos configurar las imágenes que queramos utilizar como los controles, simplemente pasando por parámetro la ruta a los archivos.

Llamada JS:

    $(function(){
      $(".movie").mb_YTPlayer();
    });

Constructor HTML

<a id="bgndVideo" href="http://www.youtube.com/watch?v=MR9av-I35ME">
Bill Viola</a>

Parámetros

$.YTPlayer.controls.play= “<img src='images/play.png'>”
$.YTPlayer.controls.pause= “<img src='images/pause.png'>”
$.YTPlayer.controls.mute= “<img src='images/mute.png'>”
$.YTPlayer.controls.unmute= “<img src='images/unmute.png'>”

En el siguiente enlace se puede ver una demostración de su funcionamiento.

Web: jQuery.mb.YTPlayer