Caja "Me gusta" de Facebook, Pop Up (Emergente) - Actualización #3

Actualización 1: Se corrigió el procedimiento en la instalación

Actualización 2: Solucionado el conflicto de Jquery implementando: "jQuery.noConflict();"

Actualización 3: Ofrezco disculpas por el vital error, faltaba una linea de codigo, por eso a muchos no les ha funcionado. Ya esta corregido

He estado revisando algunos códigos de ColorBox y he querido poner el FanBox de Facebook a una de estas ventanas emergentes (PopUp).

 

Es un efecto muy agradable que ocupa todo la pantalla con cierta transparencia. Estas cajas emergentes permiten agregar muchas cosas, pero esta vez nos dispondremos a insertar los Seguidores de Facebook.

Mira el Pop Up en este blog de pruebas

El código original los puedes encontrar en Github.

Agregar PopUp a Blogger

El siguiente código contiene los estilos y scripts necesarios para hacer funcionar el Popup. Ademas de ello, es quien da la orden para que se ejecute el Popup. Ve a Plantilla - Editar HTML, da un clic dentro de la plantilla, presiona Ctrl + F y busca </head>. Y antes pega este código.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://sites.google.com/site/terrenoblogger/javascript/colorbox-terrenoblogger.css" rel="stylesheet"></link>
<script src="https://sites.google.com/site/terrenoblogger/javascript/colorbox-terreblogger.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) { var fifteenDays = 1000*60*60*24*0; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); 
jQuery.colorbox({width:"400px", inline:true, href:"#facebook-TB"}); } }); </script>

Lo resaltado en azul es Jquery, así que si ya lo tienes en tu blog, omitelo.

Este Popup solo funciona con las versiones de Jquery 1.8.3 e inferiores. Si utilizas una versión superior, no funcionará.

El numero 0 que esta resaltado, es el numero de días que tardará en reaparecer de nuevo la caja a un usuario; tu puedes modificarlo. Esto utiliza las cookies del navegador.

El código a continuación es la caja "Me gusta"de facebook. Dirigete a Diseño - Agregar gadget - HTML/Javascript y pega el siguiente codigo

<div style="display: none;"><div id="facebook-TB" style="background: #fff; padding: 10px;"><h3 class="box-title">Acompáñanos en Facebook</h3><center><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FUSUARIO-FACEBOOK&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" style="border: none; height: 258px; overflow: hidden; width: 300px;"></iframe></center><div align="left"><span style="font-size: x-small;">terrenoblogger.co</span></div></div></div>

Cambia USUARIO-FACEBOOK por el nombre de tu pagina.

Ten en cuenta lo siguiente:

Hay dos tipos de url de paginas en facebook.

• 1. La que tiene la url personalizada, por ejemplo: http://www.facebook.com/nombredepagina
• 2. No tiene la url personalizada, por ejemplo: http://www.facebook.com/page/nombrepagina/164689464316

Si tu pagina en facebook aun no tiene una url personalizada, entonces copiaras el ID de usuario de la msima

Por ejemplo:
http://www.facebook.com/page/nombrepagina/164689464316

El numero resaltado en azul es el ID de tu página. Y ese es el que debes reemplazar por USUARIO-FACEBOOK.

Bien, con esto ya tienes una muy bonita caja de seguidores en tu blog.

Cualquier duda o inconveniente, coméntalos!

Leer Más...

SEO: Atributos Alt y Title Automáticos en las Imágenes

Los atributos 'alt' y 'title' son los que describen una imagen y su contenido. El atributo 'alt' se utiliza para describirle el contenido a los motores de búsqueda, y el atributo 'title' describe el contenido a los usuarios.

En este video Matt Cutts explica la importancia del atributo "Alt" en la imágenes. El el video el hace mucho énfasis en al tributo 'alt' mas que en el 'title', ya que el atributo alt es el que Google va a leer, sin embargo al combinar estos dos se obtiene un mayor impacto tanto en el motor de búsqueda como en los usuarios.

El código base de una imagen debe ser este:

<img src="imagen.jpg" alt="descripcion" title="descripcion" />

En Internet Explorer el atributo 'alt' genera una descripción (tool tip) al pasar el puntero de mouse sobre una imagen, mientras que en Firefox y Google Chrome, esta descripción visible es generada por el atributo 'title'.

Al describir lo que sucede en una imagen le estas ayudando a los motores de búsqueda a encontrar dicha imagen mas rapidamente y esto generara un aumento de trafico hacia tu sitio web.

No debes exceder en el uso de palabras clave en los atributos 'title y 'alt' ya que Google penalizará eso, puesto que no estas describiendo lo que en realidad esta sucediendo en la imagen.

Para agregar estos atributos a las imagenes, Blogger ha implementado un herramientas desde el editor de entradas.

Simplemente, después de agregar un imagen y estando en el editor de entradas, das un clic sobre la imagen y te diriges a Propiedades, allí agregas el texto del titulo y el texto del alt. En lo posible realiza este proceso desde el editor de entradas y agrega un descripción correcta manualmente.

Sin embargo, para reducir el trabajo y realizar este proceso automáticamente, te dejare un script que tomará el nombre de la imagen y lo usará para insertar los atributos title y alt. Pero recuerda que la mejor descripción es la realizada manualmente.

Este script utiliza Jquery; si ya lo tienes en tu blog entonces omite el código resaltado en verde.

Ve a Plantilla>Editar HTML> das un clic dentro de la plantilla, presionas Ctrl + F y buscas </head> Justo antes pega este código:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
/*Atributos alt y title*/
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>

Guardas lo cambios realizados y vas a una entrada donde exista una imagen. Pasando el mouse sobre ella observaras que se muestra una descripción de dicha imagen y efectivamente esto es lo que queremos lograr.

Con esto se optimizara el posicionamiento de tus imágenes y por lo tanto tu pagina web estara mejor ubicada en los resultados de búsqueda.

Aplícalo si aun no lo has hecho, esto te ayudará.

Leer Más...